Quick Start

import { useState, useCallback } from 'react';
import {
  WorkflowBuilder,
  applyNodeChanges,
  applyEdgeChanges,
  addEdge,
} from '@shiptemplates/workflow-embed';
import '@xyflow/react/dist/style.css';

const initialNodes = [
  { id: 'n1', type: 'trigger.webhook', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: 'n2', type: 'action.slack', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2', animated: true }];

export default function App({ embedToken, workflowId }: { embedToken: string; workflowId: string }) {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

  const onNodesChange = useCallback(
    (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
    [],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
    [],
  );
  const onConnect = useCallback(
    (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
    [],
  );

  return (
    <div style={{ width: '100%', height: '640px' }}>
      <WorkflowBuilder
        workflowId={workflowId}
        embedToken={embedToken}
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}