Implements React Flow node-based UIs correctly using @xyflow/react. Use when building flow charts, diagrams, visual editors, or node-based applications with React. Covers nodes, edges, handles, custom components, state management, and viewport control.

React Flow Implementation Quick Start Implementation gates Run these in order; do not skip ahead on “looks fine.” 1. Styles on the page — Pass if the bundle that renders <ReactFlow / imports @xyflow/react/dist/style.css (or equivalent CSS pipeline) so nodes/edges are visible and hit targets match visuals. 2. useReactFlow boundary — Pass if every caller of useReactFlow() is a descendant of <ReactFlowProvider that wraps the same tree as <ReactFlow / (or you have intentionally split stores and can name both roots). 3. Stable nodeTypes / edgeTypes — Pass if those maps are module scope constants or useMemo with stable deps—not a new { ... } literal each render in the component that renders <ReactFlow / . 4. Handles match edges — Pass if for nodes with multiple Handle id s, every edge that must land on a specific handle sets sourceHandle / targetHandle accordingly (or you accept default handle resolution deliberately). See [ADDITIONAL COMPONENTS.md](ADDITIONAL COMPONENTS.md) for MiniMap, Controls, Background, NodeToolbar, and NodeResizer patterns. Core Patterns TypeScript Types Custom Nodes Multiple Handles Custom Edges State Management Controlled (Recommended for Production) Using useReactFlow Updating Node Data Viewport & Fit View Connection Validation Common Props Reference CSS Classes for Interaction Class Effect nodrag Prevent dragging when clicking element nowheel Prevent zoom on wheel events nopan Prevent panning from element nokey Prevent keyboard events (use on inputs) Additional Components See [ADDITIONAL COMPONENTS.md](ADDITIONAL COMPONENTS.md) for MiniMap, Controls, Background, NodeToolbar, NodeResizer.

react-flow-implementation