xyflow
xyflow is a monorepo of open-source libraries (React Flow and Svelte Flow) for building interactive node-based UIs such as flowcharts, diagrams, and workflow editors. It provides draggable nodes, connectable edges, and built-in components like minimaps, controls, and backgrounds, all heavily customizable.
Embed badge
[](https://opensources.dev/resource/xyflow)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNot yet scanned
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install xyflowOur analysis
xyflow is the home for React Flow and Svelte Flow — libraries for rendering and interacting with node-and-edge graphs (flowcharts, pipelines, no-code editors). It ships ready-made components (nodes, edges, minimap, controls, background) plus a shared @xyflow/system core.
When to use xyflow
Choose it when you need to build interactive node-based interfaces: visual workflow/pipeline builders, flowchart editors, dependency or data-lineage diagrams, no-code/low-code tools, or ML/AI agent graph editors. Strong fit when you already use React or Svelte and want fast setup with deep customization.
When not to
Avoid it for large-scale static graph analytics or scientific network rendering of tens of thousands of nodes (use Cytoscape.js or sigma.js with WebGL). It's also overkill for simple static diagrams that could be a plain SVG, and it's tied to React or Svelte rather than framework-agnostic.
Strengths
- Mature, widely adopted (37k+ stars) with strong docs and learning resources
- Highly customizable nodes, edges, and handles while still working out-of-the-box
- MIT licensed with first-class TypeScript support
- Supports both React and Svelte from a shared core, reducing concept drift across frameworks
- Includes practical built-ins (minimap, zoom/pan controls, background, fitView)
Trade-offs
- DOM/SVG-based rendering can struggle with very large graphs versus canvas/WebGL alternatives
- Some advanced features and examples are gated behind the paid React Flow Pro offering
- Tied to React or Svelte — no vanilla-JS or other framework bindings
- Managing nodes/edges state and controlled updates has a learning curve for complex apps
Maturity
Production-ready and actively maintained by the dedicated xyflow team, using changesets-based releases. React Flow is the flagship with a large ecosystem; Svelte Flow is newer but shares the same battle-tested core. A commercial Pro tier funds ongoing maintenance.
Powerful open source libraries for building node-based UIs with React or Svelte. Ready out-of-the-box and infinitely customizable.
React Flow · Svelte Flow · React Flow Pro · Discord
The xyflow mono repo
The xyflow repository is the home of four packages:
React Flow 12
@xyflow/reactpackages/reactReact Flow 11
reactflowv11 branchSvelte Flow
@xyflow/sveltepackages/svelteShared helper library
@xyflow/systempackages/system
Commercial usage
Are you using React Flow or Svelte 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 or Svelte Flow at your organization and making money from it? Awesome! We rely on your support to keep our libraries developed and maintained under an MIT License, just how we like it. For React Flow you can do that on the React Flow Pro website and for both of our libraries you can do it through Github Sponsors.
Getting started
The best way to get started is to check out the React Flow or Svelte Flow learn section. However if you want to get a sneak peek of how to install and use the libraries you can see it here:
Installation
npm install @xyflow/react
Basic usage
import { useCallback } from 'react';
import {
ReactFlow,
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from '@xyflow/react';
import '@xyflow/react/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 (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
>
<MiniMap />
<Controls />
<Background />
</ReactFlow>
);
}
export default Flow;
Installation
npm install @xyflow/svelte
Basic usage
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,
Background,
BackgroundVariant,
MiniMap,
} from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css'
const nodes = writable([
{
id: '1',
type: 'input',
data: { label: 'Input Node' },
position: { x: 0, y: 0 }
},
{
id: '2',
type: 'custom',
data: { label: 'Node' },
position: { x: 0, y: 150 }
}
]);
const edges = writable([
{
id: '1-2',
type: 'default',
source: '1',
target: '2',
label: 'Edge Text'
}
]);
</script>
<SvelteFlow
{nodes}
{edges}
fitView
on:nodeclick={(event) => console.log('on node click', event)}
>
<Controls />
<Background variant={BackgroundVariant.Dots} />
<MiniMap />
</SvelteFlow>
Releases
For releasing packages we are using changesets in combination with the changeset Github action. The rough idea is:
create PRs for new features, updates and fixes (with a changeset if relevant for changelog)
merge into main
changeset creates a PR that bumps all packages based on the changesets
merge changeset PR if you want to release to Github and npm
Built by xyflow
React Flow and Svelte Flow are maintained by the xyflow team. If you need help or want to talk to us about a collaboration, reach out through our contact form or by joining our Discord Server.
License
React Flow and Svelte Flow are MIT licensed.