Getting Started

Install React Flow, render your first canvas, and understand the minimum setup every flow needs.

Beginner · 6 min read · Updated Oct 31, 2026

What you will build

In a few minutes you will render an interactive canvas with two connected nodes that can be dragged, zoomed and panned. Everything else in VisualFlow builds on this foundation.

Install the package

React Flow ships as a single package under the XYFlow organisation. It has no peer dependencies beyond React itself.

bash

npm install @xyflow/react

Render a canvas

The parent element must have an explicit width and height — React Flow fills its container. Import the stylesheet once at your app root.

tsx

import { ReactFlow, Background, Controls } from "@xyflow/react";
import "@xyflow/react/dist/style.css";

const nodes = [
  { id: "1", position: { x: 0, y: 0 }, data: { label: "Trigger" } },
  { id: "2", position: { x: 200, y: 100 }, data: { label: "Action" } },
];
const edges = [{ id: "e1-2", source: "1", target: "2", animated: true }];

export default function Flow() {
  return (
    <div style={{ height: 480 }}>
      <ReactFlow nodes={nodes} edges={edges} fitView>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

Next steps

Now that the canvas renders, read Core Concepts to learn how nodes, edges and the viewport relate to one another.

Next guideCore Concepts →