Introduction

React Flow is a library for building node-based applications. These can be anything from simple static diagrams to data visualisations to complex visual editors. You can implement custom node types and edges and it comes with components like a minimap and viewport controls out of the box.

If you’re looking to get started quickly check out the quickstart guide, otherwise, let’s take a look at React Flow’s key features.

Key Features

👌 Easy to use: React Flow already 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 in to 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 sures 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 customisable 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 funtionality 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 .

Moving on

Now that you have a better idea of what React Flow is all about, the next page will walk through some common terminology that you will see repeated throughout the documentation: nodes, edges, and handles.