A whole compiler, from source to running bytecode, rebuilt on every keystroke.
Five panels are five stages of a real compiler for a small language of assignments and arithmetic. The lexer's tokens slide out as chips, a precedence climbing parser builds a tree per statement, and the optimizer folds constants, propagates them through variables, applies identities like x*1 and x*0 and deletes dead assignments, animating each pruned node into the node that absorbed it. The folded program is lowered to three-address code, liveness analysis builds an interference graph, and Chaitin's simplify and select steps color it with three registers, spilling to memory when it needs more. The same program also compiles to stack bytecode that runs one instruction at a time on a live operand stack.
Try it. Click the source and type (arrow keys move, Enter adds a line); every keystroke recompiles all five stages, and a syntax error dims the later ones. Drag the x or y input in the VM panel to rerun with new values, hover a register node to see what it interferes with, or pick a program below.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a tiny live compiler visualizer with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Use a textarea for source code in a tiny language: lines like a = x * 2 + 1 and a final return expression, with x and y as inputs. Draw everything else on a full-window canvas that stays sharp on high-DPI screens.
- Write a lexer (numbers, names, operators, parentheses, newlines) and draw its tokens as colored chips in a panel.
- Write a precedence climbing parser that builds a syntax tree for each statement, and draw the trees with a simple layout: leaves in consecutive slots, each parent centered over its children.
- Compile the trees to stack bytecode (PUSH, LOAD, STORE, ADD, MUL, RET) and step through it twice a second, drawing the operand stack as boxes that push and pop.
- Recompile on every input event so all panels update as you type, and show parse errors without wiping the last good result.
Once that works, make it beautiful:
- Add constant folding: evaluate subtrees whose children are numbers, propagate variables that hold constants, and simplify x * 1 and x + 0. Animate the tree from its original shape into the folded one.
- Connect the panels with curved pipes and dots flowing from one stage to the next, brightening whenever you type.
- Give each token type, tree node and bytecode operand a consistent color so you can follow a value through the whole pipeline.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as three-address code with register allocation by graph coloring, dead code elimination, or a ghost typist that writes a demo program by itself.
