# Integrate the Designer

The [Workflow Designer](https://docs.workflowengine.io/evaluate/workflow-engine-features/workflow-designer/) is a visual editor for creating and modifying
workflow [schemes](https://docs.workflowengine.io/get-started/concepts/scheme/). 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:

```bash
npx @optimajet/workflow-designer <apiurl> <schemecode>
```

Table: Designer standalone npx parameters

| 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:

```bash
npx @optimajet/workflow-designer http://localhost:5274/workflow-api/designer MyWorkflowScheme
```

The Designer opens in your default browser. You can draw [activities](https://docs.workflowengine.io/get-started/concepts/activity/)
and [transitions](https://docs.workflowengine.io/get-started/concepts/transition/), add [commands](https://docs.workflowengine.io/get-started/concepts/command/), 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](https://www.npmjs.com/package/@optimajet/workflow-designer-react) with full component API, refs,
  and callbacks. See [React workflow builder](https://workflowengine.io/features/react-workflow-designer/) for a working example.
- **Embed Designer in Angular** -
  use [@optimajet/workflow-designer-angular](https://www.npmjs.com/package/@optimajet/workflow-designer-angular) with Angular component
  bindings. See [Angular workflow designer](https://workflowengine.io/features/angular-workflow-designer/) for a working setup.
- **Embed Designer in Blazor** -
  use [@optimajet/workflow-designer](https://www.npmjs.com/package/@optimajet/workflow-designer) with JavaScript interop in Blazor
  WebAssembly or Server. See [Blazor workflow designer](https://workflowengine.io/features/blazor-workflow-designer/) for a working example.
- **Embed Designer with Vanilla JS** - load the Designer from the CDN and initialize it
  with a plain `new WorkflowDesigner(...)` call, no framework required. See
  [JavaScript workflow designer](https://workflowengine.io/features/javascript-workflow-designer/) for a working example.

## 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.

## Next steps

- Embed Designer in React: Install the React component, configure apiurl, and render the Designer inside your React app.
- Embed Designer in Angular: Use Angular component bindings to embed the Designer in your Angular app.
- Embed Designer in Blazor: Integrate the Designer into Blazor WebAssembly or Server with JavaScript interop.
- Embed Designer with Vanilla JS: Load the Designer from a CDN and initialize it without any framework.