A GRAPH TOOLKIT FOR THE WEB
Dagr.
Structure you can explore.
Changes you can follow.
Graph layout, GPU rendering, and the building blocks for visual languages. Follow branching chess openings, then explore the engine that gives the graph its structure.
Build with Dagr ↗CHESS OPENING ATLAS
One position. Many possibilities.
Follow a move. Find the branch.
Explore 24 opening lines as a living map of positions.
Boards are replayed from legal moves in the Lichess opening dataset (CC0). Dagr lays out and routes this move tree; board detail appears as you zoom in. This is a curated atlas, not an engine evaluation. Different move orders stay separate.
Inside the graph
Explore how Dagr lays out a graph, animates an edit, and brings your content into the scene.
Laid out by @dagr/layout, presented with HTML and SVG. This map explains the runtime flow; it is not a live profiler or a package dependency graph.
Read the connections
- Graph model → Layout engine:
Patch - The React hook subscribes to graph patches and asks the layout engine to relayout.
- Layout engine → Scene adapter:
LayoutResult - Node boxes and routed edges become scene geometry.
- Scene adapter → Scene motion:
Scene + delta - The adapter converts layout deltas into motion targets when animation is enabled.
- Scene motion → GPU renderer:
Frame - Animated node and edge geometry is uploaded before drawing.
- Layout engine → HTML overlay:
Placement - Layout boxes anchor rich content. A caller can also place annotations in world coordinates.
THE GRAPH IS THE MEDIUM
You bring the meaning.
Dagr brings the structure.
A service map, a build pipeline, a procedural pattern. Each has its own vocabulary. Dagr handles graph identity, layout, rendering, and motion so your application can define what the connections mean.
The case for visual languages →MEASURE IT HERE
A bigger graph.
An actual measurement.
Run the layout engine on a seeded graph in your browser. This measures layout and the worker round trip on your device, not GPU frame rate. Read the methodology →
rankSep 42 · nodeSep 4Laying out…
Measuring 1,000 nodes on your device…
runAsync call, so it counts preparing the graph and the trip to the worker, not the pipeline alone. The page's first run is a warm-up and is not reported, which is the rule the repository's own benchmark captures follow. Focus the graph to scroll-zoom, or drag to pan.FROM EXPLORING TO BUILDING
Start with two nodes.
The graph and layout packages work without a browser. Add the renderer and React bindings when you want a canvas, rich content, and animation.
Get started →Pre-release. Not yet on npm. Explore the repository ↗
import { Graph } from '@dagr/graph';
import { layout } from '@dagr/layout';
const graph = new Graph();
graph.addNode({ id: 'source' });
graph.addNode({ id: 'preview' });
graph.addEdge({ source: 'source', target: 'preview' });
const result = layout({ graph });
// Node boxes and routed edges, keyed by your IDs.