Pathfinding Grid
Draw walls, drop endpoints, and watch A* find its way through.
IntermediateWeb appEducation12–24hAI-buildable 4/5no setup
A grid where you paint obstacles and watch search algorithms explore. Seeing A* fan toward the goal while Dijkstra spreads evenly in every direction is the clearest possible explanation of what a heuristic buys you.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- A grid where walls are painted by click and drag
- Start and end nodes can be dragged to any cell
- Visited nodes and the frontier animate as the search runs
- The final path highlights distinctly once found
- At least three algorithms including A* and Dijkstra
- A no-path-possible case is reported rather than hanging
- Clear-walls and clear-path controls are separate
The interesting part
- Animating a search without blocking the main thread
- A priority queue that performs at grid scale
- Painting walls by drag without missing cells on fast movement
Once it works
- Add weighted terrain cells
- Add maze generation
- Allow diagonal movement as an option
Suggested stack
reacttypescripttailwind