What can visitors do with the embedded visualizer?

They pick an algorithm (BFS, Dijkstra or A*), draw walls and heavy — weighted — cells on the grid with the mouse or a finger, move the start and goal, then run it and watch the frontier expand until it finds the path. A cells-settled counter and a path-cost readout update as it runs, and a "Compare all 3" button reports how each algorithm did on the same grid. Everything runs in the visitor’s browser.

Why is a pathfinding visualizer useful for teaching?

The difference between BFS, Dijkstra and A* is hard to convey on a slide but obvious the moment you watch them. On the same grid, A* settles a fraction of the cells Dijkstra does while returning the same optimal path — the payoff of an admissible heuristic, shown rather than asserted. Painting a band of heavy cells makes BFS visibly disagree with the weighted algorithms.

Does it send any data or need an account?

No. There is no sign-up and nothing is uploaded — the visualizer is entirely client-side, so the grid a visitor draws never leaves their browser. The only request the iframe makes is to load the widget itself from lkforge.com.

Widgets

How to Add a Pathfinding Visualizer to Your Website

LK Forge · 4 min read · Updated September 2026

You can add a pathfinding visualizer to any website, blog, or classroom page with a single line of code — free, with no sign-up, no plugin, and no script to install. It runs the three textbook grid-search algorithms live: breadth-first search, Dijkstra’s algorithm, and A* with a Manhattan-distance heuristic. This guide covers the fastest way to embed the tool, what it shows, and where it works.

The quickest way: paste one embed snippet

An embed is just an <iframe> that loads the visualizer from lkforge.com, plus a small credit line. Copy this into your page’s HTML where you want the widget to appear:

<iframe src="https://lkforge.com/embed/pathfinding-visualizer/"
        width="100%" height="720" loading="lazy"
        style="border:0;max-width:660px"
        title="Pathfinding Visualizer by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/pathfinding-visualizer/">Pathfinding Visualizer</a>
   by <a href="https://lkforge.com/">LK Forge</a></p>

The <iframe> is the live tool; the <p> underneath is a plain credit link. Keep that line — the visible link is what keeps the widget free to embed. You can also copy this exact code straight from the LK Forge widget gallery.

What the widget shows

Three algorithms: switch between BFS (fewest cells, ignores weights), Dijkstra (lowest cost), and A* (lowest cost, far fewer cells explored).
Draw the map: paint walls and heavy cells, and drag the start and goal anywhere.
Watch and compare: the frontier animates as it expands, a counter shows cells settled and path cost, and "Compare all 3" reports the numbers side by side.

Pick the right height

The snippet uses height="720", which fits the controls, grid and stats without clipping even on a narrow phone, where the controls wrap into rows above the grid. On a wider page the widget centres within its max-width:660px. That single height works across screen sizes, so there is nothing to tweak for mobile.

Where it works

Because it is a standard iframe, the embed works anywhere you can add HTML:

WordPress: add a Custom HTML block and paste the snippet.
Squarespace: use a Code / Embed block.
Wix: add an Embed HTML / iframe element.
Ghost: insert an HTML card.
Notion: paste the /embed/pathfinding-visualizer/ URL and choose "Create embed".
Plain HTML, an intranet, or a lesson page: paste the snippet straight into the markup.

That’s the whole job. Copy the embed code from the widget gallery and paste it wherever a lesson or a blog post on graph search, shortest paths, Dijkstra or A* wants a demo students can actually draw on.

Grab the embed code from the LK Forge widget gallery — free, no sign-up.

Open the Pathfinding Visualizer

Frequently asked questions

What can visitors do with the embedded visualizer?: They pick an algorithm (BFS, Dijkstra or A*), draw walls and heavy — weighted — cells on the grid with the mouse or a finger, move the start and goal, then run it and watch the frontier expand until it finds the path. A cells-settled counter and a path-cost readout update as it runs, and a "Compare all 3" button reports how each algorithm did on the same grid. Everything runs in the visitor’s browser.
Why is a pathfinding visualizer useful for teaching?: The difference between BFS, Dijkstra and A* is hard to convey on a slide but obvious the moment you watch them. On the same grid, A* settles a fraction of the cells Dijkstra does while returning the same optimal path — the payoff of an admissible heuristic, shown rather than asserted. Painting a band of heavy cells makes BFS visibly disagree with the weighted algorithms.
What iframe height should I use, especially on mobile?: The snippet ships with height="720", which fits the controls, the grid and the stats without clipping, including on a narrow phone where the controls wrap into rows above the grid. On a wider page the widget centres within its max-width of 660px, so the same height works across screen sizes.
Does it send any data or need an account?: No. There is no sign-up and nothing is uploaded — the visualizer is entirely client-side, so the grid a visitor draws never leaves their browser. The only request the iframe makes is to load the widget itself from lkforge.com.