Interactive demos

Documented API v0.21.0

Exact package bun add @domudev/graphraum@0.21.0

Release notes Open reference Immutable contract Browse source

These are executable examples, not captured videos. Each use case has its own focused page, stable URL, live graph, accessible entity navigation, and compiled detail panel.

The reusable boundary

The three domains share the same engine contract. Product attributes are translated once when data enters graphraum; render frames only consume the compiled buffers.

const visuals = defineVisuals<DomainNode, DomainEdge>({
  node: (node) => ({
    visual: {
      color: palette[node.attributes.category],
      shape: shapeByCategory[node.attributes.category],
      size: node.attributes.importance,
    },
    presentation: {
      title: node.attributes.label,
      properties: node.attributes.properties,
      actions: [
        { id: "trace-connections", label: "Trace connections" },
        { id: "primary", label: node.attributes.primaryActionLabel },
      ],
    },
  }),
  edge: (edge) => ({
    visual: { color: edge.attributes.color },
    presentation: {
      title: edge.attributes.relationship,
      properties: edge.attributes.properties,
    },
  }),
});

The canvas owns dense rendering and picking. The bounded HTML panel owns accessibility, properties, and action dispatch:

const nodeId = graph.pick(event.clientX, event.clientY);
const presentation = nodeId ? graph.getNodePresentation(nodeId) : null;

graph.setSelection(nodeId ? [nodeId] : []);
details.render(presentation);

Actions remain serializable descriptors. The demos interpret their IDs in the host and visibly update selection or application status; graphraum never accepts callbacks or framework components in graph data.

Continue with Node & edge presentation for the full contract or API reference for exact signatures.