Through Props

The props integration strategy is the most direct way to connect Workflow Builder to your application. You supply the initial diagram data and a callback that fires when the user saves.

How it works

Workflow Builder exports a higher-order component withIntegrationThroughProps. Wrap your app component with it and provide:

• name - diagram name
• layoutDirection - 'DOWN' or 'RIGHT'
• nodes - initial node array
• edges - initial edge array
• onDataSave - async callback called when the user clicks Save

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

const AppWithIntegration = withIntegrationThroughProps(App);

<AppWithIntegration
  name="My Workflow"
  layoutDirection="DOWN"
  nodes={initialNodes}
  edges={initialEdges}
  onDataSave={async (data, savingParams) => {
    const response = await fetch('/api/workflows', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    return response.ok ? 'success' : 'error';
  }}
/>

savingParams

The second argument passed to onDataSave has the following type:

type OnSaveParams = { isAutoSave?: boolean };

savingParams.isAutoSave is true when the save was triggered automatically (for example, before the user leaves the page). In that case, success and error notifications are suppressed. When false or undefined, the save was triggered by the user clicking Save and a snackbar is shown.

Data format

The data object passed to onDataSave has the following shape:

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

This is the same format used by the other integration strategies and accepted back as initial props.

Save result

onDataSave must return a promise resolving to one of:

Value	Meaning
'success'	Save succeeded - Workflow Builder shows a success snackbar
'error'	Save failed - Workflow Builder shows an error snackbar
'alreadyStarted'	A save is already in progress - no snackbar is shown

When to use this strategy

Use through-props integration when:

• Your diagram data lives in your parent component or state manager
• You want full control over when and how saving happens
• You need to validate or transform the data before persisting it

For simpler cases (no backend required) see Local Storage. For server-managed persistence see External API.

Source code

See the full implementation on GitHub.