React Component

Advanced integration

This guide involves manually copying source files, adjusting import paths, and configuring your build tooling. It requires familiarity with React, TypeScript, and your project’s bundler setup.

If you want to evaluate Workflow Builder first, start with the Standalone App instead.

Use this approach when your target project is already a React app and you want to embed Workflow Builder directly as a feature. No separate build, no iframe, no web component.

Legend

• 📦 source repository (this one)
• 🚩 target repository (your project)

Copy the Workflow Builder source

1. Create src/features/workflow-builder 🚩 inside your project.
2. Copy the contents of apps/frontend/src/app 📦 into src/features/workflow-builder 🚩 (skip node_modules and dist).
3. Rename the App component to WorkflowBuilder in features/workflow-builder/app.tsx 🚩.
4. Import <WorkflowBuilder /> into the correct place in your application. You may also need to migrate apps/frontend/src/global.css 📦 to src/features/workflow-builder/global.css 🚩.

Fix icons and types

1. Copy apps/types 📦 and apps/icons 📦 into src/features/workflow-builder/ 🚩 (skip node_modules and dist).
2. Replace all occurrences of from '@workflow-builder' with from '@/features/workflow-builder' across the copied files.
3. Copy all dependencies and devDependencies from apps/icons/package.json 📦 into the root package.json 🚩.
4. Remove package.json and tsconfig.json from src/features/workflow-builder/icons 🚩 - it will run from the root package.json now.
5. In src/features/workflow-builder/icons/config.json 🚩 change ./assets → ./src/features/workflow-builder/assets.
6. In src/features/workflow-builder/icons/config.json 🚩 change ./dist → ./src/features/workflow-builder/dist.
7. In root package.json 🚩 add a script to generate icons. If you already have a "prepare" script (e.g. for Husky), chain the commands:

   "generate-icons": "tsx src/features/workflow-builder/icons/src/generate-icons.ts",
   "prepare": "husky && npm run generate-icons"

8. Run npm run generate-icons to verify. It should generate a dist folder inside src/features/workflow-builder/icons/dist 🚩.
9. If you have a CI pipeline, add npm run generate-icons after the install step.

Note

These steps use npm because they target your project, which may use any package manager. Replace npm with pnpm or yarn as needed.

Set the integration strategy

In src/features/workflow-builder/features/integration/components/with-integration.tsx 🚩, change the exported strategy:

export const withIntegration = hocByStrategy.PROPS;

See the Through Props integration page for details on passing data in and out of the editor.