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.
Zero setup, real multi-file programs
No install, no build step. Run a whole project, many files that import each other, right in your browser, with cross-file tracing built in from the first run.
input() that actually pauses
Interactive, input()-driven programs run live: the timeline streams in as your code executes and genuinely waits on you, not just an animated replay of a static run.
Enter on the error
In the single-file editor and shared replays, a run that throws lands you on the failing step automatically, with the state that caused it right there, so you start at "why" instead of scrolling to find it.
01Write & run
No setup, no build step. Open the workspace, pick a language, press Run.
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.
Three languagesPy · JS · TS
Python, JavaScript, and TypeScript, each traced through the same engine, so everything downstream looks identical.
Built-in librariesBy plan
Curated libraries baked into the runner, ready to import: 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.
02Interactive & error-first
The two things a static, single-file snippet can't do: wait on you mid-run, and drop you straight on the moment it broke.
Interactive input
input() and prompt() pause the run and ask for a value in the console bar, then resume. Same mechanism for both languages.
Console capture
stdout and stderr are captured and linked to the exact step that produced each line.
Enter on the error
In the single-file editor and shared replays, a run that throws auto-lands the timeline on the failing step, causal state and all, with a "Jump to where it broke" button if you've scrubbed away. (Multi-file projects don't have this yet.)
03The 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, and 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.
04Focused 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, plus '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, so you 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.
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, with 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 you can export and query, not just internal UI plumbing.
Structured trace export
Every run is a normalized event stream (calls, state deltas, collections, control flow, console), exportable as a versioned JSON document or agent-friendly JSONL.
Step search
Jump the timeline to any line, function, or variable from the navbar. It is 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.