bpmn-js bundling example

This example showcases how add and bundle bpmn-js along with a node-style web application using Webpack.


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

example screenshot

Usage Summary

Install bpmn-js via npm

npm install --save bpmn-js

Use it in your application

import BpmnViewer from 'bpmn-js';

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

viewer.importXML(pizzaDiagram, function(err) {

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

Bundle the src/app.js file for the browser with Webpack:

webpack ./src/app.js -o public/app.bundled.js --mode development

To learn about more bundling options, checkout the webpack-cli documentation.

Note: You may use another ES module aware bundler such as Rollup, too. Browserify may also be used but must be properly configured via a global babelify transform.

Building the Example

Install the project dependencies via

npm install

To create the sample distribution in the public folder run

npm run all