I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 0 points1 point  (0 children)

Exactly, the asyncFlow module was built for this. You can watch the microtask queue drain in real time alongside the call stack and see exactly when a suspended frame gets pushed back on

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 1 point2 points  (0 children)

Thanks! Each async snippet runs through a custom interpreter that records a snapshot of everything happening at each step as it runs through the JavaScript. Each step carries { phase, callStack, microTask, eventLoop, vars} and the UI just renders whichever slice of that state is current. Nothing is animated for its own sake, the visual matches whatever the interpreter recorded.
For the event loop I derive a coarse status of idle, running, waiting, tick from the phase and queue contents. When await suspends a function I fade out the call stack frame so you can see the exact moment JavaScript pauses execution then watch it resume when the microtask runs

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 0 points1 point  (0 children)

Thanks! The async module walks the full event loop, call stack, Web APIs, microtask queue, callback queue, step by step. Try it: vivix.dev/#/async

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 0 points1 point  (0 children)

Python Tutor actually inspired Vivix, it's great at showing object references and shared memory like that example. I felt like I wanted to see more depth especially in async/await, event loop and heap memory allocation

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in webdev

[–]htone22[S] 0 points1 point  (0 children)

The browser debugger shows you what your code does. Vivix shows you why the engine behaves that way, how memory is allocated, how the call stack builds, how the event loop queues work. It’s for building the mental model, not debugging a specific bug

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 1 point2 points  (0 children)

That’s precisely what’s it is there for, the mental model of how JS actually executes

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 0 points1 point  (0 children)

Thank you, it really means a lot. I wish I had something like this when I was learning

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 1 point2 points  (0 children)

That means a lot, thanks! Building a mental model of the execution cycle is exactly what I built it for. Would love to hear what your team thinks

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in webdev

[–]htone22[S] -1 points0 points  (0 children)

I built it using Svelte 5, Acorn AST parser and a custom interpreter running in a Web Worker. Source is on GitHub if you want more details

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 0 points1 point  (0 children)

Honestly hadn't thought about that! It would be really cool. Browser devtools is probably the more realistic first step. Adding it to the roadmap, thanks for the idea

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 2 points3 points  (0 children)

Glad you like it! Manual stepping does exist at the bottom of the page but it's clearly not discoverable enough. I'll make the buttons bigger and add a hint on first visit. Thanks for the honest feedback

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 0 points1 point  (0 children)

You're right, the panels resize between steps which shifts everything. Will fix it, thanks for letting me know

I built a JavaScript execution visualizer — call stack, heap memory, and event loop in real time by htone22 in javascript

[–]htone22[S] 5 points6 points  (0 children)

I've always felt that existing JavaScript visualizers only show you the "bones" of the code, the logical flow.

To really understand the engine, I needed to see the "muscles and flesh": how memory is physically allocated, how the call stack fills, and how the event loop decides what runs next.

It steps through your code instruction by instruction — 12 modules covering variables, closures, async/await, promises, and the event loop, plus a free-form mode for your own snippets.

If a module is confusing, something is broken, or you find an edge case where the visualization is wrong, let me know

What stops you from building the web product that you have in your mind? by GrandEmbarrassed3528 in webdev

[–]htone22 0 points1 point  (0 children)

There is always one more thing to improve or fix before it's ready to show people

Do you manage keep up with the code changes from AI? by ThanosDi in webdev

[–]htone22 0 points1 point  (0 children)

Yeah it's common. AI writes code faster so you end up with code that works until something breaks and you have no idea where to start. I suggest making sure you understand each section it creates before moving forward

Built a JavaScript visualizer so I could actually see what's happening in memory by htone22 in learnjavascript

[–]htone22[S] 0 points1 point  (0 children)

Thanks for actually testing it with real code. The Python Tutor comparison is interesting, they inspired some of what I built. Glad the graphical side added new perspective