Find the shortest path
This is the JavaScript used by the first playground preset. Edit and run it in the interactive playground, including its HTML and CSS.
import {BidirectionalGraph,TaggedEdge,DijkstraShortestPathAlgorithm,defineQuikGraphViewer} from '@wieslawsoltes/quikgraphweb';
defineQuikGraphViewer();
const graph=new BidirectionalGraph();
const edges=[['A','B',4],['A','C',1],['C','B',2],['B','D',3],['C','E',5],['D','F',2],['E','F',1],['E','G',4],['F','H',3],['G','H',2]];
graph.AddVerticesAndEdgeRange(edges.map(e=>new TaggedEdge(...e)));
const viewer=document.querySelector('#graph');viewer.Graph=graph;
viewer.setAttribute('theme',document.documentElement.dataset.theme);
function solve(){
const source=document.querySelector('#from').value,target=document.querySelector('#to').value;
const algorithm=new DijkstraShortestPathAlgorithm(graph,e=>e.Tag);algorithm.Compute(source);
const path=algorithm.TryGetPath(target);
viewer.HighlightedEdges=new Set(path||[]);viewer.Refresh();
const distance=algorithm.Distances.get(target);
document.querySelector('#distance').textContent=Number.isFinite(distance)?'Total cost: '+distance:'No directed path';
console.log(source+' → '+target,{distance,edges:path?.length||0});
}
document.querySelector('#solve').onclick=solve;
viewer.addEventListener('graph-select',e=>console.log('Selection',e.detail.vertex));solve();Show the HTML host
<div class="toolbar"><label>From <select id="from"><option>A</option><option>B</option><option>C</option><option>D</option></select></label><label>To <select id="to"><option>H</option><option>G</option><option>F</option><option>E</option></select></label><button id="solve">Find path</button><output id="distance"></output></div><quikgraph-viewer id="graph" class="stage" style="display:block"></quikgraph-viewer><p class="hint">Pan, zoom and inspect the graph. Highlighted edges are the actual Dijkstra result.</p>How it works
From relationships to results
Build a graph from vertices and edges, run an algorithm against that model, then highlight the result in a reusable viewer.
Import graph structures from the root package. Call defineQuikGraphViewer() explicitly before attaching
Own the lifetime
Dispose event subscriptions owned by your integration. Load optional Graphviz and MSAGL engines only when needed.
The playground replaces its entire isolated frame on each run. In your application, use the framework’s unmount or disposal hook instead. Do not dispose a shared model while another view still owns it.
Read the lifecycle guide →Know the contract
Source repositories can contain work newer than the published package. The showcase uses @wieslawsoltes/quikgraphweb@0.2.0.