← ClaudeAtlas

react-flow-expertlisted

Use when building, extending, or debugging node-based UIs with React Flow / Svelte Flow / @xyflow — custom nodes & edges, handles & connections, layouting, viewport/coordinate math, store & state management, edge paths, or any xyflow internals.
dyammarcano/react-flow-expert · ★ 0 · Web & Frontend · score 72
Install: claude install-skill dyammarcano/react-flow-expert
# React Flow Expert Authoritative, source-verified knowledge for `@xyflow/react` **12.10.2**, `@xyflow/svelte` **1.5.2**, and the shared `@xyflow/system` **0.0.76** core. This file is the always-loaded orientation; depth lives in `reference/` — open the specific doc rather than guessing. ## Core mental model **Three packages, one engine.** `@xyflow/system` is a headless, framework-free core: pure geometry/coordinate functions plus D3-based imperative controllers (`XYPanZoom`, `XYDrag`, `XYHandle`, `XYResizer`, `XYMinimap`) and all shared TypeScript types. `@xyflow/react` (Zustand store) and `@xyflow/svelte` (Svelte 5 runes store) are thin bindings that hold reactive state, render a fixed DOM tree, and attach the system controllers to DOM nodes. Behavior is identical across frameworks because the algorithms live in `system`, not the wrapper. (`reactflow` v11 is the legacy React-11 package, out of scope.) **The store + two representations.** Each `<ReactFlowProvider>` (auto-mounted by `<ReactFlow>` if absent) owns one store. It holds two parallel views of your graph: your plain **user array** (`{ id, position, data }`) and a normalized **internal lookup** (`nodeLookup`/`edgeLookup`/`parentLookup`/`connectionLookup` — Maps of `InternalNode`s with measured dimensions, `internals.positionAbsolute`, z-index, handle bounds). `adoptUserNodes` rebuilds the lookups from the user array on every `setNodes`; you never write the lookups directly. Components subscribe via narrow `useSto