Skip Navigation

InitialsDiceBearhttps://github.com/dicebear/dicebearhttps://creativecommons.org/publicdomain/zero/1.0/„Initials” (https://github.com/dicebear/dicebear) by „DiceBear”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/)G
Posts
3
Comments
51
Joined
1 yr. ago

  • great, thanks! Confirmed slop, the guy accidentally commited the markdown file he generated for his "social media launch strategy" 💀

    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.

    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:

    • 🧠 Heap memory — variables with types, values, and byte sizes
    • 📊 CPU dashboard — program counter, operation, write counter
    • 📦 Call stack — frames push and pop in real time
    • 🗺️ Memory map — byte-level allocation visualization

    9 interactive modules

    Each covers a core concept with its own visualization:

    ModuleWhat you see
    VariablesHeap slots, byte sizes, type tags
    ConditionalsBranch flowchart, true/false paths
    LoopsIteration counter, loop ring
    FunctionsCall stack push/pop, return flow
    ArraysCell scanning, O(n) cost badges
    ObjectsHash map, key→bucket→O(1)
    Data StructuresStack/queue operations
    Async/AwaitEvent loop, microtask queue
    ClosuresNested scope boxes

    How it works

     
        
    Your Code → Acorn Parser → AST → Custom Interpreter → Step Array → Visualizer
    
      

    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

    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

    1. Deploy first — get a live URL (Netlify/Vercel)
    2. Record a GIF — 30-60 seconds of the Variables module stepping through code
    3. Post to r/learnjavascript first (most receptive audience)
    4. Wait 24h, then post to r/webdev
    5. Submit to Hacker News as "Show HN" (best on weekday mornings US time)
    6. Publish on Dev.to (can cross-post anytime)
    7. Tweet with the GIF attached

    Best times to post

    • Reddit: Tuesday–Thursday, 8-10am EST
    • Hacker News: Tuesday–Thursday, 8-11am EST
    • Dev.to: Any weekday morning
  • Where's the open source tho?? I can't find a git link anywhere, and looking up "Vivix Git" just turns up some AI project. Calling slop on this until I see the actual source code. But hey, at least the website uses Svelte instead of React, I guess

  • For anyone else wondering: It's some sort of ergonomic mouse thing

  • Penn and Teller! They aren't going to be around forever, so I'd really like to see them live sometime soon. But there's no way I would ever travel anywhere close to the USA :/

  • meow meow mrrow ..?

  • I wouldn't recommend it to anyone irl either, mostly because the community is so small that they'd inevitably find one of my posts haha

  • Code Golfing would be a nice option! For example, this site has daily code golfing challenges for CSS

  • Both my porn and my Wikipedia history include Monosodium Glutamate

  • Maybe it's an age thing? Like when you're dating as a teenager you know that your brain will still develop and you might grow incompatible with your partner, so it's hard to invest in the relationship if you're unsure on whether it might last?No idea though, people say I'm a bit too utilitarian when it comes to dating.

  • There's a band called Celldweller that I really jammed to in 2018. They got kind of a cyberpunk/robot theme going on that I really liked (it's just an aesthetic tho, they obviously don't actually use any AI).Anyways, they had a song called Pro-bots & Robophobes and when I heard it in 2018 I thought that I'd obviously be part of the Pro-bots. Haha, when actual AI came along I found out I was wrong on that assessment. I don't think there has been a single explicitly AI thing that I have actually enjoyed. Even the AI code completion that all my coworkers really like has been nothing but a hassle, because it keeps hallucinating up very slight mistakes that are annoying to catch.

  • Print that header onto the dial in a monospace font and you've got yourself an extremely marketable product. Perfect thing to bring to a white elephant gift exchange at an IT Company!