xyflow/README.md

Wire Your Ideas With React Flow!

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

🚀 Getting Started | 📖 Documentation | 📺 Examples | ☎️ Discord

---

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 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.