The Event Loop, Visualized

An illustrated course · free to learn

See exactly how the JavaScript event loop runs your code.

Step through the event loop one animated figure at a time — explained simply, for developers, or straight from the spec. Then paste your own code and watch it run.

Step through it → Paste your own code 
1console.log('start');
2 
3setTimeout(() => {
4  console.log('timeout');
5}, 0);
6 
7Promise.resolve().then(() => {
8  console.log('promise');
9});
10 
11console.log('end');

The script starts executing top to bottom on the call stack. console.log("start") runs synchronously and prints right away.

Call stack

script

Web APIs — browser land

The event loop — is the call stack empty? → drain the microtask queue first → then take one callback.

Microtask queue — priority

Callback queue

Console

01start

Fig. — the classic: Promise vs setTimeout, running on a loop · step 1 of 9

One figure. Three voices.

The animation never changes — the explanation does. Switch anytime with the toggle above, or keys 1 · 2 · 3.

Explain simply

One chef, one kitchen, a VIP line. The whole loop as a story a curious kid can follow.

Developer

Call stack, task queue, microtasks — the practical model behind every "why is this async?" bug.

Under the hood

Task sources, microtask checkpoints, render opportunities — straight from the HTML spec.