VisualFlowQuick Start
Render an interactive, editable flow in under five minutes.
Version v1 · Updated Oct 31, 2026
A controlled flow
The useNodesState and useEdgesState hooks give you state and change handlers in one line.
tsx
export function App() {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (c) => setEdges((e) => addEdge(c, e));
return (
<ReactFlow
nodes={nodes} edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
fitView
/>
);
}Add plugins
Drop <Background />, <Controls /> and <MiniMap /> inside the ReactFlow element.