Learn Computer Academy

Recursion Visualizer

Watch a recursive function’s call stack really grow and shrink, with the real arguments and real return value shown on every frame — and the exact moment it unwinds back into an answer.

Browse Programming lessons

This runs your real code in a sandboxed iframe — the stack you see is genuinely how deep the calls went, not a hand-drawn animation. Presets are pre-wrapped with a small trace() helper so arguments and return values can be captured; switch to "Edit code" to try your own, following the same wrapping shown there.

Code

Example
let sumTo;
sumTo = trace('sumTo', function (n) {
  if (n === 0) return 0;
  return n + sumTo(n - 1);
});
sumTo(5);

How this works

Getting a function’s real arguments and return value — not just its name — needs the traced function wrapped in a small trace() helper, which the three presets already do (a let x; x = trace("x", function (n) {...}) pattern, so the function’s own recursive calls go through the traced version, not an untraced inner copy of itself). That’s why this tool ships as presets plus an editable-code escape hatch, rather than trying to auto-trace arbitrary free-form code the way the Event Loop Visualizer does — a full JS parser would be needed to rewrite arbitrary call sites safely, and this tool doesn’t have one. The call stack panel, ordering and every argument/return value shown are real, recorded from your code actually running — not invented for the demo.