Flow Canvas

Overview

Flow Canvas is a thin wrapper around React Flow (@xyflow/react). It ships with:

a draggable FlowPanel to add nodes by drag or click
custom nodeTypes and edgeTypes with labeled handles
a DataEdge that can render a value from the source node’s data
desktop-only MiniMap and Controls (auto-hidden on mobile)

You manage nodes and edges with React Flow’s controlled hooks and optional drag-to-create behavior.

Exports

Canvas: FlowCanvas – ready-to-use canvas with initial nodes/edges, drag-drop, minimap, controls
Panel: FlowPanel – small launcher palette for nodes plus toggles for minimap/controls

Nodes: BaseNode, LabeledHandle, NodeHeader, NodeHeaderTitle, NodeHeaderActions, NodeHeaderAction, NodeHeaderMenuAction, NodeHeaderDeleteAction
Edges: DataEdge (reads a key from the source node’s data), edgeTypes
State: initialNodes, initialEdges, nodeTypes

Usage

Drop the canvas anywhere in your page. It enables pan/zoom, selection, and fit-view. The panel appears in the top-right.

'use client';
import * as React from 'react';
import { FlowCanvas } from '@/components/FlowCanvas';

export default function Demo() {
  return (
    <div className="h-[600px] w-full rounded-2xl overflow-hidden">
      <FlowCanvas />
    </div>
  );
}

DataEdge

DataEdge accepts an optional data.key. When present, the edge renders that field from the source node’s data as an inline label. Hover replaces the label with a small delete control. You can switch the path style via data.path (bezier, smoothstep, step, or straight).

Drag and drop

The panel lets you add nodes by dragging from the palette or clicking a button. Drag uses the standard dataTransfer key (application/reactflow), then converts screen position to flow coordinates with reactFlowInstance.screenToFlowPosition.

Mobile behavior