← All components
Interaction / component
Workflow Canvas
A portable React Flow workflow with real movable nodes, curved routes, a readable inspector and bounded edge activity.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Complete example owns local task work; ControlledExample demonstrates caller-owned primitive data and actual change callbacks. Install the declared shared fonts and full OFL notice from the assets ZIP for matching typography.
- The portable Demo begins ready with Studio release and exactly three editable tasks. Run captures actual fields, strips an optional leading - followed by a space, discards blank lines, deduplicates case insensitively while preserving first spelling/order, and validates a 1–100 character name, 1–8 tasks of 1–120 characters and at most 2,000 raw task characters. All lengths use JavaScript string length.
- Local parsing, validation and export use owned zero-delay continuations. Approval waits for an explicit action; deny/cancel/edit/reset/unmount invalidate obsolete work. Editing clears approval and JSON while retaining Retry after a previous attempt. Position changes never change manifest task ordering. Appearance/Pause/Replay preserve work; Reset example restores the captured initial plan and geometry.
- Demo accepts initialPlan?: ReleaseInputs and allowArtifactCopy?: boolean (portable default true). Hosted example copying requires explicit true. Copy manifest reports the actual clipboard outcome and serializes only version 1, plan name and sequential task-N ID/title records. No upload, persistence, model metrics, AI backend or service integration.
- Canonical React Flow engine with source-derived 384px node header/title/description/content/footer hierarchy, 12px padding, 6px corners, real curved handle geometry, arrows, dashed conditional paths and radius-4 markers. No diagram screenshot, external service or arbitrary execution.
- Omitted arrays enable a local appearance sample with six stable nodes; explicit graph data remains caller-owned. Native applyNodeChanges/applyEdgeChanges power the sample and are exported by React Flow for callers. Default deletion, connections and reconnection are disabled.
- Enter or Space selects a focused node; arrows move selected editable nodes by five pixels (Shift faster); Escape clears selection. Nested inputs/actions retain their own keys. Read-only caller graphs permit inspection, pan/zoom/Fit view and a normal node list. Focus selected restores readable zoom 1.
- One motion owner updates at most twelve visible active normal-edge markers over a 2,000ms cycle. Frame deltas are capped at 64ms. Pause, reduced motion, hidden document and offscreen root stop scheduling and retain phase. Replay resets decoration only; unmount releases frames, observers and listeners.
- Scoped light/dark CSS is portable. Import the canonical entry to load React Flow CSS before component CSS. Retained React Flow attribution is part of the canvas.
React 19.2React Flow 12.10.0Modern browsers
Geist and Geist Mono — Vercel, Inc. · SIL Open Font License 1.1; complete notice retained in source and required assets.
AI Elements — Vercel, Inc. · Apache-2.0. Portable derivative; original copyright and full license included.
React Flow — xyflow · MIT. Retains canvas attribution and complete engine/transitive dependency notices.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Release planner' | Workflow heading, bounded to 200 characters. |
layout | 'horizontal' | 'vertical' | 'horizontal' | Repositions the appearance sample. In Demo, Layout restores sample coordinates while retaining the draft, approval and selection. Caller node positions and per-node data.layout stay authoritative. |
accent | string | '#9dbbff' | Six-digit hex for the active status fill. Invalid colors fall back to the default. |
showGrid | boolean | true | Shows the real viewport background grid. |
height | number | string | 520 | Canvas viewport height; accepts pixels or an explicit caller CSS height. Scoped styles need no site reset. |
nodes | readonly WorkflowGraphNode[] | undefined | Caller-owned graph nodes. Both arrays omitted enables a labelled appearance sample; a missing counterpart is empty. 100 nodes, unique nonempty IDs, positions within ±10,000; invalid/accessor-backed data displays an accessible error. Known own data is copied; text stays inert (title 200, description 500, content/footer 12,000). |
edges | readonly WorkflowGraphEdge[] | undefined | Caller-owned connections, up to 150 unique edges with existing endpoints and matching handles. Normal paths can have active decoration; conditional paths remain static dashed routes. |
selectedId | string | null | undefined | Controlled stable node selection. Omit for internal selection. Missing or removed nodes safely inspect null. |
onSelect | (id: string | null) => void | undefined | Receives node/list selection and clearing. Controlled selection waits for caller updates. |
onNodesChange | OnNodesChange<WorkflowGraphNode> | undefined | Receives actual React Flow changes. Apply with applyNodeChanges and update caller data to persist movement/measurement. Caller nodes without this callback have read-only positions; inspection still works. |
onEdgesChange | OnEdgesChange<WorkflowGraphEdge> | undefined | Receives actual typed edge changes. Apply with applyEdgeChanges; caller data stays authoritative. |
renderInspector | (node: WorkflowGraphNode | null) => ReactNode | undefined | Optional selected-node content; the default shows inert title, status, description, content, footer and current position. |
paused | boolean | false | Stops decorative markers while retaining their elapsed phase and every interaction. |
replayToken | number | 0 | Resets only marker phase. Retains selection, moved positions and caller work. |
initialPlan | ReleaseInputs | undefined | Portable Demo only: cloned editable initial plan. Omit for Studio release and three default tasks. Reset example restores this mount-time seed; changing initialPlan after mounting preserves work. |
allowArtifactCopy | boolean | true | Portable Demo only: allows copying its local JSON manifest. The hosted adapter requires explicit true. This flag does not authorize server source access. |
className | string | '' | Additional host class. |
style | CSSProperties | undefined | Caller inline styles and scoped theme variables. Parent .dark or data-theme="dark" selects the dark palette. |