xyflow

Signal-based graph editor with Flow, Background, Controls, MiniMap, Handle, NodeWrapper, and SimpleEdge components.

#Preview

Input

Transform

Validate

Output

#Installation

bunx --bun barefoot add xyflow

#Usage

Input

Transform

Validate

Output

1"use client"23import {4  Background,5  Controls,6  Flow,7  MiniMap,8} from "@/components/ui/xyflow"910const nodes = [11  { id: "1", position: { x: 100, y: 100 }, data: { label: "Input" } },12  { id: "2", position: { x: 350, y: 50 }, data: { label: "Transform" } },13  { id: "3", position: { x: 600, y: 125 }, data: { label: "Output" } },14]1516const edges = [17  { id: "e1-2", source: "1", target: "2" },18  { id: "e2-3", source: "2", target: "3" },19]2021export function MyFlow() {22  return (23    <div className="w-full h-[420px]">24      <Flow nodes={nodes} edges={edges}>25        <Background variant="dots" gap={20} />26        <Controls />27        <MiniMap pannable zoomable />28      </Flow>29    </div>30  )31}

#Examples

#Background variants

1import { Flow, Background } from "@/components/ui/xyflow"23export function Variants() {4  return (5    <div className="grid grid-cols-3 gap-4">6      <Flow nodes={[]} edges={[]}>7        <Background variant="dots" gap={20} />8      </Flow>9      <Flow nodes={[]} edges={[]}>10        <Background variant="lines" gap={30} />11      </Flow>12      <Flow nodes={[]} edges={[]}>13        <Background variant="cross" gap={32} />14      </Flow>15    </div>16  )17}

#Custom node body

Source

Pipeline

Sink

1import {2  Flow, Background, Controls, NodeWrapper, Handle,3} from "@/components/ui/xyflow"4import { Position } from "@xyflow/system"56const nodes = [7  { id: "src", position: { x: 80, y: 100 }, data: { label: "Source" } },8  { id: "dst", position: { x: 480, y: 100 }, data: { label: "Sink" } },9]1011export function CustomNodeFlow() {12  return (13    <Flow nodes={nodes} edges={[]}>14      <Background />15      <Controls />16      {nodes.map((n) => (17        <NodeWrapper key={n.id} nodeId={n.id}>18          <div className="rounded-md border bg-card px-3 py-2">19            {n.data.label}20            <Handle type="target" position={Position.Left} nodeId={n.id} />21            <Handle type="source" position={Position.Right} nodeId={n.id} />22          </div>23        </NodeWrapper>24      ))}25    </Flow>26  )27}

#API Reference

#<Flow>

Prop	Type	Default	Description
nodes	NodeBase[]	-	Initial node list. Each node needs `id`, `position: { x, y }`, and `data: {…}`.
edges	EdgeBase[]	-	Initial edge list. Each edge needs `id`, `source`, `target`.
children	Child	-	Slot for `<Background>` / `<Controls>` / `<MiniMap>` overlays and any custom `<NodeWrapper>` content.

#<Background>

Prop	Type	Default	Description
variant	"dots" \| "lines" \| "cross"	"dots"	Pattern style.
gap	number	20	Spacing between pattern repeats (in flow coordinates, scales with zoom).
color	string	"#ddd"	Pattern color.

#<Controls>

Prop	Type	Default	Description
position	"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"	"bottom-left"	Corner the controls float in.
showZoom	boolean	true	Show zoom-in / zoom-out buttons.
showFitView	boolean	true	Show fit-view button.
showInteractive	boolean	true	Show the lock toggle.

#<MiniMap>

Prop	Type	Default	Description
pannable	boolean	true	Allow drag-to-pan inside the minimap.
zoomable	boolean	true	Allow wheel zoom on the minimap.
nodeColor	string \| (node) => string	"#e2e8f0"	Per-node fill color in the minimap.