Vivix
Vivix is a JavaScript execution visualiser built after finding that Python Tutor "only showed the bones" of execution. Where Python Tutor stops at the call stack and line-by-line stepping, Vivix shows the muscle and flesh: live scope chains, closures, and step-by-step execution rendered as they actually happen, across 12 interactive learning modules.
Results & Impact
The Challenge
Existing execution visualisers show the call stack and step through lines, but stop short of the part learners actually get stuck on: how scope chains and closures behave in practice as code runs. Text-based syntax explanations do not build that intuition.
The Solution
Built Vivix with Acorn to parse JavaScript into an AST, then step through execution with live scope-chain and closure tracking rendered in real time. CodeMirror 6 powers the editor, GSAP drives the visualisation animations, and Web Workers keep execution off the main thread so the UI stays responsive.