Recursive: An Open-Source Tool for Real-Time Code Execution Visualization

I built a tool that visualizes your code step by step — Recursive

Seonghyeon Kim developed Recursive, an open-source tool designed to visualize code execution line-by-line without breakpoints or configuration. The system supports Python’s standard library and automatically strips types from TypeScript for immediate browser-based execution.

Why This Matters

Static code analysis often fails to convey the dynamic state changes of complex algorithms, especially when dealing with nested loops or deep recursion. By providing a grid-based visualization of array mutations and a tree-based view of recursive calls, Recursive bridges the gap between abstract logic and actual runtime behavior, reducing the cognitive load required to debug algorithmic flow.

Key Insights

• Recursive functions are visualized as a call tree to simplify the tracking of execution flow (Kim, 2026).
• Array mutations are displayed in a grid format with per-cell change highlighting to track in-place swaps.
• TypeScript and JavaScript support includes automatic type stripping to run code directly in the visualization engine.
• Variable tracking is automated at every step, eliminating the need for manual print statements or complex debugger setups.

Working Examples

A Python implementation of Bubble Sort used to demonstrate array state visualization.

def bubble_sort(arr):
    n = len(arr)
    for i in range(n):
        for j in range(0, n - i - 1):
            if arr[j] > arr[j + 1]:
                arr[j], arr[j + 1] = arr[j + 1], arr[j]
    return arr

Practical Applications

• Algorithm Tutorials: Embed execution views in blogs or Notion to show how data structures evolve during sorting or traversal. Pitfall: Over-simplifying large datasets may lead to cluttered visualizations that obscure the core logic.
• Educational Study: Use the recursive call tree to debug backtracking algorithms or dynamic programming transitions. Pitfall: Deep recursion limits in the browser might prevent the visualization of extremely high-depth call stacks.

References:

• https://github.com/oilater/recursive
• https://dev.to/oilater/i-built-a-tool-that-visualizes-your-code-step-by-step-recursive-23jo