Guide · Open source

How to use xyflow: install React Flow or Svelte Flow

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

xyflow is the team behind two open source libraries, React Flow and Svelte Flow, for building node-based interfaces such as flowcharts, graphs and visual workflow editors inside a web app. This guide shows how to install the right package, render nodes and edges on a canvas, and let users connect them. It assumes you already work on a React or Svelte project.

React Flowxyflow/xyflow · ★ 38.9k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js and npm are installed and you have a React or Svelte project.
2Install the package. Run npm install @xyflow/react for React or npm install @xyflow/svelte for Svelte.
3Import the stylesheet. Import the package's style.css file so the canvas, nodes and edges display correctly.
4Define nodes and edges. Create arrays of nodes with id, position and data, and edges with id, source and target.
5Render the flow component. Use ReactFlow or SvelteFlow and pass nodes and edges to it.
6Handle connections. In React, use onConnect with addEdge so users can draw new edges between nodes.
7Read the docs for more. Follow the learn sections on reactflow.dev or svelteflow.dev to customize nodes, edges and interactions.

What xyflow is and who it is for

xyflow publishes two libraries: React Flow for React projects and Svelte Flow for Svelte projects. You place nodes on a canvas, connect them with edges, and the library handles rendering and interaction. The README describes them as ready to use out of the box and infinitely customizable.

It is a developer library, not a finished diagram app. If you want a ready-made diagram tool with no code, or your project uses neither React nor Svelte, the README does not cover those cases.

Good fit: a flowchart or diagram editor in React, or a visual workflow tool in Svelte.
Good fit: you want a maintained library instead of building canvas interactions yourself.
Poor fit: simple static diagrams that a drawing app or a text-based tool could handle without coding.

Install React Flow or Svelte Flow

Both libraries are installed with npm. You need Node.js and npm, plus an existing React or Svelte project. Pick the package that matches your framework.

React Flow is published as @xyflow/react. Svelte Flow is published as @xyflow/svelte.

React Flow: npm install @xyflow/react
Svelte Flow: npm install @xyflow/svelte

npm install @xyflow/react

Render nodes and edges in React Flow

Define your nodes and edges as arrays. Each node needs an id, a position and data. Each edge links a source node to a target node by id. Import the stylesheet from @xyflow/react/dist/style.css so the canvas displays correctly.

The example below renders two nodes, one edge, and the MiniMap, Controls and Background components. The useNodesState and useEdgesState hooks keep the state, and addEdge adds a new edge when the user connects two nodes.

nodes: id, position {x, y} and data.label
edges: id, source and target
onConnect uses addEdge to create new edges from user connections

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;

Render nodes and edges in Svelte Flow

Svelte Flow uses the SvelteFlow component. Nodes and edges are passed as Svelte stores. The README example also sets fitView, so the canvas zooms to show all nodes, and listens for the nodeclick event.

Node types such as input and custom can be used to vary how nodes look and behave. The edge in the example has a label.

Import the stylesheet from @xyflow/svelte/dist/style.css
Wrap nodes and edges in writable stores
Attach event handlers with on:nodeclick

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

Learn the rest from the official docs

The README points to the learn sections as the best starting point: the React Flow learn section at reactflow.dev/learn and the Svelte Flow learn section at svelteflow.dev/learn. The sample code above is only a sneak peek of basic usage.

The repository contains the React Flow 12 package (@xyflow/react), the React Flow 11 package (reactflow) on its v11 branch, the Svelte Flow package (@xyflow/svelte) and a shared helper library (@xyflow/system).

Official React Flow docs: reactflow.dev/learn
Official Svelte Flow docs: svelteflow.dev/learn
Use React Flow 12 (@xyflow/react) for new React projects; the README lists React Flow 11 separately as reactflow.

What people use it for

A flowchart or process diagram editor inside a React web app.
A visual workflow or automation builder where users connect steps as nodes.
A node-graph tool in a Svelte app, such as a data pipeline editor.
An interactive graph view with a MiniMap and zoom controls for navigating large diagrams.

Frequently asked questions

Is xyflow free to use?

Yes. React Flow and Svelte Flow are MIT licensed, as stated in the README. For commercial use, the README asks organizations to support the project through React Flow Pro or GitHub Sponsors, but this is described as optional support rather than a licence fee.

How do I install xyflow?

Install the package for your framework with npm. Use npm install @xyflow/react for React Flow or npm install @xyflow/svelte for Svelte Flow. You need Node.js and npm, plus an existing React or Svelte project.

What do I need to use xyflow?

The README lists Node.js and npm as prerequisites, along with a React or Svelte project. It only covers these two frameworks, so projects using other frameworks are not covered.

Is xyflow a diagram app I can use without coding?

No. xyflow is a developer library. You write code to define nodes, edges and interactions inside your own app. People who want a finished diagram tool without coding should look elsewhere.

What is the difference between React Flow and Svelte Flow?

They are the same team's libraries for different frameworks. React Flow (@xyflow/react) is for React, and Svelte Flow (@xyflow/svelte) is for Svelte. Choose the one that matches your project's framework.

What are alternatives to xyflow?

The source lists Rete.js, JointJS, Drawflow and GoJS as comparable projects. The source does not compare their features, so check each one against your framework and licence needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

xyflow suits developers building flowchart, graph or workflow editors in React or Svelte who want a maintained, MIT-licensed library. It is not suited to people who want a finished diagram app without code, or to projects using other frameworks or only simple static diagrams.

Install options & downloads