xyflow

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 install the latest version of React Flow is to install it via npm:

npm install react-flow-renderer

Usage Example

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>
  );
}

Local Development

@todo

Maintainers

React Flow is developed and maintained by webkid, a data visualization studio 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.