Myers' O(ND) diff, the algorithm behind git diff, as a search through the edit graph.
Text A runs along the top and text B down the side: a step right deletes a character of A, a step down inserts one from B, and wherever the characters match a free diagonal is drawn. Myers' greedy algorithm works in rounds; after d edits it keeps only the furthest-reaching point V[k] on each diagonal k = x - y, extends it by one edit from a neighboring diagonal, then slides down the free diagonal snake as far as it goes. The glowing points are those frontiers, the terraces behind them show the edit distance from the corner to every grid point (the frontier after round d is the edge of terrace d), and the first round to touch the far corner gives D. The saved V arrays fill a trace table (one row per round, one column per diagonal), and walking it backward recovers the shortest edit script: outlined in gold in the table, drawn in gold, red and green on the graph, and shown as an inline diff.
Try it. Click either text and type to edit it (Tab or the arrow keys switch texts and move the cursor), and the search reruns on every keystroke. Click the grid to delete the character of A in that column (shift-click for B in that row), use Random edit or Next example (Enter), and hover the grid to see a point's diagonal. Left alone, it makes a few typed edits and then moves on to the next example.
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 visualization of Myers' diff algorithm 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:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a dark navy background.
- Take two short strings, A = "ABCABBA" and B = "CBABAC". Draw the edit graph: a grid with the characters of A along the top and B down the left side. Wherever A[x] equals B[y], draw a diagonal line inside that cell.
- Implement Myers' greedy algorithm: for d = 0, 1, 2, ... and for each diagonal k from -d to d in steps of 2, choose whether to come down from diagonal k+1 or right from k-1 (whichever reaches further), then follow matching diagonals as far as possible and store the furthest x in V[k]. Stop when you reach the bottom-right corner. Save a copy of V at the start of each round.
- Animate it one (d, k) step at a time, drawing each edit move and diagonal snake in a color that depends on d.
- Walk the saved V arrays backward to recover the path, then draw it thick: diagonals in gold, right moves (deletions) in red, down moves (insertions) in green.
Once that works, make it beautiful:
- Show the resulting diff as text under the grid, with deleted characters in red with a strikethrough and inserted ones in green.
- Glow the furthest-reaching point on each diagonal for the current round and show the V array as a row of boxes.
- Let me type to edit the second string and rerun the search on every keystroke.
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 shading every grid point by its edit distance, the linear-space middle-snake variant, or diffing whole lines of code instead of characters.
