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.
Custom Support for Your Project
If you want to build something with react-flow and need custom development services reach out and contact us.
If you are using react flow for a commercial project we would really appreciate a sponsorhip