Build a graph people can follow

Dagr is a TypeScript toolkit for directed graphs: a graph model, a headless layout engine, a GPU renderer, and React bindings. Use the layers together or bring your own renderer. The visual-language toolkit adds node specifications and connection validation without deciding what your nodes mean.

Explore the architecture to see how the pieces fit, try an actual mutation in Follow an edit, or start with the example below.

Run it locally

Dagr is pre-release and not published to npm. Start from the repository with Node 20 or newer and pnpm:

git clone https://github.com/prnt-design/dagr.git
cd dagr
pnpm install
pnpm --filter docs... build
pnpm --filter docs start

For the local renderer playground, run pnpm --filter demo dev.

Your first graph

The graph and layout packages have no browser requirement. Layout returns node boxes and edge routes keyed by the IDs you supplied.

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 });
const preview = result.nodes.get('preview');
// preview has x, y, width, and height. x and y are its center.

This example runs inside the workspace. Use the React bindings to draw a graph with DagrCanvas, then add rich content.

Choose the layer you need

Package	Use it for
@dagr/graph	Nodes, edges, attributes, ports, patches, and serialization
@dagr/layout	Ranking, ordering, positioning, and routing without a UI
@dagr/render	Instanced shapes, edge ribbons, camera, and spring motion
@dagr/react	A canvas component, reactive layout, and HTML content
@dagr/vdsl	Node specifications, port type tokens, and connection validation

Changes and animation

Use a persistent layout engine for incremental changes. It retains previous pipeline state and returns both the new layout and a delta. With React, DagrCanvas animate connects this to spring motion. Group related edits in graph.batch so they arrive as one patch.

Stable identity does not mean every existing node always stays in place. Topology changes can move other nodes. The incremental layout guide explains the guarantees, tradeoffs, and measured stability.

What is ready, and what is next

The full layout pipeline, incremental deltas, instanced rendering, spring animation, HTML overlays, React integration, and port validation are implemented. GPU picking, editor selection/drag hooks, drag-to-connect, and subgraph editing remain planned. The homepage's architecture inspector is application UI, not an assertion that those editor APIs are complete.

APIs may change before the first release. Check the roadmap for current work.