Skip to content
This repository was archived by the owner on Jul 4, 2026. It is now read-only.

v1.0.0 - JS Runtime Visualizer

Choose a tag to compare

View all tags
@evreniel evreniel released this 23 May 14:09
· 3 commits to main since this release
v1.0.0
d55e158

What is this?

An interactive browser-based visualization of the JavaScript Event Loop. Write any JavaScript snippet and watch the Call Stack, Web APIs, Microtask Queue, and Macrotask Queue update in real time with animated state transitions.

What is in this release

Core engine

  • AST-based interpreter using Acorn.js - parses user code into a syntax tree before executing, no eval()
  • Faithful event loop implementation: Microtasks drain completely before any Macrotask runs
  • Pinia store tracking all VM state reactively (call stack, web APIs, queues, console logs)

UI overhaul

  • Glassmorphism design system on a dark (#04040c) base with animated radial blob background
  • GSAP entrance timeline - header, code panel, and visualizer cards animate in on load
  • Lenis smooth scroll
  • Stack.vue: spring-physics push animation using GSAP back.out easing
  • Queues.vue: color-coded Microtask (purple) and Macrotask (amber) tracks with spring transitions
  • SVG logo and favicon with emerald-to-cyan-to-purple gradient matching the app theme

Responsive layout

  • Full mobile support: single-column layout below 768px
  • Visualizer panels no longer cut off on small screens
  • Header, textarea, and queue grid all adapt to narrow viewports

Developer experience

  • Replaced deprecated lucide-vue-next with @lucide/vue
  • Added tailwind.config.js with JetBrains Mono font and custom keyframes
  • nuxt.config.ts: SVG favicon, Google Fonts, theme-color meta
  • Rewrote README.md to full industry-standard documentation

Getting started

git clone https://github.com/sha-wrks/Event-Loop-Visualizer.git
cd Event-Loop-Visualizer
npm install
npm run dev

Open http://localhost:3000

Assets 2
Loading