▶
All 15

The series

01 How the Event Loop Runs Beginner

setTimeout(fn, 0)
02 How Timers Really Run Beginner

setTimeout is a minimum, not a promise
03 How Promises Run Intermediate

Promise vs setTimeout
04 How Promise Chains Run Intermediate

Two chains, interleaved
05 How queueMicrotask Runs Intermediate

queueMicrotask vs Promise.then
06 How await Runs Advanced

async / await
07 How Rejections Run Intermediate

throw · catch · finally
08 How Promise.all Runs Intermediate

fail-fast, but nothing gets cancelled
09 How fetch Runs Intermediate

await over the network
10 How It All Runs Together Advanced

The full interview question
11 How Rendering Fits In Advanced

requestAnimationFrame vs microtasks
12 How Node Runs It Advanced

process.nextTick vs Promise
13 How setImmediate Runs Advanced

setImmediate vs setTimeout(0)
14 How the TDZ Works Beginner

hoisting: var vs let
15 How Closures Capture Variables Intermediate

var vs let in a loop

About this site

How It Runs teaches the JavaScript runtime — the event loop, promises, async/await, timers, and Node's scheduling — by making you predict what code prints before showing you, step by step, why.

Why another visualizer?

There are many event-loop visualizers, and several are excellent. Nearly all of them — this one included — rely on authored animations: a person decides that the microtask dequeues at frame 14. That is fine, and probably unavoidable. The question worth asking is what happens next: can the animation's observable result be cross-checked against what an engine actually prints? A confidently wrong animation is worse than no animation, because it gets remembered.

Here, it can. Each animation is an authored execution trace paired with a runnable snippet, and the pairing is verified mechanically: on every build the validator executes the snippet for real and requires its actual console output to match both the trace's final console state and the answer marked correct, plus a set of structural invariants on the trace itself. Any mismatch fails the build — the validator runs as part of npm run build, so a case whose observable output disagrees with the executed snippet cannot ship.

Currently 15 cases and 19 experiments pass this check. The methodology page explains precisely what that does and does not prove — including the places where a browser-only API has to be substituted, and the one case whose output is legitimately nondeterministic.

Who runs it

How It Runs is built and maintained by Asen, an independent front-end developer and technical writer who also publishes as qianduandaren. The cases grew out of years of watching the same runtime misconceptions surface in code reviews and interviews — and out of holding a few of them personally, until something mechanical disagreed.

The site is free, has no accounts, and shows no third-party ads. Cases cite the standards and official runtime documentation where they exist — the HTML Standard, the ECMAScript specification, the Node.js docs — with MDN used as a supporting reference. Every case page lists its sources at the bottom.

Found a mistake?

The most valuable bug report on a site like this is "the animation disagrees with what my runtime actually prints". If you find one, please get in touch — that is either an error worth fixing immediately or a runtime difference worth documenting, and both make the site better.