Show HN: Vivix – See inside JavaScript as it executes (open source) (opens in new tab)

(vivix.dev)

4 pointshlude24d ago7 comments

7 comments

7 comments · 4 top-level

edwmurph24d ago· 1 in thread

nice! this might replace the explainer i usually handout for this concept https://www.youtube.com/watch?v=8aGhZQkoFbQ but Vivix seems

hludeOP24d ago

Philip Roberts' JSConf talk is one of the best technical explainers I've ever heard, it was a direct inspiration for the async module specifically. The main gap Vivix fills is async/await, that talk predates modern async patterns by about a decade. Curious whether the guided modules or freeform editor would be more useful.

quanglee24d ago· 1 in thread

woah so cool! do you plan to add support for other languages like python or go? this can be very helpful in learning new languages or algorithms

hludeOP24d ago

Thanks! Not yet, the hard part isn't reading the code, it's simulating how it runs. That logic is built specifically around JavaScript such as closures, async/await, the event loop, so another language means a new interpreter, not just a new parser. Python would be the most natural next step though

fancyduck24d ago· 1 in thread

Does it work with coding agents?

hludeOP24d ago

Not currently, Vivix is focused on helping developers and learners understand JavaScript execution at the instruction level: call stack, heap, async/await and more. Visualizing coding-agent output would be interesting though

hludeOP24d ago

I built this because I needed to see what the JavaScript engine was physically doing how the call stack fills, how the heap mutates, what actually happens when await suspends a function. Existing tools showed me the logical flow but not the physical state.

How it works technically:

- Acorn parses code into an AST client-side

- A custom interpreter runs in a Web Worker off the main thread, with a sync fallback for environments without Worker support

- The worker produces a flat immutable array of step snapshots

- Svelte 5 $state.raw: scrubbing the timeline is a constant-time array index swap

- GSAP animates only what changed between snapshots

Result: 60fps stepping through call stack, heap mutations and async/await simultaneously. 12 modules plus free-form mode. MIT licensed. Code runs entirely client-side your source never leaves the browser.

GitHub: https://github.com/HenryOnilude/vivix (MIT, 490 tests)

Known limitations: 500-step cap to prevent infinite loops, flat scope model for let/const inside blocks.

j / k navigate · click thread line to collapse

7 comments

7 comments · 4 top-level

edwmurph24d ago· 1 in thread

nice! this might replace the explainer i usually handout for this concept https://www.youtube.com/watch?v=8aGhZQkoFbQ but Vivix seems

hludeOP24d ago

quanglee24d ago· 1 in thread

woah so cool! do you plan to add support for other languages like python or go? this can be very helpful in learning new languages or algorithms

hludeOP24d ago

fancyduck24d ago· 1 in thread

Does it work with coding agents?

hludeOP24d ago

How it works technically:

- Acorn parses code into an AST client-side

- A custom interpreter runs in a Web Worker off the main thread, with a sync fallback for environments without Worker support

- The worker produces a flat immutable array of step snapshots

- Svelte 5 $state.raw: scrubbing the timeline is a constant-time array index swap

- GSAP animates only what changed between snapshots

GitHub: https://github.com/HenryOnilude/vivix (MIT, 490 tests)

Known limitations: 500-step cap to prevent infinite loops, flat scope model for let/const inside blocks.

j / k navigate · click thread line to collapse