Reference

React component API

Current public React surfaces for embedding, editing, inspecting, and styling Wire diagrams.

Contract

React components render and edit WireDiagram. Reducer changes are represented by WireAction. Do not make adapter output, selection, viewport, option catalogs, callbacks, or rendered assets the persisted app contract.

tsx

"use client";

import "@aigentive/wire-react/styles.css";
import { WireWorkspace, type WireDiagram } from "@aigentive/wire-react";

export function Editor({ diagram, onChange }: {
  diagram: WireDiagram;
  onChange: (diagram: WireDiagram) => void;
}) {
  return (
    <div style={{ height: 640 }}>
      <WireWorkspace diagram={diagram} onChange={onChange} colorMode="system" />
    </div>
  );
}

WireProvider

WireProvider owns runtime state and reducer dispatch for a subtree. Use controlled props when the app persists diagrams externally.

Prop	Type	Default	Notes
diagram	WireDiagram	—	Controlled durable diagram state.
defaultDiagram	WireDiagram	—	Initial uncontrolled diagram.
onChange	(diagram, event) => void	—	Receives updated WireDiagram and change metadata.
onAction	(action, result) => void	—	Observe each WireAction result.
onEvent	(event) => void	—	Receives node, edge, selection, and pane events.
validateOnChange	boolean	—	Refresh validation after reducer changes.
history	boolean	—	Enable provider undo/redo tracking.
selection / defaultSelection	WireSelection	—	Controlled or uncontrolled selected node and edge ids.
viewport / defaultViewport	WireViewport	—	Controlled or uncontrolled pan and zoom state.
mode / defaultMode	WireMode	—	View, edit, connect, or comment mode.
dirty / defaultDirty	boolean	—	Controlled or uncontrolled dirty state.

WireCanvas

WireCanvas renders the current provider diagram. It must be inside WireProvider unless you use a wrapper such as WireViewer, WireEditor, or WireWorkspace.

Prop	Type	Default	Notes
mode	"view" \| "edit"	"view"	Canvas interaction mode.
fitView / fitViewPadding	boolean / number	—	Initial bounds fit and padding.
showBackground / showControls / showMiniMap	boolean	—	Built-in canvas chrome.
selectOnNodeClick / inspectOnNodeClick	boolean	—	Default node-click behavior.
selectOnEdgeClick / inspectOnEdgeClick	boolean	—	Default edge-click behavior.
optionCatalog	WireOptionCatalog	—	Runtime option metadata for node forms.
renderNodeCard / renderGroup / renderEdge	renderer function	—	Custom renderers. Do not serialize renderer functions.
colorMode	"light" \| "dark" \| "system"	—	Package CSS theme mode.
unstyled / classNames / className / style	styling props	—	Style integration without requiring Tailwind.
keyboardA11y	boolean	—	Enable keyboard navigation helpers.

Shells and panels

Higher-level components compose provider, canvas, inspector, node list, validation, and option surfaces for common product workflows.

Prop	Type	Default	Notes
WireViewer	diagram: WireDiagram	—	Read-only provider + canvas wrapper. Accepts canvas props except mode.
WireEditor	diagram/defaultDiagram + canvas props	—	Editable provider + canvas wrapper. Accepts provider state props and canvas props.
WireWorkspace	diagram/defaultDiagram + shell props	—	Complete editor shell with sidebar, canvas, inspector, options, validation, and read-only mode.
WireInspector	nodeId?, edgeId?, optionCatalog?	—	Inspector tabs for configure, style, edge, JSON, and validation views.
WireOptionPanel	catalog, nodeId	—	Standalone option fields for custom sidebars or modals.
WireToolbar / WirePalette / WireNodeList / WireValidationPanel	context consumers	—	Use inside WireProvider or WireWorkspace composition.

Options

Options are runtime editor metadata. Persist the serializable values they write, not the catalog functions or React nodes. See Option catalogs for storage rules.

Prop	Type	Default	Notes
WireOptionSpec	object	—	Runtime option metadata: key, label, type, storage, section, width, options, bounds, and placeholder.
WireOptionCatalog	Record<kind \| "*", WireOptionSpec[]>	—	Runtime catalog grouped by node kind plus shared wildcard options.
storage	"node" \| "data" \| "metadata"	—	Controls where the serializable option value is written.
readWireOption / patchWireOption	helpers	—	Read and patch serializable option values according to storage rules.

NextAPI · wire-core