Pathfinding algorithms, side-by-side, drawn step-by-step in the browser. Built so I could see — not just read about — why A feels different from Dijkstra and why "best-first" is a trap.*
A SvelteKit + TypeScript playground for the classic pathfinding suite. You draw a grid, drop a start and a goal, paint walls, pick an algorithm, and watch it expand the frontier in real time. Side-by-side comparison mode lets you run two algorithms on the same grid so the differences become visible instead of hypothetical.
Scaffolding is in place, the algorithm runtime is not. The repo currently has SvelteKit + TailwindCSS + Storybook configured and a placeholder homepage. The grid component, the algorithm implementations, and the visualization animations are the next milestone — I keep half-starting it and getting pulled into other things.
Treat this README as the design doc rather than the user manual.
| Algorithm | Heuristic | What it shows |
|---|---|---|
| BFS | none | The "guaranteed shortest in unweighted grids" baseline. Floods uniformly. |
| DFS | none | The "this is why we don't use DFS for shortest path" baseline. Goes deep, comes back. |
| Dijkstra | none (uses cost) | Optimal with weighted cells. Same flood, weighted by edge cost. |
| Best-first | Manhattan | Greedy. Fast, often wrong. The instructive failure case. |
| A* | Manhattan / Euclidean | Optimal and fast. The reason the others exist as comparisons. |
| Hill climbing | Manhattan | The "what if the heuristic is your only signal" extreme. Gets stuck on walls. |
The visualization is the point. Every algorithm is a generator that yields its frontier each step, and the renderer animates the visited / frontier / path layers in distinct colors.
- SvelteKit — runes are nice for this; the grid state is reactive, the algorithm step is a pure function over the grid state. No global store needed.
- TypeScript — the algorithms are tiny, but heuristic types matter.
(a: Cell, b: Cell) => numberis enforced at the boundary so swapping heuristics is a function pointer change, not a refactor. - Tailwind v4 — fast iteration on the grid styling.
- Storybook — each cell state, each control panel widget, gets its own story. When the grid sprawls in size, Storybook stays small.
- Deno-friendly — the lockfile (
deno.lock) means it'll run underdeno task devas well as the npm/pnpm path.
# Pick one
pnpm install && pnpm dev
npm install && npm run dev
deno install && deno task devThen http://localhost:5173. (Currently shows the placeholder homepage; will eventually show the grid.)
When I first learned A* it felt like magic — and "magic" is exactly what you don't want a fundamental algorithm to feel like. Watching BFS, Dijkstra, and A* expand on the same grid made f = g + h click for me harder than any textbook diagram. I want to ship the version of that lesson I wish I'd had.