Label editing and Bower packaging

Today we release a new version of our BPMN toolkit. It adds the ability to edit labels in BPMN 2.0 diagrams and received an overhauled look and feel for flows and events. We also ship a pre-packaged version that allows you to easily integrate BPMN diagrams into your web applications.

The new version of bpmn-js allows you to edit the labels of elements within BPMN 2.0 diagrams. All changes to labels can be undone and are persisted in the underlying BPMN 2.0 XML file. Check out the direct editing screencast below or try out the feature yourself on demo.bpmn.io.

Pre-packaged Bower distribution

We released a pre-packaged, single file distribution of bpmn-js that allows you to quick and easy integrate it as a BPMN 2.0 renderer into your applications. The pre-packaged version is available via Bower or as a direct download.

Get it via Bower:

bower install --save bpmn-js

Embed it and its dependencies into a web page:

<!-- viewer dependencies -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="bower_components/lodash/dist/lodash.js"></script>
<script src="bower_components/sax/lib/sax.js"></script>
<script src="bower_components/Snap.svg/dist/snap.svg.js"></script>

<!-- viewer -->
<script src="bower_components/bpmn-js/bpmn-viewer.js"></script>

Use the library (available via window.BpmnJS):

var BpmnViewer = window.BpmnJS;

var viewer = new BpmnViewer({ container: '#canvas' });
viewer.importXML(...);

Make sure to check out the documentation as well as the example project we have put up for you.

Learn bpmn-js by example

We worked on a number of examples that showcase bpmn-js in different usage/integration scenarios. To begin with we created two integration quick starts and two example applications. All examples live in their very own bpmn-js-examples and will be actively maintained.

The Bower and npm/browserify quickstart show how to integrate the library into a web application. They may help you integrating bpmn-js into your web application. If you are not sure what to choose or if you are interested in quick results, the Bower quickstart is probably exactly right for you.

The modeler example shows how to use our toolkit to build a demo.bpmn.io-like web modeler. It gets accompained by a simple BPMN 2.0 viewer that can open BPMN 2.0 files from URLs.

Try out the examples and make sure to report issues in the bpmn-js-examples issue tracker.

Under the hood

We reasoned about our current (run-time) module system a lot because we felt it did not offer us the best way to structure features. In the end, we decided to change it to aid future extensibility of bpmn-js and its underlying diagram core. As a result we ended up rewriting and cleaning up most of the code.

With the new infrastructure in place we are now able to build features as clearly separated modules. The general label editing capability for instance is such an encapsulated feature, its implementation for BPMN 2.0, too.

Wrap up

Thanks to a number of bug reports from the community a some crucial fixes made it in to the current release, too. We will continue to maintain the current feature set while working on simple process creation during our next milestone.

Your feedback is important! Try out our toolkit at demo.bpmn.io and tell us about it via Mastodon or directly from inside the app.

If you would like to dive deeper into the project, check out its repository on GitHub and start to reporting issues or fixing bugs right away.

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