WireDiagram
Playground
Examples

Examples hub

A staged path from first embed to production shell, configuration, and design integration.

How to use these examples

Every example keeps WireDiagram as the durable state. Runtime UI such as viewport, selection, inspector state, option catalog functions, and React callbacks stay outside persisted JSON.

First embed

Install, import package CSS, and render a stable surface.

Package CSS
Verify the package stylesheet is enough for a packed consumer.WireViewerstyles.css
Viewer and editor wrappers
Use the thin wrapper components for common embed cases.WireViewerWireEditor
Layouts
Render the same nodes in multiple layout directions.WireCanvaslayout

Product shell

Own state, persistence, and app-specific chrome around Wire.

Custom shell
Compose provider, canvas, node list, and inspector yourself.WireProviderWireCanvasWireInspector
Controlled state
Keep WireDiagram in app state and persist changes from onChange.WireWorkspaceonChange
Read-only inspector
Pair a read-only diagram with inspection UI.WireViewerWireInspector

Configuration

Use options, inspection, and event handling without changing persisted contracts.

Options
Render typed option controls from WireOptionCatalog.WireOptionCatalogWireOptionPanel
Edge inspection
Inspect explicit edges with stable ids, labels, handles, and style.WireEdgeWireInspector
Click modal
Open option controls from node events.onEventWireOptionPanel
Click sidebar
Use event source labels to drive a persistent side panel.onEventWireOptionPanel

Design integration

Adapt visuals and accessibility while keeping WireDiagram durable.

Theming
Use colorMode, classNames, and CSS variables.colorModeclassNames
Accessibility
Keyboard and inspector behavior for repeated use.keyboardA11yWireCanvas
Custom node cards
Replace card rendering without changing durable data.renderNodeWireNodeCardView

Coverage

The examples manifest maps every routed example and root JSON example to its stage, route, APIs, expected validation warnings, render modes, LLM exposure, and snippet source. Release checks should fail when a route or file drifts from that manifest.

NextProduction guide