JavaScript Promises & Async/Await Simulator
Visualize JavaScript promises, async/await, microtasks, task queues, setTimeout ordering, rejection handling, and Promise.all with an interactive event-loop simulator inspired by classic JavaScript visual guides.
Category: Programming
Topics covered: javascript, promises, async-await, event-loop, microtasks, settimeout, nodejs, programming, frontend, backend, educational, interactive
// simulator
JavaScript Promises & Async/Await Simulator
Visualize JavaScript promises, async/await, microtasks, task queues, setTimeout ordering, rejection handling, and Promise.all with an interactive event-loop simulator inspired by classic JavaScript visual guides.
// event loop lab
Start in global execution
The script begins on the call stack. Nothing async has been scheduled yet.
Runtime state
Read the phase rail first, then inspect the boxes below for what changed.
Normal code runs first.
Timers wait outside JS.
Promise state changes.
Promise callbacks run next.
Timers run after microtasks.
Logs appear in order.
What gets printed first after Start?
About this JavaScript async simulator
What you'll learn
- Why synchronous code runs before promise callbacks and timers
- How fulfilled, rejected, and pending promise states affect handler execution
- Why promise callbacks are microtasks, while timers are tasks
- How async functions run until await and then resume later
- How catch and finally behave after a promise rejection
- How Promise.all waits for several async operations at once
Visual model covered
- Call stack: currently executing synchronous JavaScript
- Runtime APIs: timers, network work, and other browser or runtime-owned async work
- Microtask queue: promise handlers, queueMicrotask callbacks, and async function continuations
- Task queue: timer and event callbacks that run after microtasks drain
Inspired by a classic visual guide
This simulator is an original interactive companion inspired by Lydia Hallie's popular JavaScript visualized article on promises and async/await. It uses its own diagrams and step logic while covering the same core mental models.
Browser-safe by design
The simulator does not execute arbitrary JavaScript. Each scenario is modeled as a deterministic event-loop trace so learners can step backward, make predictions, and see exactly why the output order changes.
Try next
// simulator
Log Aggregation Pipeline Simulator
Follow production logs from applications through collection, parsing, filtering, buffering, sharded indexing, and search. Trigger traffic spikes, parser failures, and slow indexing to see where backpressure builds and logs can be lost.
// simulator
How Docker Works Under the Hood
Watch what really happens when you run docker run -p 8080:80 nginx, one layer at a time. Step down the whole stack: the CLI, the daemon, the registry pull, containerd, the OCI runtime bundle, runc, the running container, and the shared Linux kernel. Every stage shows the real low-level command you can run yourself, so it doubles as a tour of the primitives that make a container: namespaces, cgroups, and runc. A container is not a small VM, and this shows you why.
// simulator
Webhook Delivery Simulator
Send a webhook through a production-style delivery flow. Change endpoint responses, watch retries and backoff, inspect real HMAC-SHA256 signatures, and redeliver the same message to see receiver-side deduplication.