1 viewer
Component · Visualization
NodeGraph
Compatibility wrapper for simple source-target node graphs — each edge is a 2-member hyperedge through the same SSR primitive.
- Category
- Visualization
- Slots
- 6
- States
- 3
- Writer
- Shared
Preview
- Client Intent
- Connection Gateway
- CRE8VM Sandboxed
- HyperDB Receipt
- input → router: POST
- router → vm: dispatch
- vm → hyperdb: receipt
<NodeGraph
edges={[
{ label: "POST", source: "input", target: "router" },
{ label: "dispatch", source: "router", target: "vm" },
{ label: "receipt", source: "vm", target: "hyperdb" }
]}
height={220}
nodes={[
{ id: "input", kind: "intent", label: "Client Intent", x: 40, y: 90 },
{ id: "router", kind: "gateway", label: "Connection Gateway", x: 220, y: 40 },
{ id: "vm", kind: "vm", label: "CRE8VM Sandboxed", x: 420, y: 40 },
{ id: "hyperdb", kind: "db", label: "HyperDB Receipt", x: 420, y: 140 }
]}
title="Workflow Pipeline"
/>Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-node-graph |
| toolbar | — |
| stage | — |
| node | — |
| edge | — |
| port | — |
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-visualization-placeholder | ready |
| terminal | terminal-text | planned |
| canvas | canvas-adapter | experimental |
Accessibility
Uses the NodeHypergraph adapter with relation rendering disabled by default.
- Node selection is available with Enter or Space.
- Source-target edges remain readable without pointer interaction.