Guide · Everything LiveFlow does
The feature guide
A tour of everything LiveFlow can do — from watching a single function run to reading a whole codebase as a sequence diagram. Open any feature in the workspace and try it.
Watch any code run
Write a Python, JavaScript, or TypeScript file and every call, value, and collection streams into a live graph you can scrub frame by frame — then rewind to any step.
A visual debugger for DSA
Recursion call-trees, linked-list & tree views, DP heatmaps, and two-pointer carets — see exactly what your algorithm is doing, not just its final answer.
Understand real codebases
Run a whole multi-file project with cross-file tracing, then read it as a sequence diagram and a module hot-path map — built for onboarding and learning.
01Write & run
No setup, no build step. Open the workspace, pick a language, press Run.
Three languagesPy · JS · TS
Python, JavaScript, and TypeScript — each traced through the same engine, so everything downstream looks identical.
Multi-file projectsBasic · Pro
Run a whole project with cross-file import tracing, from a file-tree workspace. Drag-drop a folder or a .zip.
Built-in librariesBy plan
Curated libraries baked into the runner — just import them. numpy / pandas / lodash and more, no install, no network.
Args & timeout
Pass command-line args and tune the per-run timeout within your plan's max.
02The execution graph
The core experience: a scrubbable timeline where events fold into a live React Flow graph.
Scrub the timeline
Drag to any step and the entire UI deterministically rebuilds at that exact moment. Play, pause, step, and speed up.
Calls, values & objects
Function nodes with returns and exceptions, a variable inspector that shows only what changed, and class instances with their fields.
Live collections
Lists, dicts, sets, tuples, arrays, Maps — with append / pop / insert / sort operations inferred and animated.
Two-pointer carets
Named index cursors (lo / hi / left / right / mid…) render as labeled carets above the cell — two-pointer, sliding-window, binary-search.
Control-flow & I/O nodes
Loops (with a live iteration counter and condition) and branches become real nodes, alongside a console node that streams output.
Nothing falls off-screen
Append to a list and the node auto-scrolls to reveal the new cell; huge collections keep a head + tail window so the latest item is never lost.
03Focused views
A tab bar on the graph panel switches to purpose-built lenses over the same run. Each tab appears only when the run has the data for it — so nothing clutters.
Call Tree
The recursion / call hierarchy with args in and return out — and 'repeat' badges on overlapping subproblems, the reason memoization & DP exist.
Structure
Linked lists and trees drawn from object references (next / left / right), laid out hierarchically with explicit null leaves.
Grid
A 2-D / DP table as a value heatmap with row & column indices and the active cell highlighted.
Sequence
A UML-style cross-file sequence diagram: a lifeline per file with call and return arrows in execution order.
Architecture
A module / import map with a call-frequency hot-path overlay — find the important code fast.
Works in all three languages
Every view is a pure selector over the recorded trace, so Python, JavaScript, and TypeScript all get the same lenses.
04Console & input
Console capture
stdout and stderr are captured and linked to the exact step that produced each line.
Interactive input
input() and prompt() pause the run and ask for a value in the console bar, then resume — same mechanism for both languages.
05Save, share & replay
Your work and your runs persist — and a run can become a public, self-demoing link.
Snippets & projectsBy plan
Save a code library and named multi-file projects, with a live expiry countdown. Listed on your dashboard.
Saved tracesExport · Query
Save a run's structured trace, export it as JSON or JSONL, and (on Pro) run server-side queries over it.
Shareable replay links
Share a run as a public, no-login /replay page that rehydrates the same timeline and graph — no re-execution.
Dashboard
One place for your saved projects & snippets, run history, daily usage meters, and favorites.
06For developers
LiveFlow treats the trace as a first-class, structured artifact — the groundwork for a public Execution + Trace API.
Structured trace export
Every run is a normalized event stream (calls, state deltas, collections, control flow, console) — export as a versioned JSON document or agent-friendly JSONL.
Step search
Jump the timeline to any line, function, or variable from the navbar — the client-side twin of the server-side trace query.
Two themes & shortcuts
Graphite (dark) / Paper (light), persisted; save with Ctrl/Cmd+S; a touch-friendly workspace throughout.
One event contract
Both tracers emit the same JSONL contract, so the visualizer, normalizer, and every view are language-agnostic.
Recent additions are in the changelog; the libraries you can import are on the built-in libraries page.