Get started

Documented API v0.21.0

Exact package bun add @domudev/graphraum@0.21.0

Release notes Open reference → Immutable contract Browse source →

Install

graphraum is currently published through the GitHub Packages npm registry. Configure the @domudev scope with a classic GitHub token that has read:packages permission:

.npmrc

@domudev:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}

The exact Bun command in the version card pins the package documented by this site. Remove the version suffix only when you intentionally want the newest published release.

Render a graph

The container must have a real width and height before graphraum is constructed.

import { Graphraum } from "@domudev/graphraum";

const container = document.querySelector<HTMLElement>("#graph");
if (!container) throw new Error("Missing graph container");

const graph = new Graphraum(container, {
  mode: "2d",
  viewportCulling: true,
  viewportOverscan: 16,
  maxVisibleEdges: 100_000,
});

graph.setData({
  nodes: [
    { id: "berlin", position: { x: -40, y: 0 } },
    { id: "hamburg", position: { x: 40, y: 0 }, color: "#73c7a5" },
  ],
  edges: [{ id: "rail", source: "berlin", target: "hamburg" }],
});

Interact and clean up

Picking accepts viewport coordinates. Selection remains explicit application state.

container.addEventListener("click", (event) => {
  const nodeId = graph.pick(event.clientX, event.clientY);
  graph.setSelection(nodeId ? [nodeId] : []);
});

graph.setMode("3d");
graph.fitView();

// Update existing node buffers and incident edge endpoints without rebuilding the graph:
graph.updateNodes([
  { id: "berlin", position: { x: -20, y: 10 } },
  { id: "hamburg", color: "#fcfffc" },
]);

// Merge streamed graph pages without fitting or resetting the camera:
graph.applyDataPatch({
  addedNodes: [{ id: "munich", position: { x: 0, y: 40 } }],
  addedEdges: [{ id: "branch", source: "berlin", target: "munich" }],
});

// When the surface unmounts:
graph.destroy();

destroy() disconnects resize observation, disposes controls and GPU resources, cancels pending rendering, and removes the canvas.