Both suggestions worked. Better than I expected.BPMN.iO and the Workflow Modeler both implement the Modeler API. They work with the same models. A model created in BPMN.iO opens in the Workflow Modeler. A model created in the Workflow Modeler opens in BPMN.iO.Flow filtering: when a model has multiple disconnected event flows, show or hide individual flows to reduce visual clutter.This is choice, not lock-in.By early January 2026, we had experimental code from November and December. Vanilla JavaScript. A 0.1.x branch, testing ideas. Nothing production-ready. Just exploration.In the model overview table, each model has an operations dropdown. “Edit” opens it in the modeler you used last time. “Edit with…” lets you choose a different modeler.TypeScript strict mode: enabled. PHPStan level 6: enforced. Accessibility: tested with axe-core via @storybook/addon-a11y, jest-axe, and axe-playwright.Build it with npm run build:standalone. Drop the files on any web server. It just works.
View Modes and UI Flexibility
Requirements: Drupal 11.3+ or 12.0+, Modeler API 1.1+.Annotations are first-class workflow components. They export and import with the model. Currently they appear in the property panel when you select a node or edge. Based on UX research, we may show them as visible canvas elements in the future.The 87,000 lines break down as:Attach documentation notes to any node or edge. Explain why a condition exists. Document what an action does. Leave breadcrumbs for future maintainers.
Annotations
Contributions are approachable. Storybook for component dev. Comprehensive test coverage. Clear patterns to follow.Accessibility means the tool works for everyone. Screen readers. Keyboard navigation. High-contrast mode. These aren’t extras – they’re built in.
Undo/Redo
Search: find nodes and edges by label, plugin type, or ID. Live highlighting shows matches. Results dropdown for quick navigation.Accessibility tested in CI via Storybook’s axe integration. Not an afterthought – it’s in the test suite.
Keyboard Shortcuts and Accessibility
Dark mode: toggle light/dark themes. Persisted per user.Next in the series: Post 5 will cover testing, replay, and debugging in depth – closing the feedback loop between building and understanding workflows.If you’re contributing to the modeler or studying it for your own projects, the patterns are documented:Built on an event-sourcing pattern. History is reliable. You can experiment without fear – undo is always available.
Six Granular Permissions
The modeler is a plugin implementation of the Modeler API. Any Drupal Modeler Development Docs.
- Edit metadata
- Switch context
- Edit templates
- Create templates
- Test workflows
- Replay executions
Study the code. Build on the patterns. Submit improvements. The project is open.
The Numbers: Quality at Scale
Every commit runs through around 15 continuous integration gates: build check, linting (ESLint, phpcs, cspell), type checking (TypeScript tsc --noEmit, PHPStan level 6), testing (Jest unit tests with coverage thresholds, Playwright E2E in Chromium, Storybook accessibility with axe), and compatibility (PHPStan against next Drupal minor/major, PHPUnit against previous/next Drupal major and next minor, upgrade status check). A commit doesn’t merge unless all gates pass.
- ~25,900 lines of TypeScript/TSX production source (in
src/, excluding tests and stories) - ~54,400 lines of test code (
tests/+*.test.ts(x)files insrc/) - ~3,130 Jest unit test cases
- ~275 Playwright end-to-end test cases
- 36 Storybook story files documenting and testing components
- ~1,290 lines of PHP for the Drupal integration layer
You get a modern UI that doesn’t feel like it’s from 2010. Dark mode. Smooth interactions. Visual replay of executions. Keyboard shortcuts that match tools you already use.Then Lauri made two suggestions that changed everything. First: use React Flow. It handles the canvas, node orchestration, performance. Second: try AI-assisted development. I’d never used AI for anything serious before.
Quality Infrastructure: 15 CI Gates
Join the conversation on Drupal Slack #eca-next-genFull undo/redo support. Ctrl+Z / Ctrl+Shift+Z or toolbar buttons. Every canvas change is tracked: moves, adds, deletes, configuration edits.
Architecture: How It’s Built
Granular control over who can do what. Set up roles that fit your team’s workflow.Install it. Build a workflow. Try execution replay. Export as JSON and load in the standalone viewer. Report what works, what doesn’t, what’s missing.
Multiple Modelers, Model Portability
This isn’t “we wrote tests after the fact.” This is test-driven development. Components ship with .stories.tsx files for Storybook and __tests__/*.test.tsx for Jest.The backend provides six permissions via the Modeler API. The UI enforces them:Fullscreen mode covers the viewport. Resizable floating window mode lets you see the Drupal UI underneath. Drag the window, resize it. Position persists to local storage.Full keyboard navigation. Copy/paste. Undo/redo. Delete. Search. Figma-like canvas gestures: mouse wheel to pan, Ctrl+wheel to zoom.
What This Means for Developers
We didn’t know how to approach the real project.
ui/docs/architecture-patterns.md– orchestrator pattern, error boundaries, store structureui/docs/state-management.md– Zustand stores, update patterns, selectorsui/docs/component-development.md– how to add components, Storybook stories, testsui/docs/accessibility.md– WCAG compliance, testing approach, screen reader supportui/docs/e2e-testing.md– Playwright patterns, test builders, fixturesui/docs/security.md– sanitization, validation, secure defaults
WCAG AA accessibility compliance. Screen reader support. Focus management. Live regions for status announcements. Respects reduced-motion and high-contrast preferences. Minimum touch target sizes.Test-to-production ratio: about 2.1x. More test code than production code.
What This Means for Site Builders
6 weeks from decision to production-ready. That timeline is possible when you invest in quality infrastructure. Tests catch regressions. CI enforces standards. Development velocity stays high because the foundation is solid.BPMN.iO served ECA well for years. But the community needed something different – not better, different. Six weeks in early 2026, we built it.Not a prototype. Not incremental improvements. A complete rewrite. React 18 + TypeScript, infinite canvas, execution replay, live Post 2) made this possible. Model owners and modelers are decoupled. Multiple modelers can coexist. Models are portable between them. BPMN.iO and the new Emma Horrell, Mark Dodgson, and Lauri Timmanee reach out with UX research and user testing. Their message: don’t just improve, transform. Around Christmas, the in-context customization breakthrough lands – bring Post 1 covers this journey in detail.)
What This Means for Drupal
The codebase is reference architecture for Drupal + React integrations.The accessibility approach – Storybook stories with axe-core testing – is reference material. Other projects can learn from it.Modern JavaScript framework. Comprehensive testing. Accessibility tested in CI. Quality standards that match or exceed commercial SaaS tools. Drupal can build world-class applications.Switching preserves your work. Stick with the same modeler, and raw positioning data loads – your manual layout stays exactly as you left it. Switch modelers, and the system drops the old raw data (it would be out-of-date after editing), converts the model data upstream, and applies auto-layout. The workflow logic remains intact. Only the canvas positioning resets.
Getting Started
Project page: https://www.drupal.org/project/modeler
Documentation: https://project.pages.drupalcode.org/modeler/
Issue queue: https://git.drupalcode.org/project/modeler/-/work_items
https://git.drupalcode.org/project/modelerThe test infrastructure – 2.1x more test code than production code – sets a standard. This is how modern Drupal modules should approach quality.Context-aware: shortcuts disable inside form fields so typing doesn’t trigger actions.
Join Us
We’re building this in the open. Code contributions, documentation improvements, accessibility testing, UX feedback – all welcome.January 2026: the real build started. React 18 + TypeScript strict mode. React Flow managing the visual infrastructure. AI helping write components, tests, documentation. Six weeks of focused development. ECA Feature Demo uses the standalone viewer. Documentation and build instructions: Standalone Viewer docs.Building workflows becomes enjoyable, not frustrating. The interface guides you. Dependency rules prevent common mistakes. Live testing gives immediate feedback.
