Home › Developer Tools › Pathfinding Visualizer

Pathfinding Visualizer

Watch classic graph search algorithms find their way across a grid. Drag the start and target, paint walls and weighted cells, generate a maze, then animate A*, Dijkstra, greedy best-first, BFS or DFS and compare how many cells each one explores.

Last updated:

Draw:
AlgorithmA*
Nodes visited0
Path length–
Path cost–
StatusReady

Advertisement
Advertisement

How to use the Pathfinding Visualizer

  1. Pick an algorithm from the list. A short explanation of how it works appears under the grid.
  2. Edit the board: choose Wall, Weight or Erase and click or drag on the grid. Drag the green arrow (start) or the red target to move them.
  3. Generate a maze if you want a ready-made challenge: choose a maze type and press Generate maze.
  4. Press Start search to animate. Use the speed slider, Pause, or Step to go one cell at a time.
  5. Press Compare all algorithms to run every algorithm on the same board and see visited cells, path length, cost and whether each path is the shortest.

Pathfinding algorithms compared

AlgorithmData structureUses weightsShortest path?Time (grid with V cells)Typical behavior
A* searchPriority queue on f = g + hYesYes, with an admissible heuristicO(V log V) worst caseNarrow search aimed at the target
Dijkstra's algorithmPriority queue on gYesYes (non-negative costs)O(V log V)Even ripples in all directions
Greedy best-firstPriority queue on hNo (ignores cost so far)NoO(V log V) worst caseVery fast on open boards, fooled by walls
Breadth-first searchFIFO queueNoFewest moves onlyO(V)Layer by layer from the start
Depth-first searchLIFO stackNoNoO(V)Long single branches, lots of backtracking

On a grid each cell has at most 4 neighbors (8 with diagonals), so the number of edges grows linearly with the number of cells and the binary-heap versions run in O(V log V).

Heuristics used for A* and greedy search

  • Manhattan distance (four-direction moves): h = |Δrow| + |Δcol|. It is the exact cost on an empty grid with no weights, so it never overestimates.
  • Octile distance (diagonal moves on): h = (|Δrow| + |Δcol|) + (√2 − 2) · min(|Δrow|, |Δcol|). It assumes you move diagonally as much as possible, each diagonal costing √2.
  • Diagonal steps are only allowed when both neighboring straight cells are open, so a path never squeezes between two walls that touch at a corner.
  • Ties in A* are broken in favor of the cell with the smaller h, which keeps the search focused when many cells share the same f value.

Experiments worth trying

  • Weights versus BFS: paint a band of weights across the direct route. Dijkstra and A* walk around it; BFS walks straight through and reports a higher cost.
  • Greedy trap: draw a U-shaped wall opening away from the target with the start inside. Greedy search fills the cup before escaping, while A* balances distance and cost.
  • Perfect mazes: on a recursive backtracker maze every algorithm finds the same unique path; the difference is only how many cells each one explores first.
  • Raise the weight cost to 20 and watch Dijkstra and A* take longer detours that still cost less.

Keyboard: focus the grid with Tab, move the highlighted cell with the arrow keys, press Space to draw with the selected tool, S to place the start and T to place the target.

Frequently asked questions

Which pathfinding algorithm is best?

For a single start and target on a grid, A* with an admissible heuristic is usually the best choice: it always finds the cheapest path, like Dijkstra, but explores fewer cells because the heuristic pulls the search toward the target. Dijkstra is better when you need distances to many destinations, and BFS is simplest when every move costs the same.

Does A* always find the shortest path?

A* is guaranteed to find a cheapest path when its heuristic never overestimates the true remaining cost (an admissible heuristic). This tool uses Manhattan distance for four-direction movement and octile distance for diagonal movement, both of which are admissible because every move costs at least 1 (or √2 diagonally).

Why does BFS find a longer or more expensive path when there are weights?

Breadth-first search counts moves, not costs. It finds the route with the fewest steps, so it will happily walk through weighted cells. Dijkstra and A* add up the cost of every cell they enter, so they detour around weights when that is cheaper. With diagonal moves turned on, BFS also treats a diagonal (cost √2) the same as a straight move.

Why is the DFS path so long and winding?

Depth-first search keeps going in the first available direction until it hits a dead end, then backtracks. It stops as soon as it reaches the target, so the path it reports is simply the branch it happened to be on, not an optimized route. DFS guarantees a path if one exists, but never that it is short.

What is the difference between Dijkstra and greedy best-first search?

Dijkstra orders cells by the cost already paid from the start (g), so it spreads out evenly. Greedy best-first orders cells only by the estimated distance to the target (h), so it rushes straight at the goal. Greedy is often much faster but can return a noticeably longer path, especially around walls and weights. A* combines both: f = g + h.

What do weights mean in this visualizer?

A weighted cell is passable but more expensive to enter, like mud or traffic. Entering it costs the weight cost you choose (5 by default) instead of 1. Walls cannot be entered at all. Path cost is the sum of the cost of every cell entered after the start.

How are the mazes generated?

The recursive backtracker carves passages with a randomized depth-first search, producing long corridors. Randomized Prim's algorithm grows the maze from a random frontier, giving many short dead ends. Recursive division starts with an open room and repeatedly splits it with walls that have one gap. All three produce perfect mazes with exactly one route between any two open cells.

