xyflow
Enrichment pendingReact Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customi
GraphCanon updated today · GitHub synced today
Verify the decision
Maintenance and security
Full trust report- Maintenance
- Very active (0d since push)
- As of today
- Provenance
- Not a fork · Organization account
- As of today
- Security (OSV)
- No lockfile
- As of today
Public GitHub metadata and optional OSV scans. Signals, not a guarantee. Trust methodology.
Install
npm install xyflowSimilar tools
Same-category neighbours. No typed graph edges are catalogued for this tool yet.
Evidence and technical details
Sourced facts, taxonomy, compatibility claims, README excerpt, and machine-readable endpoints.
Overview
React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
Capability facts
- MCP server
- No MCP server detected
Source: repo_scan · Jul 15, 2026
- Languages
- typescript, javascript
Source: github.language+package.json · Jul 15, 2026
Categories
Compatibility
Sourced claims from the README excerpt - not unsourced marketing copy.
Source: README excerpt (regex_v1, Jul 15, 2026)
npm install @xyflow/reactSource link
Tags
README
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:
React Flow basic usage
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;
Svelte Flow basic usage
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>
License
React Flow and Svelte Flow are MIT licensed.
For agents
This page has a .md twin and JSON over the API.