Integrate the Designer
The Workflow Designer is a visual editor for creating and modifying workflow schemes. You can run it standalone - no installation required - or embed it as a component in your application. Both approaches connect to the same DesignerAPI endpoint on your backend.
Standalone via npx
Run the Designer in a single command. It starts a local web server and opens a browser tab with the full Designer UI connected to your backend:
npx @optimajet/workflow-designer <apiurl> <schemecode>| Parameter | Description |
|---|---|
<apiurl> | URL of your DesignerAPI endpoint, for example http://localhost:5274/workflow-api/designer |
<schemecode> | The code of the scheme to open for editing, for example MyWorkflowScheme |
Example for a locally running Web API:
npx @optimajet/workflow-designer http://localhost:5274/workflow-api/designer MyWorkflowSchemeThe Designer opens in your default browser. You can draw activities and transitions, add commands, and save the scheme - it is stored in the database through the API endpoint.
Embed in your application
For production use, embed the Designer as a frontend component directly into your application UI. The component connects to the same DesignerAPI endpoint and loads, saves, and validates schemes from your backend:
- Embed Designer in React - use @optimajet/workflow-designer-react with full component API, refs, and callbacks.
- Embed Designer in Angular - use @optimajet/workflow-designer-angular with Angular component bindings.
- Embed Designer in Blazor - use @optimajet/workflow-designer with JavaScript interop in Blazor WebAssembly or Server.
- Embed Designer with Vanilla JS - load the Designer from the CDN and initialize it with a plain
new WorkflowDesigner(...)call, no framework required.
Frequently asked questions
Do I need to install anything for the standalone Designer?
No. npx @optimajet/workflow-designer downloads and runs the Designer on the fly. The only requirement is Node.js >=18 installed on your machine.
Where does the standalone Designer store schemes?
Schemes are not stored locally. The standalone Designer is a frontend-only tool - it sends all data to the DesignerAPI endpoint, which persists it to your database. When you click Save, the scheme goes to your backend just like it would with an embedded Designer.
What is the DesignerAPI endpoint?
The DesignerAPI endpoint is part of Workflow Engine's backend. It is available at /workflow-api/designer when using the Web API, or through WorkflowRuntime.DesignerAPI() in framework-agnostic setups. The Designer component (standalone or embedded) sends HTTP requests to this endpoint to load, save, and validate schemes.
Can I use the standalone Designer for production?
The standalone Designer is designed for development, testing, and quick edits. For production, embed the Designer as a component in your application - this gives you control over authentication, styling, and the user experience.