Time Travel Debugging in Svelte with DeLorean

Why Svelte?

Svelte is a front-end JavaScript framework-like compiler that approaches conditional rendering differently than the most common frameworks today. Where React gains its advantage over full-page refreshes from its virtual DOM, Svelte does away with the virtual DOM altogether by dividing the actual DOM into small, updatable fragments. This means that there is no diffing algorithm between the real DOM and the virtual — any changing variables that Svelte is watching simply cause their corresponding DOM fragments to re-render. These updates are so surgical that the net effect is more performant than using a virtual DOM without the overhead code of a virtual DOM library and its diffing algorithm.

Svelte also natively offers more flexibility and fewer opinions for state management than most front-end frameworks. It allows developers to update and pass stateful variables as props, save state in a central subscribable store, and to change stateful variables from within child components, without passing down a method to set state. This combination of two-way data flow, central storage, and top-down data-flow paradigms can get very confusing without imposing guardrails.

Svelte + DeLorean = ❤

Why DeLorean?


Application state changes display

As you make changes to your app, each component’s state at the time of the state change is stored in a snapshot and cached. These snapshots are then displayed in the Dev Tools panel, and also allow for the next feature:

Time-travel through snapshots

Create new timelines

How to Install DeLorean

Then navigate to Chrome’s extensions page. Ensure you are in developer mode by clicking the ‘Developer Mode’ switch in the top-right corner of the page. Click on ‘Load Unpacked’, and select the chrome_extension folder downloaded earlier. Open up your Dev Tools panel, and check to make sure DeLorean is available in the dropdown menu of the navbar as a panel!

How to Use DeLorean

Click Connect

Make some state changes, then click the state buttons

Changing state after clicking on a previous state button will lead to the creation of a new memory stack. This erases the old changes made to your application’s state and allows you to explore a different sequence of state changes on your application, without needing to refresh or restart your application.


Second, you must run your app on a localhost port. DeLorean’s permissions are scoped to only allow access to these ports.

Third, your Svelte application must be appended to the DOM via an element with the id “root”. This is how DeLorean discovers and interacts with your Svelte application.

Bright Future

We envision a DeLorean app with more interactivity within the dev tool panel. Beyond clicking state buttons to see different moments in your app’s history, we’d like users to be able to seamlessly glide between states with a drag-and-drop slider. Eventually, as users travel back in time and make state changes, DeLorean should also allow for branching timelines to compare and contrast state changes at crucial decision points. And users should be able to ignore state updates to variables they don’t want to track — things like scroll height, or ticks from a repetitive source.

As far as the setup experience goes, we’d like to make getting started with DeLorean even simpler. Removing the need to append the Svelte app to the DOM via a specific element id is a high priority for us.

How to Contribute


For more info, check out our website!

Get in touch with the DeLorean team:

Aram KrakirianGitHub | LinkedIn

Trevor LeungGitHub | LinkedIn

Erick MaeseGitHub | LinkedIn

Sam VanTasselGitHub | LinkedIn



Los Angeles software engineer / egg eater / hummingbird watcher

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam VanTassel

Los Angeles software engineer / egg eater / hummingbird watcher