JavaScript Event Loop Visualizer 🔄

An interactive tool for visualizing and learning JavaScript Event Loop principles. Modern React web application with beautiful UI that helps developers understand JavaScript asynchronicity, execution order, and interaction between Call Stack, Web APIs, Microtask and Task (Callback) queues.

🇺🇦 Українська версія

✨ Features

🎨 UI/UX

• Modern design with shadcn/ui components and responsive sidebar
• Dark and light theme with automatic switching
• Fully responsive design for mobile, tablets and desktops
• Smart sidebar:
  • Automatically collapses on narrow screens (icons only)
  • Expands on wide screens with full text
  • Toggle with B key
• Smooth animations and state transitions
• Intuitive interface with tooltips and hints
• Clean UI - empty sections auto-hide

📚 Functionality

• Visualization of Call Stack, Web APIs, Microtask Queue, Task Queue, Stack and Heap memory
• Step-by-step execution with detailed explanations for each action
• 5 built-in examples:
  • 🗄️ Memory and Variables - Stack and Heap demonstration (primitives, objects, functions)
  • ⏱️ setTimeout - basic async code handling
  • ⚡ Promise vs setTimeout - difference between microtask and macrotask
  • 🔄 Complex Example - nested Promises and setTimeout
  • 🌐 Fetch API - network requests and handling
• Two execution modes: automatic and manual
• Action history to track all execution steps
• Code display with active line highlighting
• Interactive sidebar with:
  • Quick example launch
  • Clear buttons (full and selective)
  • Event Loop reference guide
• Keyboard shortcuts: Space, 0-4, A, B, C, Esc for quick navigation

🌍 Localization

• English (default, auto-detected from browser)
• Ukrainian (повна підтримка української мови)
• Language switcher in the header for instant language switching
• Language preference persists across page reloads (localStorage)
• All interface elements, examples, and explanations are fully translated

🚀 Quick Start

Prerequisites

• Node.js 18.0.0+ (recommended 20+)
• pnpm (recommended) or npm

Installation

# Clone the repository
git clone https://github.com/vitalii4reva/visual-js-event-loop.git
cd visual-js-event-loop

# Install dependencies
pnpm install

# Start dev server
pnpm dev

Open http://localhost:3000 in your browser.

Production Build

# Create production build
pnpm build

# Preview production version locally
pnpm preview

Build output will be in the dist/ directory

🏗️ Technologies

• ⚛️ React 19 - UI framework
• 📘 TypeScript 5.9 - Type safety
• 🎨 Tailwind CSS 3.4 - Styling
• 🧩 shadcn/ui - UI components
• ⚡ Vite 6 - Build tool
• 🎭 Lucide React - Icons
• 🌓 next-themes - Theme management

📂 Project Structure

src/
├── components/          # React components
│   ├── ui/             # shadcn/ui components (sidebar, button, card...)
│   ├── layout/         # Header, ExamplesSidebar, KeyboardShortcuts
│   ├── event-loop/     # Event Loop Visualization
│   │   ├── CallStack.tsx
│   │   ├── WebAPIs.tsx
│   │   ├── MicrotaskQueue.tsx
│   │   ├── TaskQueue.tsx
│   │   ├── Memory.tsx         # Heap memory
│   │   └── StackVariables.tsx # Stack frames
│   ├── controls/       # StepControls
│   └── panels/         # HistoryPanel
├── hooks/              # Custom React hooks
│   ├── useEventLoop.ts
│   ├── useStepExecution.ts
│   ├── useKeyboardShortcuts.ts
│   └── use-mobile.tsx
├── context/            # React Context (ThemeProvider, LanguageProvider)
├── lib/                # Utilities and examples
│   ├── examples.ts     # 5 built-in examples
│   └── utils.ts
├── types/              # TypeScript types
│   ├── eventLoop.ts
│   └── memory.ts
├── i18n/               # Translations (en, uk)
├── App.tsx             # Main component
└── main.tsx            # Entry point

🔧 How It Works

The visualizer demonstrates JavaScript Event Loop operation and memory management:

1. Call Stack: Shows functions currently executing.
2. Web APIs: Displays asynchronous operations running in background.
3. Microtask Queue: High-priority task queue (Promise).
4. Task Queue: Regular task queue (setTimeout, setInterval).
5. Stack Variables: Shows local variables in Stack Frames.
6. Memory (Heap): Shows objects, functions, and other complex data types.
7. Event Loop: Constantly checks stack and queue state, following priorities.

Event Loop Execution Order:

1. Execute all synchronous code in Call Stack
2. Check if Call Stack is empty
3. Process ALL microtasks from Microtask Queue
4. Take ONE task from Task Queue
5. Repeat from step 1

🎯 How to Use

1. Select an example in the left sidebar (or keys 0-4):
   • 0 - Memory and Variables (Stack & Heap)
   • 1 - setTimeout demonstration
   • 2 - Promise vs setTimeout
   • 3 - Complex example
   • 4 - Fetch API
2. Execution mode:
   • Manual mode: Click "Next step" or Space/Enter
   • Auto mode: Automatic execution with 1.5 sec delay (key A)
3. Observe:
   • Call Stack - active functions
   • Web APIs - asynchronous operations
   • Microtask Queue - high-priority tasks (Promise)
   • Task Queue - regular tasks (setTimeout)
   • Memory (Heap) - objects and functions (appear in example 0)
4. Track action history in the right panel
5. Control sidebar - key B or button in header
6. Keyboard shortcuts - Click keyboard icon in header for full list

👥 Contributing

We encourage contributions to the project!

Ways to Help

• 🐛 Report a bug via Issues
• ✨ Suggest a new feature
• 📝 Improve documentation
• 🌍 Add translation to another language
• 💻 Submit a Pull Request

Process

1. Fork the repository
2. Create a branch: git checkout -b feature/amazing-feature
3. Make changes and commit: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

💡 Improvement ideas

• Add Examples 3 and 4 (complex example, Fetch API) ✅
• Keyboard shortcuts (Space, numbers, A, C) ✅
• Responsive sidebar with shadcn/ui ✅
• Stack and Heap memory visualization ✅
• Memory example ✅
• Multi-language support (EN, UK) ✅
• Interactive mode for creating custom examples
• Export execution history
• Additional languages (PL, etc.)
• Animations with Framer Motion
• Touch gestures for mobile

📈 SEO and Performance

Project is optimized for search engines:

• ✅ Structured Data (JSON-LD) with author information
• ✅ Open Graph tags for social networks
• ✅ Meta tags for search engines
• ✅ Responsive Design
• ✅ Performance optimization
• ✅ Accessibility (ARIA labels)
• ✅ Humans.txt and Robots.txt
• ✅ Sitemap.xml

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Vitalii Petrenko

• 🌐 vitalii4reva.com
• 📧 vitalii4reva@gmail.com
• 💼 LinkedIn

🙏 Acknowledgments

• React for an amazing UI framework
• shadcn/ui for beautiful components
• Vite for a fast build tool
• Lucide for quality icons

---

If this project was helpful, give it a ⭐ on GitHub!

Made with ❤️ in Ukraine 🇺🇦

⬆ Back to top