An interactive, browser-based visualization of the JavaScript Event Loop. Write any JavaScript snippet and watch it execute step by step - the Call Stack, Web APIs, Microtask Queue, and Macrotask Queue all update in real time with animated state transitions.
Most developers learn about the JavaScript Event Loop through diagrams or text descriptions. This project makes it tangible - you write real JavaScript, and the visualizer shows exactly what the V8 runtime does with it: which function frames enter and exit the Call Stack, which async operations are delegated to Web APIs, and how Microtasks always flush before the next Macrotask runs.
The engine uses a real AST parser (Acorn) rather than eval(), giving it structured control over execution timing so each step is clearly visible in the UI.
- Real-time Call Stack visualization with LIFO push/pop animations
- Web APIs panel showing in-flight async operations with live countdown
- Microtask Queue (Promises) and Macrotask Queue (setTimeout) displayed side by side
- Console output panel showing execution order as it happens
- AST-based interpreter - parses user code into a syntax tree before executing
- Priority enforcement - Microtasks always drain before Macrotasks
- Glassmorphism UI with neon glow accents on a dark background
- GSAP entrance animations and spring-physics list transitions
- Lenis smooth scroll
- Fully responsive layout - works on mobile and desktop
- Client-side only, no server required
| Technology | Role |
|---|---|
| Nuxt 4 | Application framework (CSR mode, compatibilityVersion: 4) |
| Vue 3 | UI with Composition API and script setup |
| Pinia | Reactive VM state (call stack, queues, logs) |
| Acorn.js | JavaScript AST parser |
| GSAP | Entrance timeline and item animations |
| Lenis | Smooth scroll |
| Tailwind CSS | Utility layout classes |
| @lucide/vue | Icon set |
| JetBrains Mono | Monospace font via Google Fonts |
- Node.js 20 or higher
- npm 9 or higher
Clone the repository:
git clone https://github.com/sha-wrks/Event-Loop-Visualizer.git
cd Event-Loop-VisualizerInstall dependencies:
npm installStart the development server:
npm run devOpen http://localhost:3000 in your browser.
npm run build
npm run previewnpm run generateThe output will be in the .output/public directory, ready to deploy to any static host (Vercel, Netlify, GitHub Pages, Cloudflare Pages).
Event-Loop-Visualizer/
- app/
- app.vue # Root layout - header, code input, visualizer grid
- components/
- AppLogo.vue # SVG brand logo with theme gradient
- visualizer/
- Stack.vue # Call Stack panel
- Queues.vue # Microtask and Macrotask queue panels
- logic/
- engine.ts # AST interpreter and event loop simulation
- stores/
- useVM.ts # Pinia store - virtual machine state
- public/
- logo.svg # SVG favicon
- robots.txt
- nuxt.config.ts # Nuxt configuration, head meta, Google Fonts
- tailwind.config.js # Tailwind theme extensions
When you click Execute, the engine passes your code to acorn.parse(), which returns an AST - a structured JSON tree of every expression, statement, and declaration in your script.
The interpreter walks the AST body and identifies three patterns:
console.log(...)- pushed and popped on the Call Stack synchronously with an 800ms visual delay per stepsetTimeout(fn, ms)- registered in the Web APIs panel, then moved to the Macrotask Queue after the specified delayPromise.resolve().then(fn)- added directly to the Microtask Queue
A background loop polls every 100ms. Whenever the Call Stack is empty, it checks the queues in priority order:
- Microtask Queue - drained completely before checking macrotasks
- Macrotask Queue - one task per loop tick
This faithfully reproduces the actual V8 scheduling rules.
All state mutations happen through the Pinia useVMStore. Vue's reactivity system binds the store directly to the animated components, so every push, pop, enqueue, and dequeue triggers the corresponding CSS transition automatically.
Contributions are welcome. Please open an issue first to discuss what you would like to change.
- Fork the repository
- Create a feature branch (
git checkout -b feature/your-feature) - Commit your changes with a descriptive message
- Push to your branch and open a Pull Request
See CONTRIBUTING.md for full guidelines.
Distributed under the MIT License. See LICENSE for details.