React Flow Implementation

Straightforward guide for implementing React Flow (the @xyflow/react library) without stepping on the common landmines. It covers the basics like nodes, edges, and handles, then walks through the four implementation gates that catch most bugs: missing CSS imports, useReactFlow called outside provider boundaries, recreating nodeTypes objects every render, and mismatched handle IDs on edges. The custom node examples show the memo wrapper pattern and the nodrag class for interactive elements, which you'll need the first time a button inside a node starts dragging the whole canvas. Includes TypeScript types, controlled state patterns, and viewport control. Good reference if you're building flowcharts, visual editors, or any node based UI and want to skip the documentation archaeology.

skills.sh installs: 374
GitHub stars: 87
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add existential-birds/beagle --skill react-flow-implementation --agent claude-code

Installs into .claude/skills of the current project.

Files

React Flow Implementation

Quick Start

import { useCallback } from 'react';
import { ReactFlow, useNodesState, useEdgesState, addEdge } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: '2', position: { x: 200, y: 100 }, data: { label: 'Node 2' } },
];

const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges]
  );

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}