Settings

Theme

Show HN: Vivix – See inside JavaScript as it executes (open source)

vivix.dev

4 points by hlude 2 months ago · 7 comments

Reader

edwmurph 2 months ago

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

  • hludeOP 2 months 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.

quanglee 2 months ago

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

  • hludeOP 2 months 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

fancyduck 2 months ago

Does it work with coding agents?

  • hludeOP 2 months 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

hludeOP 2 months 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.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection