Loading...
Free and interactive. 45 topics
Step-by-step animations of the mechanisms behind the code: the event loop, closures, reconciliation, HTTP requests, database indexes, attention heads, and more. Then read the theory and interview questions on the same page.
Press ⌘K anywhere to search topics
Every step shows the call stack, the tree, the queue, or the tensor as the engine sees it.
Play, pause, scrub to any step, or use the arrow keys. Some topics let you edit the code.
Mechanism, common mistakes, and interview questions live on the same page as the animation.
One topic from each area, picked to show what the site does.
See how the JavaScript event loop works with an interactive visualization. Watch the call stack, microtask queue, and callback queue process setTimeout, Promises, and async/await step by step.
Open visualizationSee how JavaScript closures work with an interactive visualization. Watch inner functions capture outer scope variables, understand lexical scoping, and learn closure patterns for interviews.
Open visualizationSee how React reconciliation works with an interactive visualization. Watch the virtual DOM diffing algorithm compare element trees: same-type updates, cross-type remounts, and key-based list matching.
Open visualizationSee how self-attention works with an interactive visualization. Watch queries score keys, softmax turn scores into weights, the causal mask hide future tokens, and weighted values mix into a new representation.
Open visualizationSee what happens when a browser makes an HTTP request with an interactive visualization. Follow DNS resolution, the TCP and TLS handshakes, the request hitting a server route, middleware, the database, and the response coming back.
Open visualizationSee how Vue reactivity works with an interactive visualization. Watch a Proxy intercept property reads to track dependencies, writes trigger the effects that depend on them, and computed values cache until a dependency changes.
Open visualization
Runtime internals you get asked about in interviews and hit in real bugs.
See how the JavaScript event loop works with an interactive visualization. Watch the call stack, microtask queue, and callback queue process setTimeout, Promises, and async/await step by step.
Open visualizationSee how JavaScript hoisting works for var, let, const, and function declarations. Interactive visualization of the creation phase vs execution phase and the temporal dead zone.
Open visualizationSee how JavaScript execution contexts work with an interactive visualization. Step through the global and function context stack, creation phase, scope chain, and variable environments.
Open visualizationSee how JavaScript closures work with an interactive visualization. Watch inner functions capture outer scope variables, understand lexical scoping, and learn closure patterns for interviews.
Open visualizationSee how JavaScript Promises work with an interactive visualization. Step through pending, fulfilled, and rejected states, promise chaining, microtask scheduling, and async/await flow.
Open visualizationSee how the JavaScript this keyword works with an interactive visualization. Step through implicit, explicit, new, and arrow function binding rules with call, apply, and bind examples.
Open visualizationSee how the JavaScript scope chain works with an interactive visualization. Trace variable lookups across global, function, and block scopes from inner to outer step by step.
Open visualizationSee how JavaScript type coercion works with an interactive visualization. Compare == vs === behavior, explore truthy/falsy values, and see edge cases with NaN, null, and undefined.
Open visualizationSee how JavaScript destructuring works with an interactive visualization. Unpack arrays by position, extract object properties by name, use default values, nested patterns, and parameter destructuring.
Open visualizationSee how JavaScript spread and rest syntax works with an interactive visualization. Watch spread expand arrays/objects, rest collect arguments, and rest in destructuring patterns.
Open visualizationSee how JavaScript prototypal inheritance works with an interactive visualization. Trace prototype chain lookups, __proto__ delegation, Object.create, and the instanceof operator step by step.
Open visualizationSee how pass by value vs pass by reference works in JavaScript with an interactive visualization. Watch primitives copy, objects share references, and compare shallow copy, deep copy, and structuredClone.
Open visualizationSee how the JavaScript memory model works with an interactive visualization. Watch primitives live on the stack, objects get allocated on the heap, and call frames get created and destroyed.
Open visualizationSee how JavaScript garbage collection works with an interactive visualization. Watch the mark-and-sweep algorithm, explore memory leak patterns with closures, timers, and DOM nodes, plus WeakRef.
Open visualizationSee how JavaScript generators work with an interactive visualization. Watch generator functions pause with yield and resume with .next(), step through the iterator protocol and two-way data flow.
Open visualizationSee how DOM events propagate through the tree with an interactive visualization. Watch capture and bubble phases, stopPropagation, and the delegation pattern where one parent handler replaces many child handlers.
Open visualizationSee how JavaScript ES modules work with an interactive visualization. Watch the module graph build, import bindings resolve, live references update, and circular dependencies get handled step by step.
Open visualizationSee how async/await works with an interactive visualization. Watch an async function pause at await, hand control back to the caller, resume from the microtask queue, and compare sequential awaits with Promise.all.
Open visualizationSee how debounce and throttle control event handlers with an interactive visualization. Watch a burst of input events on a timeline, see debounce wait for silence, throttle fire at a fixed rate, and the timers that make it work.
Open visualization
How React decides what to render, when to re-render, and what it commits to the DOM.
See how React's virtual DOM works with an interactive visualization. Watch JSX compile to React.createElement calls, build a virtual DOM object tree, and diff to find real DOM updates.
Open visualizationSee how React reconciliation works with an interactive visualization. Watch the virtual DOM diffing algorithm compare element trees: same-type updates, cross-type remounts, and key-based list matching.
Open visualizationSee how React Context works with an interactive visualization. Watch provider value storage, consumer subscription, value propagation through the component tree, and why all consumers re-render.
Open visualizationSee how React's fiber tree works with an interactive visualization. Watch beginWork go down and completeWork go up as the work loop processes each fiber as a unit of work.
Open visualizationSee how React hooks work with an interactive visualization. Watch hooks stored as a linked list on each fiber, understand why call order matters, and what breaks with conditional hooks.
Open visualizationSee how React's render cycle works with an interactive visualization. Step through the render phase (pure, interruptible diffing) and the commit phase (synchronous DOM mutations, effects, paint).
Open visualizationSee how React.memo, useMemo, and useCallback prevent unnecessary work with an interactive visualization. Step through dependency checks, cache hits and misses, and which components skip re-renders.
Open visualizationSee how React Suspense handles async boundaries with an interactive visualization. Step through fallback rendering, promise throwing, and content revealing to understand loading states.
Open visualizationSee how React Server Components split rendering between server and client with an interactive visualization. Step through the server render pass, payload serialization, and client hydration.
Open visualizationSee how React error boundaries work with an interactive visualization. Watch errors propagate up the component tree, getDerivedStateFromError trigger, fallback UI render, and recovery patterns step by step.
Open visualizationSee how React useEffect works with an interactive visualization. Step through the render-commit-paint-effect timeline, dependency array comparisons, cleanup function timing, and common patterns.
Open visualizationSee how React batches state updates with an interactive visualization. Watch multiple setState calls queue up, updater functions run in order against the pending value, and one render commit for all of them, including inside timeouts and promises.
Open visualizationSee how React concurrent rendering works with an interactive visualization. Watch a transition render at low priority, an urgent input interrupt it, React discard the stale work and restart, and the final commit land without blocking typing.
Open visualization
How Vue, Svelte, and Angular track changes and update the DOM, compared side by side.
See how Vue reactivity works with an interactive visualization. Watch a Proxy intercept property reads to track dependencies, writes trigger the effects that depend on them, and computed values cache until a dependency changes.
Open visualizationSee how Svelte 5 runes work with an interactive visualization. Watch $state create a signal, $derived build a dependency graph, $effect subscribe, and the compiler turn a component into surgical DOM updates with no virtual DOM.
Open visualizationSee how Angular change detection works with an interactive visualization. Compare zone.js triggering a full tree check, OnPush skipping unchanged subtrees, and signals marking only the exact components that read a changed value.
Open visualization
What happens between a request leaving the browser and a response coming back.
See what happens when a browser makes an HTTP request with an interactive visualization. Follow DNS resolution, the TCP and TLS handshakes, the request hitting a server route, middleware, the database, and the response coming back.
Open visualizationSee how database indexes speed up queries with an interactive visualization. Compare a full table scan against a B-tree lookup, watch the tree descend to a leaf, and see why writes get slower as indexes pile up.
Open visualizationSee how caching works with an interactive visualization. Watch cache-aside hits and misses, write-through updates, TTL expiry, LRU eviction, and the stale data problem that makes invalidation hard.
Open visualizationSee how JWT authentication works with an interactive visualization. Watch login produce a signed token, the header, payload, and signature get encoded, a protected route verify the signature, and an expired or tampered token get rejected.
Open visualizationSee how rate limiting protects an API with an interactive visualization. Watch a token bucket refill and drain, a fixed window reset at the boundary, a sliding window smooth out bursts, and requests get accepted or rejected with 429.
Open visualization
What a language model actually does with your text, from tokens to the next word.
See how a language model turns text into tokens with an interactive visualization. Watch byte pair encoding merge characters into subwords, map tokens to ids, and see why token counts differ from word counts.
Open visualizationSee how embeddings turn tokens into vectors with an interactive visualization. Watch a lookup table map token ids to numbers, compare vectors with cosine similarity, and see how meaning becomes geometry.
Open visualizationSee how self-attention works with an interactive visualization. Watch queries score keys, softmax turn scores into weights, the causal mask hide future tokens, and weighted values mix into a new representation.
Open visualizationSee how a language model picks the next token with an interactive visualization. Watch logits become probabilities, compare greedy, temperature, top-k, and top-p sampling, and follow the autoregressive loop token by token.
Open visualizationSee how neural networks learn with an interactive visualization. Step through a forward pass, the loss, gradients flowing backward through the chain rule, and a gradient descent weight update on a tiny network.
Open visualization