AlgorithmsGraphs and textRuns in your browserReviewed October 1, 2026

Breadth-First Pathfinding Visualizer

Spread out from the start ring by ring to find the shortest path on a grid. Interactive step-by-step animation with JavaScript code, complexity and front-end use cases.

Localprivate by defaultFastno sign-up path

Graphs and textTime: O(cells)Space: O(cells)

Obstacles

Queue

Cells explored

Step 1 / 148

Breadth-first search spreads out from the start one ring at a time, so the first time it reaches the goal it has found a shortest path.

waiting to explore
explored
path
wall

JavaScript

1function bfs(grid, start, end) {
2  const queue = [start];
3  const prev = new Map([[key(start), null]]);
4  while (queue.length) {
5    const cur = queue.shift();
6    if (same(cur, end)) return buildPath(prev, cur);
7    for (const next of neighbours(grid, cur)) {
8      if (prev.has(key(next))) continue;
9      prev.set(key(next), cur);
10      queue.push(next);
11    }
12  }
13  return null;
14}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...

Breadth-First Pathfinding Visualization and Animation

Spread out from the start ring by ring to find the shortest path on a grid. Put the start cell in a queue. Take a cell, mark it explored and add its unvisited neighbours. Stop when the goal is taken; follow the recorded parents back to build the path. Time complexity: O(cells). Space complexity: O(cells). Games, maze and route features, link graphs (shortest click path) and any shortest-path problem with equal steps.

How to use Breadth-First Pathfinding Visualizer

Put the start cell in a queue.
Take a cell, mark it explored and add its unvisited neighbours.
Stop when the goal is taken; follow the recorded parents back to build the path.
Press Play, or step through with the arrow buttons and change the input to see how it reacts.

Questions

What is Breadth-First Pathfinding?

Spread out from the start ring by ring to find the shortest path on a grid.

What is the time complexity of Breadth-First Pathfinding?

Time: O(cells). Space: O(cells).

Where do front-end developers use Breadth-First Pathfinding?

Games, maze and route features, link graphs (shortest click path) and any shortest-path problem with equal steps.

Does this upload my data?

No. This converter runs in your browser for ordinary use, so the input is not sent to a backend by this tool.

Related tools

Keep working without searching again.

Sorting