Introduction

React Flow is a library for building node-based applications. Whether you’re creating simple static diagrams, immersive data visualizations, or complex visual editors, React Flow offers extensive customizability for your nodes and edges, and it comes with handly built-in components to get you quickly up and running.

React Flow in 60 seconds

Key Features

👌 Easy to use: React Flow comes with many of the features you want out of the box. Dragging nodes around, zooming and panning, selecting multiple nodes and edges, and adding/removing edges are all built-in.

🎨 Customizable: React Flow supports custom node types and edge types. Because custom nodes are just React components, you can implement anything you need: you’re not locked into the built-in node types. Custom edges let you add labels, controls, and bespoke logic to node edges.

⚡️ Fast rendering: React Flow only renders nodes that have changed, and makes sure only those that are in the viewport are displayed at all.

🧩 Built-in plugins: We ship React Flow with a few plugins out of the box:

• The <Background /> plugin implements some basic customizable background patterns.
• The <MiniMap /> plugin displays a small version of the graph in the corner of the screen.
• The <Controls /> plugin adds controls to zoom, center, and lock the viewport.
• The <Panel /> plugin makes it easy to position content on top of the viewport.
• The <NodeToolbar /> plugin lets you render a toolbar attached to a node.
• The <NodeResizer /> plugin makes it easy to add resize functionality to your nodes.

💪 Reliable: React Flow is entirely written in TypeScript to catch bugs early and make fixes easy. For everything else, we have a robust cypress test suite so you can depend on React Flow with confidence.