Drupal Workflow Modeler Adds React Interface, Replay, and Live Testing

Rebuilt as a React and TypeScript application, the Workflow Modeler now gives Drupal’s Event-Condition-Action (ECA) ecosystem a second interface for authoring, testing, replaying, and exporting automation workflows.

The update is significant, less as a release announcement than as a technical shift in Drupal workflow tooling. Jürgen Haas’s 4 June 2026 post documents how the modeler moved beyond BPMN.iO-only editing through the Modeler API, while preserving compatibility with existing ECA workflows. In plain words, the rebuild matters because it changes how Drupal teams can create and test ECA workflows. 

The new Workflow Modeler is built with React 18, TypeScript strict mode, React Flow, and esbuild. Development accelerated after user experience research followed DrupalCon Vienna 2025, where ECA appeared in the DriesNote presentation. Jürgen said React Flow and AI-assisted development tools helped move the project from experimental code in late 2025 to a production-ready build by late February 2026.

Execution replay is one of the main additions. It allows workflow runs to be visualised inside the modeler, including executed nodes, token values, playback controls, and failure points. The modeler also supports live testing, allowing users to run workflows and review execution results from the same interface.

The interface adds an infinite canvas, context-aware quick-add functionality, flow-aware positioning, annotations, undo and redo support, search, dark mode, and full-screen or floating-window operation. Dependency filtering presents relevant actions, conditions, gateways, and events during workflow construction, helping users avoid invalid workflow structures without removing manual control.

The modeler supports four export formats. Drupal Recipes can package workflows for distribution, archive exports can support migration, JSON exports can load in the standalone viewer, and SVG exports can be used for documentation or presentations. The standalone viewer allows workflows to be embedded in websites, documentation systems, and presentations without requiring a Drupal installation.

Accessibility was part of the development scope. The modeler is designed for WCAG AA compliance and includes keyboard navigation, screen reader support, focus management, live regions, reduced-motion support, high-contrast compatibility, and minimum touch target sizing. Accessibility checks are included in continuous integration through Storybook and axe-based testing.

Jürgen reported approximately 87,000 lines of code, including about 25,900 lines of TypeScript and TSX production source, 54,400 lines of test code, roughly 3,130 Jest unit test cases, and about 275 Playwright end-to-end test cases. The project also includes around 15 continuous integration gates covering build checks, linting, type checking, automated testing, accessibility, compatibility, and security-related validation.

Compatibility with existing ECA workflows remains a core design principle. BPMN.iO and the new Workflow Modeler both implement the Modeler API, allowing models to open in either interface. When switching between modelers, workflow logic remains intact, although canvas positioning may be recalculated.

Requirements currently include Drupal 11.3 or later and Modeler API 1.1 or newer. More information, documentation, and installation instructions are available on the Workflow Modeler project page.