News from the project

Improved Editing UX and Multi-Element Context Pad Land in bpmn-js

Published by Nico Rehwaldt on Wednesday, 08 June 2022.

bpmn-js9.2.0 diagram-js8.5.0

We are excited to announce the bpmn-js@9.2 release. The new version of our BPMN toolkit improves the modeling experience with better selection visuals and reworked drag/resize handles. It also adds a context pad for multiple elements and improves our BPMN support.

The most noteworthy change in bpmn-js@9.2 is an improved selection UI:

New selection UI shipped with bpmn-js@9.2

Selection, more obvious.

As part of the rework, we removed the (visual) hover state and added a dedicated multi-select box. Both aim to better match user expectations and align with existing drawing tools.

Try out the reworked selection UI on

Improved Drag Handles

Along with the selection rework, we've overhauled drag/resize handles.

Improved resize/drag handles shipped with bpmn-js@9.2

Clearer resize/drag handles on the canvas.

Multi-Element Context-Pad

Along with multi-selection, the toolkit now offers a way to register context pad entries for multiple elements:

Element deletion built on top of our new multi-element context pad

Delete multiple elements with a single click.

We ship a multi-element delete action per default and allow you to provide your own.

Annotate Flows

Starting with this release you can annotate sequence and message flows:

Message flow and sequence flow annotations

Attach text annotations to sequence and message flows.

More Improvements

If you are interested in all the details, go ahead and check out the full changelog to learn about everything that shipped with bpmn-js@9.2.

Wrapping up

We hope that this release, along with our previous v9.1 release significantly improves your experience modeling BPMN. Did we miss anything? Did you spot a bug, or would you like to suggest an improvement?

Reach out to us via our forums, toot us on Mastodon or file an issue you found in the bpmn-js issue tracker.

Get the latest BPMN modeling toolkit pre-packaged or as source code via npm or unpkg.

Are you passionate about JavaScript, modeling, and the web?
Join Camunda and build modeling tools people heart.