react-flow: A TypeScript repository from wbkd

A highly customizable React component for building interactive graphs and node-based editors.

🚀 Getting Started | 📖 Documentation | 📺 Examples | ☎️ Discord | 💎 React Flow Pro

🚨 Upcoming Changes

The main branch (v11) is now in a feature freeze. The next version is being developed in the xyflow branch. Find out more about the those changes here.

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

Commercial Usage

Are you using React Flow for a personal project? Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟

Are you using React Flow at your organization and making money from it? Awesome! We rely on your support to keep React Flow developed and maintained under an MIT License, just how we like it. You can do that on the React Flow Pro website or through Github Sponsors.

You can find more information in our React Flow Pro FAQs.

Installation

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

npm install reactflow

Quickstart

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 the full API reference.

import { useCallback } from 'react';
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';

import 'reactflow/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];

const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);

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

export default Flow;

Development

Before you can start developing please make sure that you have pnpm installed (npm i -g pnpm). Then install the dependencies using pnpm: pnpm install.

Run pnpm build once and then you can use pnpm dev for local development.

Testing

Testing is done with cypress. You can find the tests in the examples/vite-app/cypress folder. In order to run the tests do:

pnpm test

Maintainers

React Flow is the full-time project of Moritz and Christopher of webkid, based in Berlin. If you need help or want to talk to us about a collaboration, reach out through our contact form or by joining the React Flow Discord Server.

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

Any support you provide goes directly towards the development and maintenance of React Flow, allowing us to continue to operate as an independent company, working on what we think is best for React Flow as an open-source library.

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 the browser. Under the hood, React Flow depends on these great libraries:

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

License

React Flow is MIT licensed.

wbkd/react-flow