JSPM

Key Features

• Easy to use: Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
• Customizable: Different node and edge types and support for custom nodes with multiple handles and custom edges
• Fast rendering: Only nodes that have changed are re-rendered and only those in the viewport are displayed
• Hooks and Utils: Hooks for handling nodes, edges and the viewport and graph helper functions
• Plugin Components: Background, MiniMap and Controls
• Reliable: Written in Typescript and tested with cypress

Installation

The easiest way to get the latest version of React Flow is to install it via npm:

npm install react-flow-renderer

Quick Start

This is only a very basic usage example of React Flow. To see everything that is possible with the library, please refer to the website for guides, examples and API reference.

import ReactFlow, { MiniMap, Controls } from 'react-flow-renderer';

function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
    >
      <MiniMap />
      <Controls />
    </ReactFlow>
  );
}

Before you start you need to install the React Flow dependencies via npm install and the ones of the examples cd example && npm install.

If you want to contribute or develop custom features the easiest way is to start the dev server:

npm start

and the example app via:

cd example && npm start 

The example app serves the content of the example folder and watches changes inside the src folder. The examples are using the source of the src folder.

Testing

Testing is done with cypress. You can find the tests in the integration/flow folder. In order to run the tests do:

npm run test

Attribution

Since v10.0.0 the React Flow renderer includes a small attribution that links to the React Flow website. It is only allowed to remove the attribution if you are subscribed to one of the pro plans. You can find more information on the attribution guidelines in our FAQs. A subscription also provides more features such as a private Discord channel with the creators of React Flow.

Maintainers

React Flow is developed and maintained by webkid, a web development agency with the focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us:

• Moritz Klack • Twitter • Github
• Christopher Möller • Twitter • Github

You can also use our contact form or join the React Flow Discord Server.

Community Packages

• useUndoable - Hook for undo/redo functionality with an explicit React Flow example
• react-flow-smart-edge - Custom edge that doesn't intersect with nodes
• Feliz.ReactFlow - Feliz React Bindings for React Flow

Credits

React Flow was initially developed for datablocks, a graph-based editor for transforming, analyzing and visualizing data in your browser. Under the hood, React Flow depends on these great libraries:

• d3-zoom - used for zoom, pan and drag interactions with the graph canvas
• react-draggable - used for making the nodes draggable
• zustand - internal state management

License

React Flow is MIT licensed.