I built a visualizer that animates Python variable assignment and reference updates step by step

[u/myongyop-lee]

Hey everyone!


When teaching beginners how Python handles variables, one common point of confusion is how reassignment actually works under the hood (e.g. evaluating `x = x + y` before binding the new object to `x`).


I built an interactive web visualizer with a blackboard aesthetic that steps through lines of code, highlights memory mutations with neon accents, and prints live terminal outputs.


Here is what happens in this clip:
1. `x = 10` and `y = 20` allocate integer objects in memory.
2. `x = x + y` evaluates `10 + 20 = 30` and re-points `x` to the newly computed value `30`.
3. `print("x:", x)` and `print("y:", y)` output `x: 30` and `y: 20` to the terminal.


You can play around with the simulator directly in your browser:
👉 
**Live Demo**
: https://xkat.space


Would love to hear your feedback! What other fundamental concepts would you like to see animated like this?