Interactive Designer
Without real-time updates, monitoring a running process means polling the database or asking users to refresh the page. By the time the UI catches up, the process may have moved to a different state.
The Interactive Designer uses Workflow Engine's Real-Time Tracking Plugin to push state changes to the designer as they happen. When a timer fires, a command executes, or a transition completes, the designer updates the visual representation - highlighting the current activity and showing the new state - without a page reload.
What it is
The Interactive Designer is a combination of a server-side SignalR hub (WorkflowEngineHub) and a client-side SignalR connection built into the Visual Designer component. The server tracks process instance state changes and broadcasts them to all connected designer instances. The designer receives the updated state and re-renders the current activity, available transitions, and status indicators.
The feature is activated when all three conditions are met: the runtime has the RealTimeTrackingPlugin registered (detected through the designer API), a ProcessId is available, and the designer receives a realTimeTrackingUrl pointing to the SignalR hub.
For developers: On the server, register the SignalR hub and add the RealTimeTrackingPlugin to the runtime. On the client, pass the hub URL to the WorkflowDesigner constructor:
// Server-side: register the hub and pluginapp.MapRealTimeTracking("/workflowHub");runtime.WithPlugin(new RealTimeTrackingPlugin());// Client-side: pass the SignalR hub URL in the designer settingsconst designer = new WorkflowDesigner({ apiurl: "https://your-server/designer-api", renderTo: "designer-container", realTimeTrackingUrl: "https://your-server/workflowHub", processId: "a1b2c3d4-...",});How it works
SignalR connection - The designer opens a SignalR connection to the configured hub endpoint. SignalR negotiates the best available transport (WebSocket, SSE, or long polling) automatically.
State change detection - The Real-Time Tracking Plugin subscribes to process instance state changes. In single-server mode, changes are detected directly. In multi-server mode, a background poller checks the database at a configurable interval (default 2 seconds).
Broadcast - When a change is detected, the server calls
ProcessChangedon the SignalR hub, which pushes the updated process instance state to all connected clients.Rendering - The designer's
UpdateCurrentStatemethod parses the updated state and callsDrawto re-render the affected elements.
Multi-server mode
In clustered deployments, the Real-Time Tracking Plugin uses a background poller (MultiServerNotifier) that checks the persistence provider for changes at a configurable interval. When any node in the cluster advances a process, the poller detects the timestamp change and broadcasts the update through SignalR. No external event bus or coordinator is required.
When to use it
Use the Interactive Designer whenever users need to monitor running process instances without refreshing the page:
- Operations dashboards where support staff monitor active process instances and their current states.
- Approval workflows where managers see approval requests arrive and can respond immediately.
- Process monitoring in production environments where rapid feedback on execution status is critical.
- Demonstration and training scenarios where showing process execution as it happens improves understanding.
The Interactive Designer is for observation and monitoring rather than process design. Use the standard Visual Designer for creating and editing process schemes.
Frequently asked questions
Does the Interactive Designer require additional server configuration?
Yes. The server must register the SignalR hub with MapRealTimeTracking("/workflowHub") and add the RealTimeTrackingPlugin to the runtime. The hub endpoint is configurable; the default is /workflowHub. SignalR handles transport negotiation automatically, but WebSocket connections may require WebSocket support on your load balancer or reverse proxy.
Does the Interactive Designer work with clustered deployments?
Yes. In multi-server mode, the Real-Time Tracking Plugin polls the shared database at a configurable interval (default 2 seconds) and broadcasts changes through SignalR when a transition is detected. No external event bus is needed.
What happens when the real-time connection drops?
SignalR's client library automatically attempts to reconnect. The designer does not need custom reconnection logic. Once reconnected, the next state change triggers a full update of the process visualization.
Is the Interactive Designer available with all editions?
The Real-Time Tracking Plugin is part of the commercial licensing model. The Workflow Engine Free includes the standard Visual Designer without real-time capabilities.