React Flow

Highly customizable library for building an interactive node-based UI, workflow editor, flow chart or static diagram
Alternatives To React Flow
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Flow15,9527012 hours ago259September 14, 202283mitTypeScript
Highly customizable library for building an interactive node-based UI, workflow editor, flow chart or static diagram
Gojs6,87511083a month ago243September 12, 2022otherHTML
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Vue Chartjs5,1431,2381993 days ago87May 27, 202221mitTypeScript
📊 Vue.js wrapper for Chart.js
Joint3,928271448 days ago46April 08, 202250mpl-2.0JavaScript
A proven SVG-based JavaScript diagramming library powering exceptional UIs
Ml Glossary2,710
5 months ago19mitPython
Machine learning glossary
Mermaid Live Editor2,535
8 hours ago33mitTypeScript
Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.
React Flow Chart1,2878126 months ago14June 28, 2020100mitTypeScript
🌊 A flexible, stateless, declarative flow chart library for react.
6 years ago3apache-2.0Java
Android view (widget) for rendering radial diagrams
Grafana Diagram394
4 months ago59apache-2.0TypeScript
A Grafana plugin to visualize metrics in a diagram using flow charts, gantt charts, sequence diagrams, or class diagrams
Flowy Vue36015 months ago12July 08, 202037mitVue
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.
Alternatives To React Flow
Select To Compare

Alternative Project Comparisons

readme-header-dark readme-header

GitHub License MIT npm downloads GitHub Repo stars GitHub release (latest by date)

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

Getting Started | Documentation | Examples | Discord | React Flow Pro

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.


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

npm install reactflow


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, {
} 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 (
      <MiniMap />
      <Controls />
      <Background />

export default Flow;


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


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

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


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


React Flow is MIT licensed.

Popular Diagram Projects
Popular Chart Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.