Python & JavaScript Code Visualizer (Step Through Code Line by Line)
Run a short program one step at a time and watch every variable, call and object change.
Try before you buy.
- Free preview: the first half of each run, up to its first 50 steps, with the frames, objects and printed output of those steps.
- Locked until you unlock it: download and copy.
- Unlock: Pro pass, ₹179 for 30 days or ₹79 for 1 week, a one-time payment that never renews. Unlock: Pro pass, $5.99 for 30 days or $2.99 for 1 week, a one-time payment that never renews.
Ways to unlock shows how to get the full result.
Printing this result is locked in the free preview.
Program
Input for input()
Your program calls input(): type its answers here, one per line, or it stops at the first input() it reaches.
Ctrl + Enter (⌘ + Enter) visualizes too. Tab indents; press Esc, then Tab, to leave the editor. Up to 10,000 steps and about 8 seconds per run.
runs next just ran Click a line number for a breakpoint.
Step by step
Press Visualize to run the program here, one step at a time: each line, call and return, with every variable and the objects they point to.
Printed output
Share and export
Link to this program
The program (and its input) travels inside the link, after the “#”: nothing is uploaded. Whoever opens it can visualize it.
The walkthrough for a class
A GIF takes up to 300 steps, a PDF up to 100, the text up to 2,000.
Locked in the free preview. Opens the ways to unlock this result.
Locked in the free preview. Batch runs unlock with a pass.
Locked in the free preview. Query results unlock with a pass.
About the Python & JavaScript Code Visualizer (Step Through Code Line by Line)
Paste a short program, press Visualize and step through it forwards and backwards. At every step you see the line that runs next and the one that just ran, every frame on the call stack with its variables, every object those variables point to — lists, tuples, dicts, sets, class instances, JavaScript arrays, objects, Maps and Sets — drawn as boxes with arrows, and what the program has printed so far. Shared references show as two arrows to one box, so aliasing, mutation and recursion stop being invisible.
Python runs under its own tracer (sys.settrace) in a real CPython interpreter compiled to WebAssembly; JavaScript is read by a parser that adds a step hook before each statement and runs in your browser's own engine. Both run in an isolated sandbox with a time limit, and nothing leaves your device. With a Pro pass a run records up to 10,000 steps, and the walkthrough downloads as an animated GIF or a step-by-step PDF for a class; the free preview shows the first half of each run, up to its first 50 steps.
How to use it
- Choose Python or JavaScript, then type or paste a program, or pick one of the examples (recursion, a loop, two names for one list, a dictionary, a class, a closure, bubble sort, a linked list, binary search, input, an exception). Reset brings back the first example and forgets the program saved in this browser.
- For Python programs that call input(), type the answers under Input for input(), one per line.
- Press Visualize (or Ctrl + Enter). The first Python run downloads the interpreter once.
- Step with Back and Forward, the slider, Play, or the arrow keys; Home and End jump to the first and last step.
- Click a line number to set a breakpoint, then use Next breakpoint: Play also stops there.
- Under Share and export, copy a link to the program, or download the walkthrough as an animated GIF or a PDF, or copy it as text (a pass, or an unlock of that run).
Examples
factorial(4) in Python
Four factorial frames stack up, each with its own n; the returns come back 1, 2, 6, 24 and each frame disappears as it returns.
a = [1, 2, 3]; b = a; c = a[:]; b.append(4)
a and b point to the same list, so both show [1, 2, 3, 4]; c points to its own copy, still [1, 2, 3].
makeCounter() returning a function that adds 1 to count
Each call of the inner function shows count as a variable of the outer function (marked “outer”), going 1, 2.
Common uses
- Seeing why a recursive function returns what it returns, frame by frame.
- Understanding references: why changing one list changed another, or why a copy did not change.
- Following a loop, a sort or a search with every variable in view instead of adding print calls.
- Teaching: projecting a walkthrough, or handing out the PDF of a program step by step.
- Checking a trace table for homework or an exam question.
What each step shows
- The code: a red arrow on the line that runs next, a green one on the line that just ran; lines that never run are dimmed.
- Frames: the global frame first, then one frame for each call still running, the newest last, each with its variables. A step that returns shows the return value; an exception shows its name and message.
- Objects: numbers, strings, True/False and None (null and undefined in JavaScript) are written in the frame; everything else is a box the variable points to, with an arrow. Changed variables and objects are highlighted at the step they change.
- Printed output: what print() or console.log() has written up to that step.
Python and JavaScript
Python runs in CPython 3.14 (Pyodide) with the standard library. Each line, call, return and exception of your code is a step; library code runs inside one step. A generator that yields shows as a pause, with the value it yields, and carrying on is a step of its own.
JavaScript runs in your browser's engine. Each statement is a step, and each turn of a loop is a step on the loop's line; functions show their calls and returns, methods show this, and a function made inside another shows the variables it uses from the outer one as outer. console.log() prints the way Node does. Timers (setTimeout) run before the walkthrough ends. Async functions and generators run without steps inside them.
Limits of one run
A run records up to 10,000 steps and stops after about 8 seconds, so a loop that never ends stops by itself; the walkthrough says where. Very deep recursion shows the outermost frame and the 40 innermost, with how many are left out. Each object shows its first 100 items. Programs can be up to 20,000 characters. A GIF takes up to 300 steps, a PDF up to 100.
Limitations
- Python has its standard library only: packages that are not part of Python (numpy, pandas…) cannot be imported.
- JavaScript runs as one script: import and export are not available, and there is no page (no document or window to draw on).
- Async functions and generators in JavaScript run in one go, without steps inside them.
- Without a pass, each run shows its first half, up to its first 50 steps, and the GIF, the PDF and the text copy are locked.
- Very large objects are shown in part (the first 100 items), and a run with a lot of data may record fewer steps than the limit; the walkthrough says so.
Privacy
On this device; its files download once
Your program and its input stay in your browser: they run in an isolated sandbox on your device and are never uploaded. The link to a program carries the program itself, after the “#”, which browsers never send to a server.
Frequently asked questions
What do I get without a pass?
Without a pass, Python & JavaScript Code Visualizer (Step Through Code Line by Line) shows the first half of each run, up to its first 50 steps, with the frames, objects and printed output of those steps. Until you unlock it, the result can’t be downloaded or copied. A Pro, Premium or Ultimate pass, a one-time payment that never renews, unlocks the full result. The pricing page lists the passes and their prices.
Do I need a pass?
To step through all of a run, and to download the walkthrough as a GIF or a PDF or copy it as text, yes: a Pro pass unlocks every Pro tool. Without one, each run shows its first half, up to its first 50 steps. Your code, the examples and the link to a program are never locked.
Is it the same as running Python on my computer?
It is CPython 3.14 compiled to WebAssembly, so the language, the standard library and the errors are the same. What differs: no packages from outside the standard library, no files from your computer, and a time limit for each run.
Why does a Python step stop on the for line again?
Python goes back to the for line to take the next item each time round the loop (and once more to find there is none), so the walkthrough shows that line once per turn, as a debugger does.
What is the “outer” mark in JavaScript?
It marks a variable that belongs to the function the current one was made in (a closure). The inner function can read and change it, and the walkthrough shows it in the inner function’s frame so you can watch it change.
Why is my JavaScript async function not stepped through?
An async function pauses at each await and carries on later, when other code may have run in between; that does not fit one call stack drawn step by step, so it runs in one go. Callbacks of setTimeout and of array methods such as map and filter are stepped through.
Can I use it in class?
Yes: press Focus to fill the screen, step with the arrow keys or Play, and set breakpoints on the lines you want to stop at. With a pass, download the steps as an animated GIF for slides or as a PDF to print, with one or two steps a page.