15 Advanced React Flow Interactions, Recreated in an Open Workbench
These examples compress the trial-and-error part of building a canvas editor into readable, reusable reference code for React Flow applications. The layout and collaboration cases show where hidden state and coordinate conversions live, which matters as soon as a diagram feature moves beyond static nodes and edges.
Fifteen interaction examples from React Flow Pro now run together in one open workbench built on Next.js 16, React 19, TypeScript, and the official @xyflow/react package. It covers node position animation, flowchart shapes, WASM obstacle-avoidance routing, editable edges, alignment guides and snapping, copy/paste, undo/redo, grouping, expand/collapse, automatic layout, force-directed layout, dynamic tree layout, freehand drawing, and collaborative graph, form, cursor, and connection-draft synchronization.
Layout handling separates graph structure from geometry. Dynamic tree layout finds a parent through incoming edges, computes target positions with D3's stratify and tree, and uses a D3 timer to interpolate over roughly 300ms; rapid successive actions stop the old animation before it overwrites the new layout. Auto layout integrates Dagre, D3 Hierarchy, and ELK. Several surrounding steps are required: wait for node size measurement, convert Dagre's center coordinates to top-left positions, organize multiple trees under a virtual root, merge ELK's asynchronous results by node ID, and update edge endpoints when the layout direction changes. Force layout maps nodes to particles with repulsion, edge, and centering forces, and pins a particle with fx and fy while it is dragged.
Edge routing uses libavoid-js's WASM build, treating node rectangles as obstacles and Handles as directed pins, then writes computed bend points back into edge data. That write-back itself triggers another state update, a detail easy to miss. Collaboration uses Yjs + y-websocket and separates shared graph data (Y.Doc Maps), temporary online state (Awareness), and local view state (projection cache). A built-in backend creates the first node, clients wait for the first sync before showing the canvas, and Playwright regression tests cover browser isolation, form and graph sync, room isolation, initialization, and reconnection. Each example has its own Provider, graph state, and mutable cache, and the package exposes a unified entry point, so a Next.js app can lazy-load a single example through a dynamic import.
Writing routing results back into edge data triggers another state update, so an auto-router that recomputes paths on every edge change risks feedback loops unless it tags or batches those writes.
Auto layout stays a pipeline even after a layout algorithm returns: node size measurement, coordinate conversion, asynchronous merging, and edge port updates have to be sequenced before the result matches the canvas.
Separating shared graph data, ephemeral awareness, and local view state makes collaborative editing manageable; the same split keeps each user's selection and measured sizes out of the shared document while cursors can disappear on disconnect.
The examples stay close to official React Flow Pro behavior, which makes them useful study material; production use still requires mapping them onto each product's data model and interaction rules.