VisualFlowNodes and Edges
Shape, position and connect elements, and react to changes as users edit the graph.
Beginner · 7 min read · Updated Oct 31, 2026
Node anatomy
Every node needs an id, a position and a data object. Optional fields such as type, style, draggable and selectable control behaviour.
Handling changes
Use the applyNodeChanges and applyEdgeChanges helpers to merge user interactions back into state.
tsx
const onNodesChange = useCallback(
(changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
[],
);
const onConnect = useCallback(
(conn) => setEdges((eds) => addEdge({ ...conn, animated: true }, eds)),
[],
);Edge types
Built-in edges include default (bezier), straight, step and smoothstep. Pick smoothstep for orthogonal, engineering-style diagrams.