xyflow/README.md

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

---

The xyflow mono repo

The xyflow repository is the home of four packages:

• React Flow v11 reactflow v11 branch
• React Flow v12 (not published yet) packages/react
• Svelte Flow @xyflow/svelte packages/svelte
• Shared helper library @xyflow/system packages/system

We just moved repositories from the @wbkd org to this one. React Flow v11 will remain on the v11 branch. When we have a stable v12, the package name of React Flow will change from reactflow to @xyflow/react.

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 the and use the libraries you can see it here:

React Flow basic usage

Installation

npm install reactflow

Basic usage

import { useCallback } from 'react';
import ReactFlow, {
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} 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 (
  <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>

The xyflow team

React Flow and Svelte Flow are maintained by the team behind xyflow. 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.

• Christopher • Twitter • Github
• Hayleigh • Twitter • Github
• John • Website • Mastodon
• Moritz • Twitter • Github
• Peter • Github

License

React Flow and Svelte Flow are MIT licensed.