Workflow Canvas

Work in Progress

Canvas component for building node-based workflows with drag-and-drop, pan/zoom, minimap, and controls. Perfect for automation builders.

Note: This component is currently under development. Some features may not work as expected. We're actively working on improvements and will update the documentation once stable.

Preview

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

Installation

Terminalbash

Usage

Reacttsx

Examples

Simple Workflow

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

tsx

Read-only Mode

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

tsx

Without Minimap/Controls

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

tsx

With Custom Event Handlers

Props

Name	Type	Default	Description
`initialNodes`	`Node[]`	`[]`	Initial nodes for the workflow
`initialEdges`	`Edge[]`	`[]`	Initial edges/connections between nodes
`nodeTypes`	`Record<string, React.ComponentType<any>>`	—	Custom node type components
`onNodesChange`	`OnNodesChange`	—	Callback when nodes change (move, select, delete)
`onEdgesChange`	`OnEdgesChange`	—	Callback when edges change
`onConnect`	`OnConnect`	—	Callback when nodes are connected
`readOnly`	`boolean`	`false`	Whether the canvas is read-only (no editing)
`showMiniMap`	`boolean`	`true`	Show the minimap navigation
`showControls`	`boolean`	`true`	Show zoom and fit view controls
`showBackground`	`boolean`	`true`	Show background pattern
`backgroundVariant`	`'dots' \| 'lines' \| 'cross'`	`'dots'`	Background pattern variant
`isRTL`	`boolean`	`false`	Whether text direction is RTL
`className`	`string`	—	Additional CSS classes
`fitViewOptions`	`FitViewOptions`	`{ padding: 0.2 }`	Options for fitting the view
`defaultEdgeOptions`	`DefaultEdgeOptions`	`{ animated: false, type: 'smoothstep' }`	Default options for edges