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.

Custom Support for Your Project

If you want to build something with react-flow and need custom development services reach out and contact us.

Contact us
View other work
If you are using react flow for a commercial project we would really appreciate a sponsorhip