Type a formula and watch reverse-mode autodiff run on a printed circuit board.
A typed expression is parsed by recursive descent and compiled into a computational graph, with identical subexpressions merged so a value can fan out and its gradient arrive from several paths. The graph is laid out as a circuit board by a small Sugiyama pipeline: longest-path layers, vias for edges that skip a layer, barycentre sweeps to reduce crossings and left-edge track assignment so the chamfered copper traces never overlap. Inputs are rotary knobs, operations are chips showing their value in amber and their gradient in cyan, and each input pin is tagged with the local derivative the backward pass multiplies by. Amber current flows forward while cyan gradient flows back, a periodic sweep replays both passes in the order the algorithm visits the nodes, and the panel checks every gradient against a finite difference and plots the function with the tangent its gradient predicts.
Try it. Drag a knob up or down to change an input and every value and gradient updates at once. Click a chip to see its local derivatives spelled out, click a gradient row to plot along that variable, and pick a preset (a two-unit network that reuses w*x, a neuron, a shared subexpression, a logistic loss and more). Type (or click the expression box, which selects it) to write your own expression with + - * / ^ and functions like sin, exp, log, tanh, sigmoid and relu, then press Enter. The left and right arrow keys switch preset, up and down nudge the focused input, and Tab changes it.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive autograd visualizer: I type a math expression and see its computational graph, with values flowing forward and gradients flowing backward. Use JavaScript and the HTML canvas element, in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Give it a dark green circuit-board background.
- Write a small recursive descent parser for + - * / ^, parentheses, numbers, variable names and a few functions (sin, exp, log, tanh). Build a graph of nodes, reusing the same node for repeated variables.
- Forward pass: evaluate nodes in topological order. Backward pass: set the output's gradient to 1, then walk the nodes in reverse, and for each node add its gradient times each local derivative (for a*b that is b and a) into its inputs.
- Lay the graph out in columns by depth from the inputs, draw each operation as a box showing its value and gradient, and connect them with lines. Draw each variable as a knob I can drag up and down to change its value.
Once that works, make it beautiful:
- Route the connections as right-angled traces with 45 degree corners, like copper on a circuit board, and animate amber dashes moving forward and cyan dashes moving backward along them.
- Label each input pin with the local derivative used there, and add a periodic sweep that lights up the nodes in forward order and then in backward order.
- Check every gradient against a central finite difference and show both.
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 merging repeated subexpressions so gradients accumulate from several paths, a plot of the function with its tangent line, or reducing wire crossings with a barycenter ordering.
