@duabalabs/workflow-builder-ui

React component library for building visual workflows with drag-and-drop interface powered by ReactFlow.

Features

- WorkflowCanvas: Main visual workflow builder component
- ReactFlow Integration: Drag-and-drop node placement and connection
- Node Palette: Browse and add nodes from registry
- Dynamic Forms: Auto-generated configuration forms from JSON Schema
- Run Console: Real-time execution monitoring
- Version Check: Ensures UI-Server version compatibility
- Template Picker: Load pre-built workflow templates
- Group Support: Organize nodes into logical groups

Installation

``bash
npm install @duabalabs/workflow-builder-ui


or


pnpm add @duabalabs/workflow-builder-ui
`

Quick Start

$3

`tsx
import { WorkflowCanvas } from '@duabalabs/workflow-builder-ui';
import '@duabalabs/workflow-builder-ui/dist/style.css';

function App() {
return (



);
}
`

$3

`tsx
import { WorkflowCanvas } from '@duabalabs/workflow-builder-ui';
import '@duabalabs/workflow-builder-ui/dist/style.css';

function WorkflowBuilder() {
const handleSave = (workflow) => {
console.log('Workflow saved:', workflow);
};

const handleExecute = (result) => {
console.log('Execution started:', result);
};

return (



);
}
`

$3

`tsx
serverUrl="https://api.duabalabs.com/parse"
workflowId="workflow-123"
readOnly // Disable editing
theme="light"
/>
`

Components

$3

Main component that renders the complete workflow builder.

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| serverUrl | string | required | Parse Server endpoint URL |
| appId | string | required | Parse App ID |
| javascriptKey | string | - | Parse JavaScript Key (optional) |
| sessionToken | string | - | User session token for authentication |
| workflowId | string | - | Load existing workflow by ID |
| templatePicker | boolean | false | Show template picker panel |
| allowGroups | boolean | false | Enable node grouping |
| readOnly | boolean | false | Disable editing |
| theme | 'light' \| 'dark' \| 'auto' | 'light' | UI theme |
| onSave | (workflow) => void | - | Callback when workflow is saved |
| onExecute | (result) => void | - | Callback when execution starts |

Hooks

$3

Hook for interacting with the workflow server.

`tsx
import { useWorkflowAPI } from '@duabalabs/workflow-builder-ui';

function MyComponent() {
const api = useWorkflowAPI(
'https://api.duabalabs.com/parse',
'app-id',
sessionToken,
'javascript-key' // optional
);

const handleExecute = async () => {
try {
const result = await api.executeWorkflow('workflow-id');
console.log('Execution started:', result);
} catch (error) {
console.error('Failed:', error);
}
};

return (

Execute Workflow

);
}
`

#### API Methods

- getVersion(): Get server version
- fetchDefs(params?): Fetch node definitions
- fetchTemplates(params?): Fetch workflow templates
- createWorkflow(workflow): Create new workflow
- updateWorkflow(id, patch): Update workflow
- validateWorkflow(id): Validate workflow
- executeWorkflow(id, inputs?): Execute workflow
- getRunStatus(runId): Get run status
- cancelRun(runId): Cancel run

$3

Zustand store for workflow state management.

`tsx
import { useWorkflowStore } from '@duabalabs/workflow-builder-ui';

function MyComponent() {
const { nodes, edges, selectedNode, setSelectedNode } = useWorkflowStore();

return (



);
}
`

Styling

The library includes default styles. Import them in your app:

`tsx
import '@duabalabs/workflow-builder-ui/dist/style.css';
`

$3

Override CSS variables for theming:

`css
.workflow-canvas {
--primary-color: #0066cc;
--background-color: #f5f5f5;
--text-color: #333;
}

.workflow-canvas.dark {
--background-color: #1a1a1a;
--text-color: #f5f5f5;
}
`

Version Compatibility

The UI automatically checks version compatibility with the server on initialization. If versions don't match:

- Major version mismatch: Blocks execution with error message
- Minor/patch mismatch: Shows warning but allows execution

`tsx
import { checkServerVersion } from '@duabalabs/workflow-builder-ui';

const result = await checkServerVersion('https://api.example.com', '1.0.0');

if (!result.compatible) {
console.error(result.message);
}
`

Integration with Next.js

`tsx
// app/workflow/page.tsx
'use client';

import { WorkflowCanvas } from '@duabalabs/workflow-builder-ui';
import '@duabalabs/workflow-builder-ui/dist/style.css';

export default function WorkflowPage() {
return (



serverUrl={process.env.NEXT_PUBLIC_PARSE_URL!}
appId={process.env.NEXT_PUBLIC_APP_ID}
templatePicker
theme="auto"
/>



);
}
`

Integration with Vite/React

`tsx
// src/App.tsx
import { WorkflowCanvas } from '@duabalabs/workflow-builder-ui';
import '@duabalabs/workflow-builder-ui/dist/style.css';

function App() {
return (


);
}

export default App;
`

TypeScript Support

The library is fully typed with TypeScript. Import types:

`tsx
import type {
WorkflowCanvasProps,
NodeDefUI,
WorkflowState
} from '@duabalabs/workflow-builder-ui';
``

Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

License

MIT