Understand JavaScript execution visually.
Step through an immutable trace of your code — variables, call stack, heap, and execution graph — with AI explanations at every snapshot.
let cart = [];
let total = 0;
cart.push("book");
cart.push("pen");
for (let i = 0; i < cart.length; i++) {
total = total + 1;
}
console.log("Items: " + cart.length);
console.log("Total: " + total);Variables
No bindings yet.
Heap
No heap allocations yet.
Built for deep understanding
Not a syntax highlighter. A trace of everything your code actually does — rendered as inspectable, immutable state.
Step-by-step execution
Every statement becomes an immutable snapshot you can step through, forward and backward, without re-running.
Time travel debugging
Scrub anywhere in the trace. Diffing highlights exactly what changed between any two steps.
Call stack
Watch frames push and pop as functions enter and return, with each frame's parameters and locals.
Heap visualization
Objects and arrays live on a live heap view, so reference semantics and aliasing become visible.
Execution graph
Branches, loop back-edges, and call/return edges drawn as a navigable control-flow graph.
AI explanations
Ask for a snapshot-level explanation: a summary, the concept behind it, and what happens next.
Breakpoints
Pause the trace at chosen lines and continue to the next breakpoint while stepping manually.
Watch expressions
Track expressions across the run and see their values update on every snapshot.
Shareable sessions
Export a workspace — code, timeline, breakpoints, watches — as a link or file and restore it anywhere.
A safe, pure pipeline
Source never runs through eval or the VM. A Babel parse feeds a small interpreter that emits immutable snapshots; the UI only renders.
Start from an example
A curated gallery of pre-verified programs — every one runs through the sandbox and lands on a trace you can step through immediately.
Bubble Sort
Adjacent pairs are compared and swapped across nested loops until the array is sorted.
Hello, Variables
Declare, reassign, and concatenate variables while watching each binding change on the heap and in scope.
Stack Life
Push three items and pop them one at a time to see last-in, first-out behavior in the heap array.
Two Sum
Scan a small array with nested loops to find the two indices that add up to a target.
Function Journey
Two small functions call each other in sequence, so you can watch parameters, return values, and stack frames.
Heap & References
Primitives copy by value; objects share one heap node. Two aliases mutate the same object.