FlowCanvas

A node-graph editor: a dotted-grid canvas with draggable node cards connected by edges. Drag a node to move it, drag the background to pan, and use the toolbar to zoom. You render the node bodies; the canvas owns dragging, panning, edges, and the grid.

Its visual chrome is measured, but node content, edges, and layout are yours — reach for it directly for any pannable node-graph UI.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { FlowCanvas, type FlowNode } from "@crisp-ui-kit/crisp";

const [nodes, setNodes] = useState<FlowNode[]>([
  { id: "trigger", x: 20, y: 90 },
  { id: "filter", x: 320, y: 90 },
]);

<FlowCanvas
  nodes={nodes}
  onNodesChange={setNodes}
  edges={[{ from: "trigger", to: "filter" }]}
  renderNode={(n) => <MyNodeCard node={n} />}
/>;

Props

Notes

• Controlled. The parent owns nodes; a drag calls onNodesChange — so a flow and a list can be two views over the same graph.
• Interactions. Node drag / background pan use pointer events (scaled by zoom); the toolbar zooms 50–150% and resets.
• Edges are SVG beziers from each source node's right-middle to the target's left-middle, with brand connection dots.