@invana/canvas

High-performance data investigation toolkit for your graphs — WebGPU-first rendering, explorer features.

Why

Most graph tooling renders a snapshot and stops. Invana Canvas is built to be interacted with — pan / zoom / select, re-layout, annotate, and drive backend queries, all in place without leaving the view. The picture is a means, not the product.

Architecture, highlighted features, and completion status live in the roadmap.

Install

pnpm install
pnpm build
pnpm --filter @canvas/storybook dev   # → http://localhost:6006  (live examples)

Build a single package:

pnpm --filter @invana/canvas build

Packages

Package	Responsibility
@invana/canvas	The engine — Canvas, Layer / Behaviour / Layout base classes, ShapesRenderer, built-in background / dev-info / layers-panel layers + camera-input behaviours. The only package that touches pixi.js.
@invana/graph	Graph domain on the engine — GraphCanvas, GraphLayer, MiniMapLayer, the graph store, and hover / select / lasso / brush / drag / context-menu behaviours.
@invana/graph-layout-*	One layout algorithm each — d3-force, elkjs, d3-hierarchy, d3-sankey, geometric.
@invana/graph-layer-*	Overlay layers — d3-contour (density), bubble-sets (group annotation), maplibre (basemap).
@invana/canvas-react	React bindings — declarative <Canvas>, hooks, components + assembled toolbars, GraphCanvasApp.
@invana/canvas-ui	Schema-driven, engine-agnostic editor components, built on @invana/forms.
@invana/canvas-designer	The visual designer — node template authoring today (WYSIWYG → FreeformStructure); layout/behaviour/layer designers planned.
@invana/graph-datasets	Sample datasets for examples and stories.

Roadmap & design notes

• roadmap.md — the why, architecture diagram, and feature status.
• docs/ — internal design notes and *-plan.md documents (docs/README.md indexes them).

License