Wire your ideas with React Flow

Highly customizable React.js library for building node-based editors and diagrams.

Documentation
Examples

Getting Started

React Flow enables you to build node-based applications. From simple static diagrams to complex interactive editors.

React Flow is published on npm. You can install it via:
npm install --save react-flow-renderer
A flow consists of nodes and edges (or just nodes). Together we call them elements. You can pass a set of elements as a prop to the ReactFlow component. A simple flow could look like this:
import React from 'react';
import ReactFlow from 'react-flow-renderer';
const elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
// you can also pass a React Node as a label
{ id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
];
export default () => <ReactFlow elements={elements} />;
You can find a detailed entry point in the docs or read our blog post to get started.

Feature-rich

React Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls, several event handlers and more.
Documentation

Customizable

You can create your own node and edge types or just pass a custom style. You can implement custom UIs inside your nodes and add functionality to your edges.
Documentation

Additional Components

React Flow includes a MiniMap, Controls, Background and a FlowProvider you can use to access internal state outside the ReactFlow component.
Documentation

Built with React Flow

You can do a wide range of applications with React Flow. Ranging from music synthesizers and study planners to visualizations of neural nets.

react flow logo

Your Project here

Let us know if you made something with React Flow.
react flow logo

Your Project here

Let us know if you made something with React Flow.

Do you want to build a data driven application?

Reach out and contact us. We’re happy to chat and always excited for a new data driven challenge.

Contact us
View other work