Learning & Engineering Visualizers
Watch how the JavaScript event loop moves work between the call stack, microtask queue, and macrotask queue, and how React Fiber reconciles a component tree, in animated step-by-step walkthroughs of example code.
Learning & Visualizers tools
Pick a tool to open it
- Core RuntimeOpen tool
JavaScript Event Loop Visualizer
Watch example scripts move through the call stack, Web APIs, the microtask queue (Promises), and the macrotask queue (setTimeout), one step at a time.
- React 18/19 ConceptsOpen tool
React Fiber Tree & Reconciliation Visualizer
Step through how React reconciles a component tree: the current and work-in-progress (WIP) Fiber trees, update priority lanes, effect flags, and the render and commit phases.
What's included
Why Use TechyCoderWorld Engineering Visualizers?
Learn async JavaScript and React internals by watching them happen.
Interactive Stepping
Animated steps; step back and forward in React Fiber
Dual-Tree Inspection
Current and work-in-progress Fiber trees side by side
Queue Tracking
Call stack, microtasks, and macrotasks at every step
Built-in Explanations
Click a Fiber node for an explanation, plus quizzes
4 steps
How Learning & Visualizers works
- 01
Choose a Visualizer
Open the JS Event Loop or the React Fiber Tree visualizer.
- 02
Pick an Example
Load one of the example scripts, such as a simple counter or a promise-and-timer chain.
- 03
Play the Walkthrough
Press Play to watch the queues and trees update step by step. In React Fiber you can also step back and forward.
- 04
Inspect Nodes
Click a Fiber node to see its priority lane and effect flags explained.
What is the JavaScript Event Loop Visualizer?
The JS Event Loop Visualizer animates how JavaScript runs asynchronous code. Using example scripts, it shows synchronous code running on the call stack, timers passing through Web APIs into the macrotask queue, and resolved Promises entering the microtask queue.
What is the React Fiber Tree Visualizer?
The React Fiber Visualizer walks through how React 18 and 19 reconcile components using double buffering. You can compare the current on-screen Fiber tree with the work-in-progress (WIP) tree as React visits each node in the render phase and applies the updates to the DOM in the commit phase.
Do the visualizers run entirely in my browser?
Yes. Each walkthrough is a scripted sequence of steps for its example code, and it plays in your browser. The visualizers don't run your own code, and nothing is uploaded.
