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