Wire
Playground

Wire React Components

A typed diagram schema, a layout engine, and a small set of React components that render the same WireDiagram as an interactive canvas, a static SVG, or a Mermaid string.

Get startedInstall & setupAdd the package, point Tailwind at the source, render your first canvas.ConceptsHow Wire thinksDiagram JSON, the action reducer, decoupled events, typed options, render contracts.CustomizeMake it yoursReplace node cards, list rows, and group frames without touching canvas internals.

What you get

The package ships a small surface organized around one canonical WireDiagram. Apps import Wire-level props; the canvas engine stays internal.

  • Provider & canvas. WireProvider holds diagram, selection, viewport, validation, mode, and history. WireCanvas renders it through the native canvas with view/edit modes, fitView, background, and minimap toggles.
  • Higher-level shells. WireWorkspace bundles provider + sidebar + canvas + inspector for the “drop in and ship” case. WireViewer is read-only; WireEditor is a thinner editable wrapper.
  • Typed options. Declare a WireOptionCatalog once; WireOptionPanel and WireInspector render the form and patch the diagram via node.patch actions.
  • Decoupled events. Five event types — node.click, node.inspect, edge.click, selection.change, pane.click — each carrying a source label so you can tell a canvas click from a node-list click.
  • Hooks. useWireDiagram, useWireSelection, useWireViewport, useWireMode, useWireHistory, useWireDispatch, and friends — read or drive any slice of provider state from your own components.
  • Static renders. renderToSvg and toMermaid from @aigentive/wire-core emit the same diagram as a self-contained SVG string or a Mermaid flowchart.
  • Theme. Class-based dark mode (<html class="dark">); no provider, no context, just a Tailwind variant.

Two authoring paths

Everything compiles down to the same canonical JSON. Pick the path that fits the surface you’re building.

  • JSON. Hand-write a WireDiagram object — or have an LLM, the CLI, or the MCP server emit one — and render it through WireProvider + WireCanvas. This is what every page under Examples does.
  • JSX facade. Compose the diagram as React children of <Flow> using <TriggerNode>, <AINode>, <ConditionNode>, etc. The walker compiles the tree to canonical JSON; the same renderer takes it from there.

Where to render

The same diagram has three rendering surfaces. The toolbar on every card in Layouts flips between them live.

  • Interactive canvas. WireCanvas for pan/zoom, selection, edits, and click events.
  • Static SVG. renderToSvg(diagram) returns a self-contained SVG string — server-renderable, embeddable in markdown, downloadable as a file.
  • Mermaid. toMermaid(diagram) returns a flowchart source — paste into any Mermaid renderer or check it into a README.

Common tasks

Custom node renderers
Three example surfaces from the same context object.
Listen to clicks
Five event types, two built-in emitters, one onEvent.
Layouts
Router, vertical, and horizontal flows from the same nodes.
Click → modal
Surface params in a dialog using onEvent + WireOptionPanel.