React Flow

What it is

React Flow is an open source React library for building diagrams made of nodes and edges. It handles the hard parts of an interactive canvas: dragging nodes, zooming, panning, selecting, and drawing the connecting lines as things move. Each node is an ordinary React component, so it can hold any content you would put in a web page. The current package is published as @xyflow/react.

People use it for workflow builders, data pipelines, mind maps, org charts and other tools where the picture is the interface. It does not decide where nodes go on its own. You give it positions, so it is usually paired with a layout library such as Dagre or ELK. It also ships a minimap, zoom controls and a background grid you can switch on.

How I use it

• The family tree in my multi-user family tree app is an interactive React Flow canvas: drag, zoom and pan across the whole tree.
• Node positions come from Dagre automatic layout, with an extra untangle layout to reduce crossing lines in busy branches.
• Added a timeline year ruler and focus and filter tools so a large tree stays readable.
• Built with React, Vite and Tailwind, reading members and relationships from a Neo4j graph through a Node and Express API.
• Relaunched on 2026-10-12 at familytree.mervinc.com, with a fictional demo family shown to a view-only demo account.

React Flow is the right tool when people need to work with a diagram, not just look at one. A family tree is a graph that users want to move around, zoom into and click through, so I used it rather than drawing static SVG myself. It let me spend my time on the tree logic instead of on mouse handling and edge routing.

Questions