An interactive, single-file pathfinding visualizer that runs entirely in your browser — no backend, no build step.
▶ Live: https://dev48v.github.io/pathfinding-visualizer/
Draw walls, generate a maze, then watch a graph-search algorithm explore the grid and trace a path. The point isn't just the animation — it's comparing the algorithms so you can see why A* is the one everyone reaches for.
| Algorithm | Finds shortest path? | How it searches |
|---|---|---|
| BFS | ✅ yes (unweighted) | expands outward in rings, all directions equally |
| Dijkstra | ✅ yes | BFS with costs; on this unweighted grid it is BFS |
| A* | ✅ yes | Dijkstra + a heuristic that aims at the goal |
| DFS | ❌ no | dives deep down one path; returns a path, rarely the shortest |
- A* visits a fraction of the cells. On an open grid, BFS/Dijkstra explore ~700 cells to find a path; A* explores ~30 — because its heuristic (Manhattan distance to the target) pulls the frontier toward the goal. Both return the same shortest path length. That's the whole value of A*: same answer, far less work.
- DFS is not shortest. Run it and watch it snake off in one direction and come back with a long, winding path.
- Dijkstra = BFS here. Every step costs 1 on this grid, so they behave identically. Add edge weights and they'd diverge — that's when Dijkstra earns its keep.
- Click & drag to draw or erase walls; drag the green/red squares to move start and target.
- Maze generates a maze with recursive division.
- Visualize animates the search, then the shortest path. speed slider controls the pace.
Visit order, path reconstruction, and the shortest-path guarantees are the real algorithms; the animation is a replay of the search.
It's one file. Open index.html, or:
python -m http.server 8000 # then visit http://localhost:8000MIT © 2026 dev48v — dev48v.infy.uk