Recursive

한국어 | English

Paste your code and watch it execute step by step — with line highlighting, variable tracking, and call tree visualization.

Supported Languages

• Python
• JavaScript / TypeScript

Features

• Paste your code and input fields are automatically generated
• Recursive functions are visualized as a tree structure
• Debug comfortably without setting breakpoints
• Current execution line is highlighted with manual/auto playback
• Works with a single function or plain code

Usage

1. Go to the playground
2. Paste your code (function or bare code — both work)
3. Enter arguments if your function needs them
4. Click ▶ Run
5. Step through with the controls or hit play

Preset algorithms (permutations, combinations, subsets, bubble sort) are also available from the home page, organized by category.

Adding a preset algorithm

1. Add a .js file to src/algorithm/presets/codes/
2. Register the metadata in the matching category file (recursion.ts, sorting.ts):

{
  id: "selection-sort",
  name: "선택 정렬 (Selection Sort)",
  description: "가장 작은 원소를 찾아 앞으로 보냅니다",
  difficulty: "easy",
  category: "sorting",
  defaultArgs: [[5, 3, 8, 1, 2]],
  code: loadCode("selection-sort.js"),
}

Project structure

src/
├── algorithm/        # Preset definitions & registry
│   └── presets/
│       └── codes/    # Algorithm source files (.js)
├── engine/           # AST analysis, transformation, Worker execution
├── editor/           # CodeMirror editor, ArgumentForm
├── player/           # Step playback (useAlgorithmPlayer)
├── visualizer/       # TreeView, CodePanel, CallStack, VariablePanel
├── shared/           # Theme, utils, common UI
└── app/              # Next.js routes

Tech stack

Next.js · TypeScript · Vanilla-Extract · acorn · Shiki · d3-hierarchy · CodeMirror · Web Workers

Development

pnpm install
pnpm dev
pnpm test
pnpm fix          # oxlint + oxfmt

Contributing

Bug reports and feature requests → GitHub Issues

License

MIT