An interactive simulator that visualizes how JavaScript actually works under the hood.

한국어

Write JavaScript code and watch it execute step by step through the real engine pipeline:

Source Code → Tokenizer → Parser → Interpreter

Each stage is visualized in real time — you can see tokens being generated, the AST being built, the call stack growing and shrinking, scope chains forming, and variables changing as the code runs.

Engine	Closure	this Binding	Event
Sync & Async execution	Heap memory lifecycle	this rule detection	DOM event propagation

The core simulator. Visualizes synchronous and asynchronous JavaScript execution.

Sync mode shows the fundamental execution model:

• Tokens — How source code is broken into keywords, identifiers, operators, and literals
• AST — The tree structure the parser builds from those tokens
• Call Stack — Function calls pushing and popping frames
• Scope Chain — How variables are resolved through lexical scoping
• Console — Output from console.log

Async mode adds the full asynchronous runtime:

• Web APIs — Where setTimeout and fetch register and wait
• Task Queue (Macrotask) — Callbacks ready to execute after timers/network
• Microtask Queue — Promise.then, queueMicrotask, await continuations
• Event Loop — The orchestrator that checks the call stack and drains queues in the correct priority order

Dedicated page for understanding closures and memory lifecycle.

• Heap Memory — Visualizes environment objects on the heap with active/retained/collected status
• Scope Chain — Shows how closures capture variables from enclosing scopes
• Closure References — Tracks which closures keep which environments alive
• GC Visualization — Watch environments get freed when no longer referenced

Visualizes how this is determined at call time with real-time rule detection.

• new — Constructor calls via new keyword
• implicit — Method calls where this = the caller object
• default — Standalone calls where this = undefined (strict mode)
• arrow — Arrow functions that inherit this from the enclosing scope
• lost — Demonstrates broken this when methods are extracted

Each rule is color-coded in the source code and tracked through a flow panel.

Interactive DOM event propagation visualizer.

• DOM Tree — Build and visualize a DOM structure
• Propagation — Watch events flow through capturing → target → bubbling phases

29 pre-built code examples across all simulators. All produce output identical to real JavaScript engines (V8/SpiderMonkey).

Step-by-step execution flow for every snippet: docs/snippet-flow-analysis.md

src/
├── app/[locale]/(main)/        # Next.js routes (engine, closure, this, event)
├── views/                      # Page-level components
├── widgets/                    # Dashboard compositions
├── features/                   # Code editor, debugger, console, language switcher
├── entities/                   # Token, AST, Environment, Call Stack, Closure, etc.
└── shared/
    ├── lib/engine/             # Pure TypeScript engine (no React dependency)
    │   ├── tokenizer/          # Character-by-character scanner
    │   ├── parser/             # Recursive descent + Pratt parsing
    │   └── interpreter/        # Generator-based, yields StepResult per step
    ├── model/                  # Zustand store
    └── config/                 # Snippets, i18n routing

The engine is implemented as a generator-based interpreter — each yield produces a StepResult that the UI consumes to animate the current execution state.

pnpm install
pnpm dev

MIT