Wire your ideas with React Flow

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

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.

Botfront - Conversational platform

https://botfront.io/

Circles - Visual degree planner

https://circles360.github.io/

Your Project here

Let us know if you made something with React Flow.

Custom Support for Your Project

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

View other work

If you are already using react flow for a commercial project
we would really appreciate a sponsorhip