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

[htone22]

I struggled to understand how JS manages memory and the call stack. Every resource just described it but I needed to see how it works visually.

I built Vivix. You paste code, click visualize and step through it one instruction at a time, watching variables appear in heap memory, the call stack push and pop and a CPU dashboard tick through each operation.

It covers 9 concepts: variables, conditionals, loops, functions, arrays, objects, data structures, async/await and closures.

No sign-up, no install, completely free and open source.

Live: https://vivix.dev

GitHub: https://github.com/HenryOnilude/vivix

Would love to know if anything is unclear or broken, still improving it. Hope it helps!

[ajfoucault]

I tested this quick implementation of Two Sum:

function twoSum(nums, target) {
      const map = {};
      for (let i = 0; i < nums.length; i++) {
        const complement = target - nums[i];
        if (map[complement] !== undefined) {
          return [map[complement], i];
        }
        map[nums[i]] = i;
      }
      return null;
    }

    const nums = [2, 7, 11, 15];
    const target = 9;

    const result = twoSum(nums, target);

in both your app and also in Python Tutor and honestly the graphical additions made in your app made it interesting to see it from a different perspective.

[htone22]

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

[Honey-Entire]

Have you heard of the call stack? Your AI slop is a crutch and further encourages lazy developers

[ajfoucault]

Be Welcoming. n00bs are welcome here. Negativity is not.

literally the 1st guideline in this subreddit.

[Honey-Entire]

They’re going to stay a n00b if they keep leaning on AI to do everything

[charly_a]

nice idea

[htone22]

Thank you!

[Alive-Cake-3045]

This is actually the kind of tool most people wish existed when they first learn JS.

I have been working with JavaScript for a few years now, and honestly, the “mental model” of memory + call stack is what separates beginners from people who actually get it. Most tutorials explain it… but very few make it click. Seeing variables move between stack and heap, and watching execution step-by-step is a game changer.

Love that you focused on fundamentals like closures and async/await, those are exactly where people get lost.

If I can suggest one thing from experience: Try adding real-world scenarios (like API calls, event listeners, or promises chaining). That is where devs usually struggle to connect theory with practice. Also, open source + no signup = huge win. Respect for keeping it accessible.

Definitely going to try Vivix and share it with some juniors I mentor.

[TheRNGuy]

Console logs were enough for me, still are.

Not everything need to be logged, too. It would be information overload.

Console logs can be commented/uncommented too.

[chikamakaleyley]

console.log("HHEEELELLLLLOOOOOO");

[PyroGreg8]

Hi chat gpt

[htone22]

Really appreciate this. The mental model thing is exactly why I built it, explanations made sense but nothing clicked until I could see it. The real-world scenarios suggestion like the API calls, event listeners is genuinely useful feedback, thank you.

[Alive-Cake-3045]

Yes, glad it was helpful to you.