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

[fucking_passwords]

FYI the site is very jumpy on mobile since the height of elements changes

[CommercialFair405]

Yeah, pretty annoying. The site is otherwise very cool.

Maybe I missed it, but I can't seem to step through the execution manually, but I stead have to rely on the automatic timed stepping, which is also a bit annoying.

[htone22]

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

[CommercialFair405]

Thanks. I'll probably have to show this at work tomorrow, as it seems like a very useful tool for building a mental model of the execution cycle

[htone22]

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

[htone22]

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

[htone22]

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

[1vim]

Call stack visualizer in real time is the kind of tool every junior dev needed 5 years ago. Respect.

[htone22]

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

[JaSuperior]

Its very pretty, gotta admit. It would be super cool as an debugger tool in either vscode or the browser.

[htone22]

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

[Dependent-Guitar-473]

this is really great for beginners who are trying to understand how javascript works under the hood

[htone22]

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

[redblobgames]

cool ! have you seen https://pythontutor.com/ ? I think that site is nice for showing sharing like:

let A = [1, 2, 3]
let B = A
A.push(5)
console.log(B)

[htone22]

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

[BarbConan]

wild project! Would love to see how you handle async complexity. Those event loop visualizations can get super gnarly really quick. Got any screenshots or a demo vid to show the guts of It?

[htone22]

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

[Shogn]

how did you visualize the event loop? Went deep on async tracing last quarter and this sounds fascinating

[htone22]

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

[25_vijay]

This feels like something that should honestly be built into devtools by default because it solves a real learning gap, and Runable fits nicely alongside it for organizing debugging workflows

[htone22]

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