Local Storage

The local storage integration strategy saves and loads the diagram from localStorage automatically. No backend or server is needed. This is the default strategy in the standalone app.

How it works

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

import { withIntegrationThroughLocalStorage } from '<root>/features/integration/components/integration-variants/with-integration-through-local-storage';

const AppWithIntegration = withIntegrationThroughLocalStorage(App);

<AppWithIntegration />

That’s it. Workflow Builder will:

1. On mount - read the diagram from localStorage and load it into the editor
2. On save - serialize the current diagram to JSON and write it to localStorage

Storage key

The data is stored under the key:

workflowBuilderDiagram

The value is the JSON-serialized IntegrationDataFormat object.

The key is not configurable via props. To change it, edit the withIntegrationThroughLocalStorage source file directly.

On first visit, when no data exists in localStorage, the editor starts with an empty canvas.

Auto-save on close

Workflow Builder hooks into the browser’s beforeunload event and triggers a save when the user closes or navigates away from the page. This ensures the diagram is not lost between sessions.

Limitations

• Data is per-browser and per-origin. It is not shared across devices
• localStorage has a ~5 MB limit; very large diagrams may hit this
• Not suitable for multi-user or collaborative scenarios

When to use this strategy

Use local storage integration when:

• You want a zero-config setup with no backend
• The diagram is for a single user on a single device
• You are prototyping or demoing Workflow Builder

For persistent, shareable storage use External API integration instead. For full control over loading and saving see Through Props.