~/projects/graph-editor
Draw a graph, write a traversal in real Python (networkx included), and watch every step animate with play, pause, and scrub. A ground-up rewrite of my 2021 prototype into a full product with accounts, saved graphs, and multi-file Python projects.
$ render article.mdx
Search posts, research, projects and tags, or jump to a page.
Graph algorithms are far easier to understand when you can watch them run. Graph Editor turns BFS, DFS, Dijkstra, and A* from pseudocode into something you draw, execute, and scrub through like a video.
Draw nodes and edges on a WebGL canvas, then write your algorithm in real Python, with networkx included. The code executes in Pyodide (CPython compiled to WebAssembly) inside a web worker, so the UI never blocks. A graph object bridges Python to the canvas: every call emits a JSON frame, and a playback engine folds frames into visual state, which is what makes play, pause, step, and scrub possible even after the run finishes.
from collections import deque
def bfs(start):
visited, queue = set(), deque([start])
while queue:
node = queue.popleft()
if node in visited:
continue
visited.add(node)
graph.setCurrentNode(node) # highlight as visited
for neighbor in graph.getNeighbors(node):
graph.setCurrentEdge(node, neighbor, peek=True)
queue.append(neighbor)Every call into the graph API drives the animation. The cursor, visited elements, peeked elements, and the final path each get a distinct style in all four of the app's color palettes. Playback streams live while Python runs; afterwards you can step forward and back, scrub to any frame, drop breakpoints in the editor, and switch between animating graph events or every executed statement.
This is a ground-up rewrite of graph-editor-react, a prototype I built by hand in 2021: same core idea, new everything else (Next.js 16, React 19, TypeScript, Pixi.js, Supabase). The Python-to-canvas bridge survived because it was always the right design. I wrote about what the rewrite taught me about AI and already-defined problems in this post.