Integrate Restormel Graph with Web Components

Use this guide when your host app is not Svelte 5 — React, Vue, plain HTML, Astro static pages, or embedded docs. For SvelteKit-first wiring, see SvelteKit integration.

Install

pnpm add @restormel/graph-core @restormel/graph-elements

Package README: packages/graph-elements/README.md.

Register the canvas

Import once so <rg-graph-canvas> is defined:

import "@restormel/graph-elements";

Plain HTML example

<script type="module">
  import '@restormel/graph-elements';
  const el = document.querySelector('rg-graph-canvas');
  el.nodes = [
    { id: 's1', type: 'source', label: 'Source' },
    { id: 'c1', type: 'claim', label: 'Claim' },
  ];
  el.edges = [{ from: 's1', to: 'c1', type: 'contains' }];
  el.addEventListener('rg-node-select', (e) => console.log(e.detail.nodeId));
</script>
<rg-graph-canvas width="800" height="600"></rg-graph-canvas>

Set object props (nodes, edges) on the element from JavaScript — same pattern as @restormel/keys-elements. React hosts should use a ref and assign after mount.

Layout REST (optional)

The canvas runs computeLayout internally. For server-side or precomputed positions, call POST /graph/v1/layout with Contract v0 GraphData inline:

curl -sS -X POST "https://restormel.dev/graph/v1/layout" \
  -H "Content-Type: application/json" \
  -d '{
    "width": 800,
    "height": 600,
    "snapshot": {
      "nodes": [
        { "id": "s1", "type": "source", "label": "Source" },
        { "id": "c1", "type": "claim", "label": "Claim" }
      ],
      "edges": [{ "from": "s1", "to": "c1", "type": "contains" }]
    }
  }'

Response includes layout.positions keyed by node id. Hosted snapshot reads (GET /graph/v1/snapshots/{id}) return 404 until Phase 6 operator persistence.

CSS tokens

rg-graph-canvas ships a minimal token sheet inside shadow DOM. Override host tokens on the element or a parent if your app already defines SOPHIA-compatible --color-* variables.

Events

• rg-node-select — detail { nodeId }
• rg-selected-node-change — detail { nodeId }

Maintenance mode

@restormel/ui-graph-svelte remains available for existing Svelte consumers (bugfix-only until Phase 7). SOPHIA adopts Web Components in Phase 8.