Get started

Install the package, give graphraum a sized container and positioned nodes, and you have a graph you can pan, zoom and click.

Install

npm

npm install @yggy-tech/graphraum@0.34.1

yarn

yarn add @yggy-tech/graphraum@0.34.1

pnpm

pnpm add @yggy-tech/graphraum@0.34.1

bun

bun add @yggy-tech/graphraum@0.34.1

The command pins the version these docs describe. Drop the version suffix only when you want the newest release.

Render a graph

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

import { Graphraum } from "@yggy-tech/graphraum";

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

const graph = new Graphraum(container, { mode: "2d" });

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

This code, running Open the playground

Click and select

Picking takes viewport coordinates and returns your node ID. Selection stays your state.

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

Update without rebuilding

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

// Move or restyle existing nodes; incident edges follow.
graph.updateNodes([
  { id: "berlin", position: { x: -20, y: 10 } },
  { id: "hamburg", color: "#fcfffc" },
]);

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

Clean up

graph.destroy();

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