Event Loop Visualizer
Visualize JS call stack, microtasks queue, macrotasks queue, and Web APIs in real time.
JS Architecture
Understanding JavaScript Asynchronous Execution & Event Loop Queues
JavaScript is single-threaded. The event loop coordinates the Call Stack, Microtask Queue (Promises), and Macrotask Queue (setTimeout/events) to enable non-blocking asynchronous execution.
- 01
Write or Select JS Code
Write custom async JavaScript code or pick preset scenarios (Promises, setTimeouts, async/await).
- 02
Step-by-Step Execution
Click Step or Play to watch stack frames get pushed/popped and queues drained in real-time animations.
Frequently Asked Questions
Answers about this tool.
What is the difference between Microtasks and Macrotasks?
Microtasks (Promise callbacks, queueMicrotask) run immediately after the current Call Stack empties before the browser paints. Macrotasks (setTimeout, setInterval, I/O) run on subsequent event loop ticks.
Related tools
React Fiber Tree & Reconciliation Visualizer
Step through how React reconciles a component tree: the current and work-in-progress (WIP) Fiber trees, update priority lanes, effect flags, and the render and commit phases.
Open toolAll Learning & Visualizers tools
Watch how the JavaScript event loop moves work between the call stack, microtask queue, and macrotask queue, and how React Fiber reconciles a component tree, in animated step-by-step walkthroughs of example code.
Open tool
