{"library":"reactflow","title":"React Flow","description":"React Flow is a highly customizable React library for building interactive graphs, node-based editors, and complex flow charts. The package `reactflow` is currently at version 11.11.4, which represents the actively maintained v11 stable release line. The project maintains a consistent release cadence with frequent patch updates and less frequent minor/major releases. Key differentiators include its intuitive API for seamless zooming and panning, extensive customization options for both nodes and edges, performant rendering achieved by only re-rendering changed elements, and a rich set of hooks and utility functions for graph manipulation. It also provides essential plugin components like MiniMap, Controls, and Background out-of-the-box. The library is built with TypeScript and tested with Cypress, ensuring reliability and a robust developer experience. Users should note that the upcoming v12 release will transition to a new package name, `@xyflow/react`.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install reactflow"],"cli":null},"imports":["import ReactFlow from 'reactflow';","import { useNodesState } from 'reactflow';","import { MiniMap, Controls, Background } from 'reactflow';","import 'reactflow/dist/style.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useCallback } from 'react';\nimport ReactFlow, {\n  MiniMap,\n  Controls,\n  Background,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n} from 'reactflow';\n\nimport 'reactflow/dist/style.css';\n\nconst initialNodes = [\n  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },\n  { id: '2', position: { x: 250, y: 150 }, data: { label: 'Node 2' } },\n  { id: '3', position: { x: 100, y: 250 }, data: { label: 'Node 3' } },\n];\n\nconst initialEdges = [\n  { id: 'e1-2', source: '1', target: '2', label: 'to the next' },\n  { id: 'e2-3', source: '2', target: '3', animated: true },\n];\n\nfunction Flow() {\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n\n  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);\n\n  return (\n    <div style={{ width: '100vw', height: '100vh' }}>\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        onNodesChange={onNodesChange}\n        onEdgesChange={onEdgesChange}\n        onConnect={onConnect}\n        fitView\n      >\n        <MiniMap />\n        <Controls />\n        <Background variant=\"dots\" gap={12} size={1} />\n      </ReactFlow>\n    </div>\n  );\n}\n\nexport default Flow;\n","lang":"typescript","description":"This quickstart demonstrates a basic React Flow setup with initial nodes and edges, enabling drag, zoom, pan, and interactive connecting. It includes `MiniMap`, `Controls`, and `Background` components for enhanced user experience.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}