← All libraries

ReactFlow / XYFlow

JavaScript
↗ Official site

Drawing & diagram tools

Build node-based editors, flowcharts, and pipeline UIs.

What it does

ReactFlow lets you build interactive node graphs — like the kind you see in automation tools (n8n, Zapier) or AI pipeline builders. Nodes connect with edges, and everything is draggable.

When to use it

Use this when you need a visual workflow builder, node editor, or flowchart tool.

Real example

You're building an AI prompt chaining tool where users connect prompt nodes visually. Prompt: 'Use ReactFlow to render a canvas where each node is a prompt block with an input and output handle. Allow users to connect nodes with edges and drag them around. Store the graph in useState.'

Good to know

Requires React. XYFlow is the framework-agnostic version.

Alternatives

Install

$ npm install @xyflow/react

Use cases

node graphworkflow builderflowchartpipeline UI

Language

JavaScript

Category

Drawing & diagram tools

More in Drawing & diagram tools

Other tools in the same category

JS Konva.js

Canvas library for building interactive drawing and diagramming apps.

diagram editorimage editorcanvas app
JS Fabric.js

Powerful canvas library for image manipulation and graphic design tools.

image editordesign toolcanvas
JS tldraw

Ready-made infinite canvas SDK for building whiteboard apps.

whiteboardinfinite canvasdiagram
JS Cytoscape.js

Graph theory library for visualizing networks and relationships.

network graphknowledge graphorg chart
JS Panzoom

Add pan and zoom to any element — images, SVGs, canvases.

pan and zoomimage viewermap interface