Wire Your Ideas with React Flow

A customizable React component for building node-based editors and interactive diagrams

22.1k

Github Stars

627k

Weekly Installs

MIT

License

React Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by subscribing to React Flow Pro.

React Flow Pro

Getting Started with React Flow

Make sure you’ve installed npm, pnpm or yarn. Then you can install React Flow via:

npm install reactflow

Ready out-of-the-box

The things you need are already there: dragging nodes, zooming, panning, selecting multiple nodes, and adding/removing elements are all built-in.

Get started

Powered by us.
Designed by you.

React Flow nodes are simply React components, ready for your interactive elements. We play nice with Tailwind and plain old CSS.

Custom nodes guide

All the right plugins

Make more advanced apps with the Background, Minimap, Controls, Panel, NodeToolbar, and NodeResizer components.

Read more
React Flow mini map

Used By

zapierstripecarto workflowscloserailwayretooldoublelooponesignal

Project Showcase

Used by thousands of people

From solo open-source developers, to companies like Stripe and Typeform. We’ve seen the library used for data processing tools, chatbot builders, machine learning, musical synthezisers, and more.

See all projects
Stripe Docs
DoubleLoop
TypeForm
  1. Layouting example for Entitree Flex

    Hayleigh Thompson –
    Developer Relations

    We add a new layouting algorithm to our example lineup with the addition of Entitree Flex. This algorithm is similar to d3-hierarchy but allows for sibling nodes as well as nodes with different dimensions.

  2. Devtools and a fresh overview example

    Moritz Klack –
    xyflow

    Sometimes it's hard to understand what's going on in your React Flow app. That's why we've added a devtools section to the docs. It's a copy pastable example that explains how you can get some insights into your React Flow app. We also published a revised version of the feature overview example.

  3. We finally made an editable edge Pro example

    Peter Gorzo –
    xyflow
    Hayleigh Thompson –
    Developer Relations

    One of the most common questions we get from users is how to let users edit an edge's path. This Pro example demonstrates how to do exactly that, by cutting up an edge into segments that can be freely moved around.

A project by the xyflow team

We are Christopher, Hayleigh, John, Peter and Moritz. We are the maintainers of React Flow, Svelte Flow, and the communities around them