wity-graph ​

A production-grade directed graph library built in three independent, composable layers.

For AI coding agents: llms.txt · llms-full.txt · llms-api.txt

Packages ​

Quick start ​

import {
  GraphStore,
  SelectionManager,
  GraphCanvasState,
} from '@wity/graph-headless';

// Create the store
const store  = new GraphStore({ viewport: { width: 1200, height: 800 } });
const selection = new SelectionManager(store);
const canvas = new GraphCanvasState(store, { width: 1200, height: 800, minZoom: 0.1, maxZoom: 5 });

// React to changes
store.on('layout:computed', ({ nodes, edges }) => render(nodes, edges));
selection.on('selection:changed', ({ selected }) => updateToolbar(selected));

// Add nodes and compute layout
store.ingest([
  { uid: 'a', type: 'continuant', title: 'Concept A' },
  { uid: 'b', type: 'continuant', title: 'Concept B', links: [{ targetUid: 'a' }] },
]);

Design principles ​

• Headless layer owns all math. Layout, geometry, coordinate transforms, traversal — none of this belongs in the rendering layer.
• Rendering layer owns only DOM mutations. It subscribes to events and applies the computed state. No logic lives there.
• Event-driven, not reactive-framework-dependent. The EventBus is plain pub/sub. Wire it into React state, Svelte stores, or vanilla JS — your choice.
• Narrow events over broad ones. node:moved, node:status-changed, and node:style-changed let the renderer update a single node. nodes:changed is for bulk changes. Both exist.
• Batching prevents re-render storms. store.batch(fn) defers all events until the block completes.