Event Loop Visualizer
This interactive model teaches the JavaScript runtime at an educational level: stack-first execution, then microtasks, then tasks. Use the examples to see why Promise.thencallbacks run before setTimeout(..., 0) callbacks.
Simplifications are intentional. We represent time as discrete ticks, model a single task queue, and treat awaitcontinuation as an immediately settled microtask.
Shows stack-first execution with no queued async work.
- Synchronous statements run immediately in order.
- The call stack must clear before the loop checks queues.
Controls
Tick: 0
Executing global() on the sync queue.
Call stack
Top frame is the currently executing function/context.
global()
source: sync • next op 1/3 • active
Microtask queue
Promise callbacks and async continuations.
- No microtasks queued.
Task queue
Macrotasks like timeout callbacks.
- No tasks queued.
Timers
Waiting for their due tick before entering task queue.
- No pending timers.
Execution timeline
Ordered log of what happened and why.
t0 • Script start
Started example: Simple synchronous flow