Visualize Recursion Tree & Callstack

Paste a recursive function, execute it, and visualize the call tree with memoization overlay.

Paste any recursive JavaScript function and visualize its entire call tree step by step. See every function call as an interactive node with arguments and return values. Toggle memoization to compare how caching prunes duplicate branches. Control animation speed, step through calls one at a time, or view the full tree instantly. Built-in presets for Fibonacci, Factorial, Power, GCD, and Tower of Hanoi. Everything runs sandboxed in your browser with zero server calls.

Your data stays in your browser
Was this tool useful?
Tutorial

How to Use the Recursion Tree Visualizer

1
1

Select a preset or paste code

Click a preset like Fibonacci or paste your own recursive JavaScript function.

2
2

Set arguments and execute

Enter the function arguments and click Execute to build the call tree.

3
3

Explore the tree

Pan, zoom, and inspect nodes to see arguments and return values for every call.

4
4

Toggle memoization

Enable memoization to see how caching prunes duplicate branches and reduces total calls.

5
5

Animate step by step

Click Animate to watch calls unfold in order, or use Step to advance one call at a time.

Guide

Understanding Recursion Trees and Call Stacks

What is a recursion tree?

A recursion tree is a visual representation of every call a recursive function makes. Each node shows the arguments passed in and the value returned. Parent-child edges represent which call spawned which sub-call. By reading the tree top-down you can trace the exact execution order and understand how the problem decomposes into smaller sub-problems.

Why memoization matters

Many recursive algorithms revisit the same sub-problems multiple times; Fibonacci is the classic example where fib(3) is computed more than once. Memoization stores results of previously solved sub-problems so they are returned instantly on repeat calls. This technique transforms exponential time complexity into polynomial or linear time, which is the core idea behind dynamic programming.

Reading the call stack

The call stack is the chain of active function calls at any moment during execution. In this visualizer, the depth of a node corresponds to its position on the stack. Deep trees mean more stack frames, which can lead to stack overflow errors in real programs. Observing stack depth helps you understand memory usage and identify when an iterative approach might be safer.

Common recursion patterns

Linear recursion calls itself once per invocation; examples include factorial and linked list traversal. Binary recursion makes two calls per invocation; Fibonacci and merge sort follow this pattern. Tree recursion generalizes to three or more branches, as seen in Tower of Hanoi. Understanding these patterns helps you predict time complexity before writing any code.

Sources

Examples

Worked Examples

Fibonacci fib(4)

function fib(n) { if (n <= 1) return n; return fib(n-1) + fib(n-2); }

1

fib(4) calls fib(3) and fib(2)

2

fib(3) calls fib(2) and fib(1)

3

fib(2) calls fib(1) and fib(0)

4

Base cases return 0 or 1

5

Results propagate up: fib(4) = 3

9 total calls without memo; 7 with memo (fib(2) and fib(1) cached)

Factorial fact(5)

function fact(n) { if (n <= 1) return 1; return n * fact(n-1); }

1

fact(5) calls fact(4)

2

Chain continues: fact(3) -> fact(2) -> fact(1)

3

Base case fact(1) returns 1

4

Multiply back up: 1*2*3*4*5

5 total calls; linear recursion has no duplicate sub-problems

Use Cases

Use Cases

Understand Fibonacci recursion

Visualize how fib(5) generates 15 calls without memoization but only 9 with it, revealing the exponential-to-linear optimization in dynamic programming.

Debug a custom recursive algorithm

Paste your merge sort or tree traversal function to inspect the exact call order, arguments, and return values at every level of recursion.

Teach dynamic programming concepts

Show students side-by-side how memoization eliminates redundant sub-problems by graying out cached branches in the recursion tree.

Frequently Asked Questions

?What programming languages are supported?

Currently JavaScript functions are supported. The function must use standard JS syntax with a named function declaration.

?Is there a limit on recursion depth?

Yes, execution is capped at 200 total calls and 50 levels of depth to prevent browser freezes.

?How does memoization mode work?

When enabled, duplicate calls with the same arguments return cached results. Cached nodes appear grayed out with a memo badge.

?Is my code sent to a server?

No. All code execution happens locally in your browser using a sandboxed Function constructor. Nothing leaves your device.

?Is this tool free?

Yes, completely free with no limits. No registration or payment required.

?Can I use my own recursive function?

Absolutely. Replace the preset code with any named JavaScript function that calls itself recursively.

?What do the gray nodes mean?

Gray nodes with a memo badge indicate cached calls; the function returned a memoized result without recomputing.

?Why does my function show an error?

Ensure your code is a valid named function declaration. Arrow functions and anonymous functions are not supported.

Help us improve

How do you like this tool?

Every tool on Kitmul is built from real user requests. Your rating and suggestions help us fix bugs, add missing features and build the tools you actually need.

Rate this tool

Tap a star to tell us how useful this tool was for you.

Suggest an improvement or report a bug

Missing a feature? Found a bug? Have an idea? Tell us and we'll look into it.

Related Tools

Newsletter

Get Free Productivity Tips & New Tools First

Join makers and developers who care about privacy. Every issue: new tool drops, productivity hacks, and insider updates — no spam, ever.

Priority access to new tools
Unsubscribe anytime, no questions asked