# Embeddable Workflow Designer for .NET Source: https://workflowengine.io/features/workflow-designer/ Site index for agents: https://workflowengine.io/llms.txt (products, licensing, documentation hosts, package names). **Embed an HTML5 workflow designer in your .NET application** v22.1.0 · React, Angular, vanilla JS, and Blazor · npm [`@optimajet/workflow-designer`](https://www.npmjs.com/package/@optimajet/workflow-designer) · included with every product · Page last updated 7 October 2026 Workflow Engine by Optimajet ships with Workflow Designer, a visual workflow editor your users open inside your own product. Install the React or Angular wrapper, point it at one endpoint in your backend, and shape it until it reads as yours: your activities in the palette, your controls in the property panels, your brand on the canvas. No separate diagram library to license, no vendor-hosted modeler, no data leaving your perimeter. Further down this page: the designer following a live process, the extension points that make it yours, three ways to embed it, a full sample for your stack, and what each product includes. [Open the designer integration guide](https://docs.workflowengine.io/get-started/integrate-the-designer/) ## Your users edit their own workflows in · Workflow Designer, inside your product Workflow Designer is the HTML5 editor for [Workflow Engine](https://workflowengine.io/products/dotnet-workflow-engine/) schemes. Business users draw activities on a canvas, connect them with transitions, and configure commands, timers, and rules in property panels, all from within your application. A process change becomes an edit in the designer, not a ticket in a developer's backlog. For the developer, it is a JavaScript component with a documented API, npm packages for React and Angular, and server-side extension points in C#. The scheme it edits is the same scheme the engine executes, so there is no export step and no second source of truth. Diagrams drawn in BPMN tools come in through the [BPMN 2.0 import](https://workflowengine.io/features/bpmn/). ### It runs inside your own admin pages The designer renders inside your admin pages and saves through your backend to your database. There is no vendor login, no SSO into a third-party tool, and no diagram crossing a network boundary you do not own. Initial activity ### One backend endpoint Everything the designer does goes through a single Designer API endpoint you expose: WorkflowRuntime.DesignerAPI() in your controller, or the ready-made /workflow-api/designer route in Workflow Engine NEO. ### Editor and viewer in one Load a scheme by schemeCode to edit the process blueprint, or pass a processId to display a live process instance. One component covers authoring, review, and monitoring. ### Standalone in one command npx @optimajet/workflow-designer starts the full designer UI against any backend, no install. Useful on day one, before you have embedded anything. ### Imports BPMN 2.0 The BPMN plugin converts BPMN 2.0 diagrams into Workflow Engine schemes that open in the designer, and adds a BPMN elements tab to the palette. ### No diagram-library bill Commercial diagramming toolkits in this class are licensed per developer for thousands of dollars, and then you still build the editor on top. Workflow Designer ships with the engine, in every product. Current activity ## A scheme the whole team can read Simple Process Notation has three building blocks where BPMN has more than 50 element types. Everything else is a setting the designer draws in color and shape, so business users, analysts and developers read a scheme the same way. Workflow Designer · scheme view · Purchase request Transitions - Direct transition · Moves the process forward. - Reverse transition · Sends it back, as Reject does. - Unspecified transition · No direction is set. - Selected transition · The transition you are editing. - IsFork transition · Starts or ends a subprocess that runs in parallel. Transition pills - Command, timer or Auto · Names the command or timer that fires the transition. Auto means it fires on its own after the activity has run its actions. - Restricted to actors · Only users who pass the actor rule may run the command. - Otherwise · Taken when no other condition passes. - Condition · Taken only when its condition is true. - Timer · Fires after an interval or at a set time. Activities - Initial activity · Every new process starts here. - Final activity · The process ends here. - Current activity · Where a running process is now. - Intermediary activity · Any step between the start and the end. - Selected activity · The activity you are editing. Activity implementation - PreExecution implementation · Actions for Pre-Execution, the preview of a process's path. - Execution implementation · Actions that run when the process enters the activity. - Inline activity · Embeds a reusable scheme into this one. Business users The orange activity shows where a request is now. The arrows leaving it show what can happen next, and the person icon on a pill shows who may do it. Analysts Branching rules sit on the arrows. A ? marks a condition, and the Otherwise mark shows the path taken when no condition passes. The diagram you review with the business is the specification the engine runs. Developers Every mark is a property you can also set in C# or in the scheme XML. Classifier colors the arrow, Trigger names the pill and IsFork dashes the line. The runtime executes what was drawn. ## The same canvas shows processes running Pass a processId and the designer renders a live process instance instead of a blueprint. Add the Real-Time Tracking Plugin and it becomes the Interactive Designer: state changes are pushed to the canvas over SignalR, so the current activity highlights the moment the process moves, the way the animation below shows. Support staff watch an approval workflow progress on the same diagram the analyst drew, managers see requests arrive on operations dashboards, and demos show execution as it happens. Interactive Designer · process view · live The current activity turns orange as the process moves, the same way the designer marks it on the real canvas when a timer fires, a command executes, or a transition completes. 1. ### The designer connects On load, the designer opens a SignalR connection to the hub URL you pass in (realTimeTrackingUrl). SignalR picks the transport (WebSocket, SSE, or long polling) on its own. 2. ### The plugin watches the process The Real-Time Tracking Plugin subscribes to process state changes. In multi-server mode it polls the shared database (2-second default), so it works in clusters with no external event bus. 3. ### The server broadcasts When a timer fires, a command executes, or a transition completes, the hub pushes the updated process state to every connected designer. 4. ### The canvas re-renders The designer highlights the new current activity and refreshes the available transitions and status, without a page reload. If the connection drops, SignalR reconnects on its own. Server side, two registrations · csharp ```csharp app.MapRealTimeTracking("/workflowHub"); runtime.WithPlugin(new RealTimeTrackingPlugin()); ``` The Interactive Designer is for observation rather than editing. It works in every product, Workflow Engine Free included: what it needs is the Real-Time Tracking Plugin and the hub above, not a commercial license. ## Watch a scheme go from blank canvas to running process Optimajet's own recording: drop activities on the canvas, wire transitions, hang commands on them, [restrict those commands to actors](https://workflowengine.io/features/pluggable-security/), then start a process and see the designer switch from blueprint to live instance with the current activity in orange. It ends by adding a step and a timer to a scheme that is already running, without touching code. Filmed in Workflow Server, which ships this same designer. ## Make the designer part of your product This is the strongest part of Workflow Engine for a team embedding a workflow UI into their own software. Every layer of the designer is an extension point you configure at initialization, in C#, without touching the designer source. Each customization is scoped to a WorkflowRuntime instance, so two tenants or two teams can run differently branded designers from one deployment. When several of these belong together, package them as a plugin instead: [the Workflow Engine plugin system](https://workflowengine.io/features/plugin-system/) registers a whole capability, palette entries included, from one WithPlugin call. Registering designer extension points · csharp ```csharp var runtime = new WorkflowRuntime() // ... persistence provider, builder, plugins ... .WithDesignerParameterFormatProvider(new UserPickerFormatProvider()) .WithDesignerAutocompleteProvider(new BusinessTermsProvider()) .WithActionProvider(new ActionProvider()) .WithRuleProvider(new RuleProvider()); ``` ### Your activities in the palette Inherit ActivityBase, define the parameters, the edit form, and the SVG shape, and register the activity on the runtime. A "Signature" or "Charge card" activity sits in the palette next to the built-ins, and its C# ExecutionAsync runs server-side. ### Your controls in the panels IDesignerParameterFormatProvider swaps generic text boxes for domain controls: a user picker for assignees, a cost-center selector, a date-range picker. One GetFormat method, registered on the runtime. ### Your vocabulary in the editors IDesignerAutocompleteProvider feeds your business terms into condition and code editors, so analysts pick "ApprovalLimit" or "DepartmentHead" from a list instead of learning C# and parameter names. ### Your catalog in the lists The actions, conditions, and rules the designer offers come from your IWorkflowActionProvider and IWorkflowRuleProvider. Scheme authors compose from an approved, tested catalog, and plugins register their own entries automatically through WithPlugin(). ### Your brand on the surface Override the designer CSS classes for palette and typography, replace the HTML templates for toolbars, modals, and forms, swap the SVG templates for canvas shapes, and put your logo on the canvas with settings.logo. No fork of the designer source. ### Your languages in the menu Eight UI languages ship in the package, users switch in the menu, and you add your own as a JSON locale file. Right-to-left layout is supported, Arabic included. Customization stays at the UI and catalog level. It does not change the scheme format or how the engine executes, so a fully customized designer still produces standard schemes any Workflow Engine runtime can run. The full extension-point reference is in the [designer customization documentation](https://docs.workflowengine.io/evaluate/workflow-engine-features/customization/). ## Three paths to embed the Designer Workflow Designer is a JavaScript library you embed in any web UI. It speaks to a small Designer API endpoint in your backend, which the Workflow Runtime exposes. Whatever renders your admin UI can host it, and teams that build a workflow editor on a raw diagramming library budget months for the same result. ### Vanilla JS Load it with a `