Lambda calculus drawn as Tromp diagrams and reduced one beta step at a time.
In John Tromp's diagrams every lambda is a horizontal bar, every variable is a vertical line hanging from the bar that binds it, and every application is a link joining the leftmost line of the function to the leftmost line of its argument. Terms are stored with de Bruijn indices and reduced in normal order, and every node keeps an id through substitution, so each beta step can morph: the redex lights up, the lines of the bound variable turn gold, and then every bar, line and link slides to its new place while copies of the argument fly out to each use of the variable. Each lambda keeps its own color for its whole life, so you can follow it through the reduction. Church numerals add, multiply, exponentiate and find a predecessor, S K K collapses to the identity, the Y combinator blooms into an endless staircase, and Omega reduces to itself forever.
Try it. Pick an expression below, or press 1 to 7. Space plays and pauses, the right and left arrows (or the buttons) step forward and back, and clicking the diagram takes one step. Hover any bar or line to see the term it belongs to, with the rest dimmed.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated lambda calculus visualizer that draws terms as John Tromp's lambda diagrams, using 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:
- Represent terms with de Bruijn indices: a variable is an index counting how many lambdas up its binder is, plus lambda and application nodes. Write a small parser for named syntax like λf.λx.f (f x) and build Church numerals and PLUS, MULT and PRED from it.
- Lay out a Tromp diagram on a grid with one recursive function: a variable takes one column and becomes a vertical line from its binder's row down to where it is used; a lambda is a horizontal bar on its own row spanning its body; an application lays out the function and argument side by side and joins their leftmost lines with a horizontal link one row below the deeper of the two, where the function's line continues down.
- Draw it centered and scaled to fit, with round line caps on a dark background.
- Implement normal order reduction (leftmost outermost redex first) with shifting and substitution, and add buttons to step forward and to autoplay until normal form.
Once that works, make it beautiful:
- Give every lambda its own hue and color each variable line with its binder's hue, plus a soft glow.
- Before each step, highlight the redex's lambda bar, the variable lines it binds and the argument.
- Give every node an id that survives substitution, then animate each step by interpolating each bar, line and link from its old position to its new one, with argument copies flying from the original.
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 the Y combinator, showing the term as text with the redex highlighted, or hovering a line to see the subterm it belongs to.
