Build visual workflows faster with React Flow

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>
  );
}

import { ReactFlow, Background, Controls } from "@xyflow/react";

export function Workflow({ nodes, edges }) {
  return (
    <ReactFlow nodes={nodes} edges={edges} fitView>
      <Background variant="dots" />
      <Controls />
    </ReactFlow>
  );
}