A free open-source tool that shows how the JavaScript engine physically processes code. Trace the call stack, heap memory, and event loop in real-time. No account. No install.
great, thanks! Confirmed slop, the guy accidentally commited the markdown file he generated for his “social media launch strategy” 💀
spoiler
Launch Copy — Ready to Post
Use these templates when sharing Vivix. Replace https://vivix.dev/ with your deployed URL once you have one.
Reddit — r/learnjavascript
Title: I built a tool that lets you see inside JavaScript as it runs — CPU, memory, call stack, all visualized step by step
Body:
Hey everyone! I built Vivix — an interactive JavaScript execution visualizer.
You write real JS, click play, and step through every instruction one at a time. As you step, you see:
Heap memory — variables appear with their types, values, and byte sizes
CPU dashboard — program counter, operation phase, write counter
Call stack — frames push and pop as functions are called
Memory map — see exactly how many bytes each variable takes
Explanation strip — plain English description of what’s happening at each step
There are 9 modules covering variables, conditionals, loops, functions, arrays, objects, data structures, async/await, and closures. Each has its own purpose-built visualization.
Tech: Svelte 5, Acorn parser, custom AST interpreter (no eval), CodeMirror 6, 332 unit tests.
It’s completely free, no sign-up, runs in your browser.
Would love to hear what you think — especially which concepts you’d want visualized next!
Reddit — r/webdev
Title: I built an interactive JavaScript visualizer that shows CPU state, memory allocation, and call stacks in real time [open source]
Body:
I’ve been working on Vivix — a tool that visualizes JavaScript execution at a low level.
Instead of just showing “this variable equals 5”, it shows:
The heap memory slot being allocated
The byte size (8 bytes for a number, 5 bytes for “Alex”)
The CPU operation (DECLARE, COMPARE, CALL)
Call stack frames pushing/popping
A memory map showing total allocation
It’s built with Svelte 5 (runes), Acorn for parsing, and a custom AST interpreter — no eval(), so every intermediate state is captured. The interpreter runs in a Web Worker with a 500-step limit.
Title: Show HN: Vivix – Step through JavaScript and watch the CPU, memory, and call stack respond
Body:
I built an interactive JavaScript execution visualizer. You write code, click play, and step through each instruction — watching variables appear in heap memory, call stack frames push/pop, byte sizes update, and the CPU dashboard tick through operations.
It’s powered by a custom AST interpreter (Acorn → ESTree → step array) running in a Web Worker. No eval — we walk the AST directly to capture every intermediate state. 500-step limit prevents infinite loops.
9 modules covering core JS concepts (variables through closures), each with a purpose-built visualization. Svelte 5, CodeMirror 6, 332 tests.
Title: I built a JavaScript visualizer that shows you what the engine actually does
Tags: javascript, webdev, opensource, learning
Body:
The problem
When I was learning JavaScript, I kept reading things like “variables are stored in memory” and “functions push frames onto the call stack.” But I never saw it happen.
The solution
I built Vivix — an interactive tool where you write real JavaScript, click play, and step through execution one instruction at a time.
At each step, you see:
🧠 Heap memory — variables with types, values, and byte sizes
📊 CPU dashboard — program counter, operation, write counter
The key insight: instead of using eval(), I wrote a custom AST walker that produces an array of execution steps. Each step captures the line, variables, memory ops, call stack, phase, and output. Then the UI just renders whichever step you’re on.
The interpreter runs in a Web Worker with a 500-step limit to prevent infinite loops.
Tech stack
Svelte 5 with runes ($state, $derived)
Acorn for parsing
CodeMirror 6 for the editor
332 unit tests (Vitest)
Mobile responsive, shareable URLs, accessibility themes
Free, no sign-up, open source (MIT). Would love feedback — especially on which concepts to add next!
Twitter/X
Tweet:
I built Vivix — an interactive tool that lets you see inside JavaScript as it runs.
Step through real code and watch:
⚡ CPU dashboard tick through operations
🧠 Variables appear in heap memory
📦 Call stack frames push & pop
🗺️ Memory map show byte allocation
great, thanks! Confirmed slop, the guy accidentally commited the markdown file he generated for his “social media launch strategy” 💀
spoiler
Launch Copy — Ready to Post
Use these templates when sharing Vivix. Replace
https://vivix.dev/with your deployed URL once you have one.Reddit — r/learnjavascript
Title: I built a tool that lets you see inside JavaScript as it runs — CPU, memory, call stack, all visualized step by step
Body:
Hey everyone! I built Vivix — an interactive JavaScript execution visualizer.
You write real JS, click play, and step through every instruction one at a time. As you step, you see:
There are 9 modules covering variables, conditionals, loops, functions, arrays, objects, data structures, async/await, and closures. Each has its own purpose-built visualization.
Tech: Svelte 5, Acorn parser, custom AST interpreter (no eval), CodeMirror 6, 332 unit tests.
It’s completely free, no sign-up, runs in your browser.
Would love to hear what you think — especially which concepts you’d want visualized next!
Reddit — r/webdev
Title: I built an interactive JavaScript visualizer that shows CPU state, memory allocation, and call stacks in real time [open source]
Body:
I’ve been working on Vivix — a tool that visualizes JavaScript execution at a low level.
Instead of just showing “this variable equals 5”, it shows:
It’s built with Svelte 5 (runes), Acorn for parsing, and a custom AST interpreter — no
eval(), so every intermediate state is captured. The interpreter runs in a Web Worker with a 500-step limit.9 modules: variables, conditionals, loops, functions, arrays, objects, data structures, async/await, closures.
332 tests, mobile responsive, shareable URLs, accessibility themes.
Open source (MIT). Feedback welcome!
Hacker News — Show HN
Title: Show HN: Vivix – Step through JavaScript and watch the CPU, memory, and call stack respond
Body:
I built an interactive JavaScript execution visualizer. You write code, click play, and step through each instruction — watching variables appear in heap memory, call stack frames push/pop, byte sizes update, and the CPU dashboard tick through operations.
It’s powered by a custom AST interpreter (Acorn → ESTree → step array) running in a Web Worker. No eval — we walk the AST directly to capture every intermediate state. 500-step limit prevents infinite loops.
9 modules covering core JS concepts (variables through closures), each with a purpose-built visualization. Svelte 5, CodeMirror 6, 332 tests.
Try it: https://vivix.dev/ Source: https://github.com/HenryOnilude/visual-learning-javascript
Dev.to
Title: I built a JavaScript visualizer that shows you what the engine actually does
Tags: javascript, webdev, opensource, learning
Body:
The problem
When I was learning JavaScript, I kept reading things like “variables are stored in memory” and “functions push frames onto the call stack.” But I never saw it happen.
The solution
I built Vivix — an interactive tool where you write real JavaScript, click play, and step through execution one instruction at a time.
At each step, you see:
9 interactive modules
Each covers a core concept with its own visualization:
How it works
Your Code → Acorn Parser → AST → Custom Interpreter → Step Array → VisualizerThe key insight: instead of using
eval(), I wrote a custom AST walker that produces an array of execution steps. Each step captures the line, variables, memory ops, call stack, phase, and output. Then the UI just renders whichever step you’re on.The interpreter runs in a Web Worker with a 500-step limit to prevent infinite loops.
Tech stack
$state,$derived)Try it
Free, no sign-up, open source (MIT). Would love feedback — especially on which concepts to add next!
Twitter/X
Tweet:
I built Vivix — an interactive tool that lets you see inside JavaScript as it runs.
Step through real code and watch: ⚡ CPU dashboard tick through operations 🧠 Variables appear in heap memory 📦 Call stack frames push & pop 🗺️ Memory map show byte allocation
9 modules · Svelte 5 · Open source
https://vivix.dev/
Posting Strategy
Best times to post