Keyboard shortcuts

`←` `→`	step back / forward
`Space`	play / pause
`R`	restart playback from step 0
`L`	toggle loop (wrap at the end)
`O` / `U`	step over / step out (by stack depth)
`[` / `]`	jump to previous / next milestone
`T` / `F`	answer a branch question True / False
`Enter` / `Esc`	submit / skip a predict question
`.` after a name	typed member completions (`seen.` → dict methods)
`(` after a callable	signature help — `enumerate(`, `nums.sort(`, your own `helper(`
`Ctrl`+`Space`	word completion in the editor
`Tab` / `Shift`+`Tab`	indent / dedent selection
`?`	this help

While a predict question is open it owns the keyboard — arrows and Space won't step underneath it.

Toolbar

The bar holds three things, because only three of them are part of writing and watching code.
Let's code — your own code, starting from a plain function with the call already in the test case, so the first Run is a run you can watch. The ▾ beside it offers Script (statements top to bottom, no call needed), Function and Class (the LeetCode shape).
Examples — one searchable picker for everything there is to study. Type to filter by name or category; the loaded one is ticked. Algorithms at the foot of it opens the Princeton Algorithms walkthrough: every core algorithm, animated, with the Python behind it.
More — the utilities, none of which you need while working: Cheatsheet (Big-O tables, patterns, tricks), Notes, ⏰ Timer, Theme, Support and this Help. A running timer keeps its readout in the bar, so you can pace against it without opening the menu.
💾 Save (editor header) — keep the current code + test cases as a named problem with a markdown description (a formatting toolbar sits above the description box); it gets a stable link (#x=my:…) and saving again updates it.
Notes — a library of markdown notes: insights, patterns you spotted, traps you fell into. Title + body per note, Write/Preview tabs, a formatting toolbar, and autosave as you type. Kept in this browser's local storage, so they need no account and never leave your machine — which also means they do not follow you to another browser or survive clearing site data. Paste a deep link (#x=…&s=…) into a note to pin the exact problem, case and step you were looking at.
Settings live in the section they affect. The ⚙ gear in the Code Editor header opens a bar with font size, tab size, auto-close, smart keys and IntelliSense. Which visualization panels are shown is the Views row at the top of the Visualization section. The theme is in More, because it recolours everything rather than one panel.
Saved problems (the 💾 icon in the Code Editor header) — keep the current code + test cases under a name, then reload them into the editor whenever you like. Stored in this browser's local storage, so they need no account and never leave your machine (and, like Notes, do not follow you to another browser or survive clearing site data). Save as many attempts as you want; each is its own entry.
Session memory — your code and test cases are remembered across reloads automatically; load any example/problem (or the editor's reset-code button) to move on. For a copy you can come back to later, use Saved problems above.

Editor

Tidy (lines icon) — tabs→spaces, strip trailing whitespace, collapse blank lines. Never re-nests your code.
Reset code (↺) — restore the loaded problem's original solution (or the blank template in custom mode).
Projection (⇢) — overlay each line's most recent computed value inline.
Indent guides — faint vertical rules trace each nesting level so deep blocks stay readable. Select lines and press Tab/Shift+Tab to indent or dedent the whole block.
Test case rows are LeetCode-style: type [2,7,11,15], 9 and the app builds the real call (trees/lists/graphs included). Fill Expected for pass/fail. The ? beside the panel title explains the input formats.
No test case needed. If your code already does something at the top level — t = Trie() then t.insert("apple"), or a plain script — leave every row blank and press Run. It traces the file itself, top to bottom. A case is only there to call something the code merely defines.
Click a line number to run-to-line; line numbers shade with execution count (the hot loop glows).

Playback

↺ Restart — play again from step 0.
▶ Play — icon flips to pause while running.
⇆ Loop — reaching the end wraps to the start and keeps going (with predict mode on, it re-asks each pass — a drill loop).
Step over / out — skip deeper calls / run until the current function returns.
Speed — at ≥4x animations and questions are suppressed for fast scanning.
Drag the scrubber to any step; every view re-renders deterministically.

Predict mode (the 🎯 button)

Before a step runs, it may become a question: cell writes (dp[i] = …), swaps, appends, pointer chases (slow = nums[slow]), computes (mid = (lo+hi)//2), branches (True/False), and prints.
The badge shows questions ahead ("12 ahead") or your score ("7/9"). "none here" means this trace has nothing predictable.
Repetitive kinds (computes, branches, prints) ask at most twice per source line per arming; value questions re-ask freely (fresh lookups).
Answers are read from the next step's real state — you're predicting the interpreter.

Reading the visuals

Colored arrows under array cells are index variables (i, lo, left…) pointing at their cell — drawn only into arrays the code actually indexes with that variable.
Dashed boxes stack arrays the code indexes with the same variable ("aligned by i") — column i reads vertically across them.
DP dependency colors: blue ring = the cell about to be written, orange = same-array cells it reads, teal = cells read from other arrays (dp[i] = dp[i-1] + cost[i]).
Characters on DP grid axes — when a table sits next to the strings it compares, each row/column shows its character (ε = the empty prefix at 0).
Teal ⇒ chips on a dict mean its values are positions in another structure (seen: 'b': 1 ⇒ s[1]='b').
Flying chip on a single step forward = a value moving between structures (out[i] = nums[i], res.append(arr[i])).
Flash = the cell/value that just changed; swaps slide.
Timeline — each row is the array frozen at one moment, stacked downward; color = value (dark blue low → orange high, legend shows real min/max); gaps are None. Hover reads a cell; click a row to jump.
⚖ badge — two names share one object (aliasing); row-shared grids get the [[0]*n]*m warning.
Dashed green stubs on recursion trees are memo hits — the pruned subtrees.
Heaps show as the flat array and the binary tree at once; hover any cell or node to light up its parent and children in both, seeing how index i maps to 2i+1 / 2i+2.
Recursion tree — the glowing node is the current call (search frontier); the phase caption reads out chose / backtracked as you step. For backtracking searches, leaves turn into green ★ solution nodes or dashed dead ends as each branch resolves.
Navigating a big tree — drag to pan and scroll to zoom (or use the −/+ buttons). Fit frames the whole tree; Follow (the target icon) keeps the current call centered as you step — ideal for deep recursion. The last button opens the tree fullscreen.
⋯n⋯ in big arrays marks elided ranges (head + tail + pointer neighborhoods are captured).
Click any value for "why?" — the step and line that last wrote it, with jump-to.
Shareable links — every problem stamps the URL hash on load (plus case/step while stepping the reference). The 🔗 button by the title copies it. Your own or edited problems copy a portable link that carries the whole problem (code, cases, description) and opens on any codeviz — the receiver saves it to keep a copy.

Panels

Flowchart — the third section, opened from the Flowchart tab on the right edge. One chart per scope — Program for the module, then every function and method — drawn from the code itself: pills for entry and exit, a diamond for each decision with its true/false branches labelled, and a box per statement. As you step, the box being executed lights up in the chart for the function you are actually inside, so you can see where in the shape of the algorithm the run currently is. Zoom with −/+.
Complexity meter — ops = executed lines (time proxy), compares/accesses = comparison & subscript counts, calls + max depth = recursion cost. "Plot scaling" charts measured growth against an O(…) reference. On the sorts it becomes a best/worst/average explorer: toggle input shapes (sorted, reversed, random, duplicates) and watch insertion sort go linear on sorted input but quadratic reversed, while merge sort ignores the shape entirely.
Watch — pin expressions (r - l + 1, len(heap), gcd(a, b)); sparklines plot them per step. Expressions are JavaScript over the current variables, with helpers: aggregates len, sum, avg, min, max, abs; sequence probes first, last, count(x, v), distinct, contains(x, v), isSorted; math floor, ceil, round, sqrt, sign, log2, pow(a, b), gcd(a, b), bitCount. Loaded problems suggest chips from their known techniques.
Trace Table — the dry-run table you would draw by hand: a row per iteration and a column per value you are following. It arrives already filled in — the columns are read off the trace (the pointers, counters and accumulators that actually move) — then you add or remove any expression you like, same syntax as Watch (i, nums[i], right - left + 1, len(stack)). Lists and dicts are tracked as themselves, so a column can hold [1, 3, 5] or {a: 1}, not just a number. “Changes only” keeps it to one row per iteration instead of one per executed line; click a row to jump to that step, or Copy to paste the table into your notes.
Invariants — assert a truth that should hold every step (isSorted(a), lo <= hi, sum(bucket) == n). A green/red strip shows where it holds vs breaks, and the first break flags the scrubber — this is how you check why an algorithm is correct, not just what it does.
Milestones — diamonds on the scrubber mark meaningful moments (a result recorded, deepest recursion, returned to the top, each loop pass, done). Click one, or press [/], to jump between ideas instead of raw steps.
Narration — a subtitle-style read-along that turns each step into a sentence (Call fib(3), dp[i] = dp[i-1] + dp[i-2] = 5, x > 5 → true), highlighting the current one and letting you click any line to jump.
Memory — when two names point at the same object (aliasing) or a list holds other lists (nesting), this draws the heap as boxes and arrows. grid = [[0]*n]*m shows every row-arrow hitting one shared box — the classic mutable-default trap made visible.
Value ribbons under scalars are their whole history — click to jump.
Turn any panel you don't need off in the Views row at the top of the Visualization section — and turn on the ones you have not tried.