Are all the tools on FreeToolCabin tested for quality and accuracy?

Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.

Related tools

Sorting Algorithm VisualizerWatch bubble, insertion, merge, quick, heap and radix sort step by step with live counters.Binary Search Tree VisualizerInsert, delete and find in BST, AVL and red-black trees with animated rotations and traversals.Maze GeneratorCreate random mazes in any size, solve them with the arrow keys, then print or save as PNG.Graphviz Online ViewerWrite Graphviz DOT code and render graphs live; switch layout engines, export SVG or PNG.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.HTML to JSX ConverterConvert HTML to valid React JSX: className, htmlFor, style objects, self-closing tags and events.CSS Clip-Path GeneratorDraw CSS clip-path shapes by dragging points: polygons, circle, ellipse and inset. Copy the CSS.CSS Animation GeneratorCreate CSS keyframe animations from 23 presets with live preview, timing controls and Copy CSS.CSS Triangle GeneratorMake CSS triangles in 8 directions with the border trick or clip-path. Set size and color, copy CSS.CSS Loader GeneratorPick from 14 pure CSS spinners and loaders, set color, size and speed, then copy the HTML and CSS.Cubic Bezier GeneratorDrag the control points to design a CSS easing curve, compare it with linear and copy cubic-bezier().CSS Filter GeneratorAdjust blur, brightness, contrast, hue, sepia and drop-shadow on an image and copy the CSS filter.CSS Specificity CalculatorCalculate CSS selector specificity (a, b, c), including :is(), :not(), :has() and :where(), and compare.Google Maps Embed GeneratorTurn an address or coordinates into responsive Google Maps iframe embed code, no API key.Neumorphism CSS GeneratorDesign soft UI neumorphic shapes with live preview and copy the box-shadow CSS.SVG Wave GeneratorMake layered SVG waves for section dividers and export SVG, PNG or a CSS background.SVG Blob GeneratorGenerate random organic SVG blob shapes with gradients and export SVG, PNG or CSS clip-path.CSS Clamp GeneratorTurn min/max sizes and viewport widths into a fluid CSS clamp() value in rem and vw.CSS @font-face GeneratorTurn font files or URLs into ready-to-paste @font-face rules with weights, styles and a preview.CSS Media Query GeneratorBuild @media rules for widths, orientation, dark mode and hover, or get framework breakpoints.CSS Scrollbar GeneratorStyle scrollbars: width, colors, radius and hover, with ::-webkit-scrollbar and scrollbar-color CSS.CSS Sprite GeneratorPack many icons into one sprite sheet PNG and get CSS classes with background-position.CSS Text Gradient GeneratorMake gradient text with background-clip:text: color stops, angle, font preview and fallback CSS.CSS Toggle Switch GeneratorDesign pure-CSS toggle switches: size, colors, shape and animation. Copy accessible HTML + CSS.CSS Tooltip GeneratorBuild pure CSS tooltips: position, arrow, colors, padding and animation. Copy HTML and CSS.HTML Form BuilderDrag and drop form fields with labels and validation, then copy accessible HTML and CSS code.Iframe GeneratorCreate iframe embed code: size or responsive ratio, border, allow, sandbox, lazy load, live preview.Web App Manifest GeneratorCreate a PWA manifest.json and every app icon size from one image, downloaded as a ZIP.CSS Background Pattern GeneratorMake pure-CSS stripes, dots, checkerboard, zigzag and grid backgrounds and copy the code.CSS Color Filter GeneratorTurn a HEX color into a CSS filter that recolors black icons and SVGs, with an accuracy score.CSS Gradient Animation GeneratorCreate animated gradient backgrounds: pick colors, angle and speed, preview live and copy the CSS.CSS Hover Effects GeneratorPick button, link and image hover effects, tweak colors and timing, and copy the HTML and CSS.CSS InlinerMove CSS from style blocks into inline style attributes so HTML emails render in every client.CSS Shape Divider GeneratorCreate wave, tilt, curve and triangle section dividers and copy the SVG, HTML and CSS.CSS Transform GeneratorRotate, scale, skew and translate an element with sliders and copy the CSS transform code.Font Pairing ToolPreview Google Font heading and body pairs on real layouts and copy the embed code and CSS.HTML Accessibility CheckerPaste HTML to find WCAG accessibility problems with impact level, the failing element and a fix.HTML Image Map GeneratorDraw clickable rectangle, circle and polygon hotspots on an image and get image map HTML.SVG ViewerOpen or paste SVG code to preview it live with zoom, backgrounds, size info and PNG export.PX to VW ConverterConvert pixels to vw and vh for any viewport size, and vw/vh back to px, with breakpoint tables.SVG Path EditorEdit an SVG path d attribute visually: drag points, edit commands, convert, scale and minify.SVG to CSS Data URITurn SVG code into a small URL-encoded data URI for CSS backgrounds, with Base64 size comparison.SVG to JSXTurn SVG code into a clean React component: camelCase attributes, style objects, TypeScript.Tailwind CSS Cheat SheetSearchable Tailwind class to CSS reference with live previews, class decoder and color palette.
See all 52 Web, HTML & CSS Tools →