bpmn-js in CommonJS Applications

bpmn-js is the BPMN 2.0 diagram modeling and rendering toolkit that powers

This example showcases how to integrate bpmn-js into a node-style application. It gets bpmn-js via npm and packages the application for the browser using browserify.


This example uses bpmn-js to embed the pizza collaboration diagram into a web application.

demo application screenshot

Usage Summary

Install bpmn-js via npm

npm install --save bpmn-js

Use it in your application

var BpmnViewer = require('bpmn-js');

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

viewer.importXML(pizzaDiagram, function(err) {

  if (!err) {
  } else {
    console.log('something went wrong:', err);

Building the Project

Initialize the project dependencies via

npm install

The project contains a Grunt build script that defines a few tasks.

To create the sample distribution in the dist folder run


To bootstrap a development setup that spawns a small webserver and rebuilds your app on changes run

grunt auto-build