External API

The API integration strategy connects Workflow Builder to your backend. It fetches the initial diagram from a REST endpoint on mount and POSTs the updated diagram when the user saves.

How it works

Workflow Builder exports withIntegrationThroughApi. Wrap your app component with it:

import { withIntegrationThroughApi } from '<root>/features/integration/components/integration-variants/with-integration-through-api';

const AppWithIntegration = withIntegrationThroughApi(App);

<AppWithIntegration />

The wrapper handles two operations:

Event	Action
Component mounts	`GET /fake-api` - loads the initial diagram
User saves	`POST /fake-api` - persists the current diagram

/fake-api is a placeholder. Replace it with your own endpoint paths.

Customizing the endpoints

The built-in implementation is a starting point. Edit with-integration-through-api.tsx to use your actual endpoints, add authentication headers, or handle error cases:

// Load
const response = await fetch('/api/workflows/current', {
  headers: { Authorization: `Bearer ${token}` },
});

// Save
const response = await fetch('/api/workflows/current', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${token}`,
  },
  body: JSON.stringify(data),
});

Data format

Both the GET response body and the POST request body use the same shape:

type IntegrationDataFormat = {
  name: string;
  layoutDirection: 'DOWN' | 'RIGHT';
  nodes: WorkflowBuilderNode[];
  edges: WorkflowBuilderEdge[];
};

Snackbar feedback

Workflow Builder automatically shows a success or error notification after each save attempt based on whether the response was ok.

When to use this strategy

Use API integration when:

You need diagrams persisted in a database
Multiple users access the same diagram
You want server-side validation or versioning

For a simple database save example see Save diagrams to database. For other strategies see Through Props or Local Storage.