Find file History

custom-bundle example

How to role a customized, pre-packaged version of bpmn-js.

Note: This is an advanced topic.


This example extends the bpmn-js viewer via custom modules and shows how Rollup can be used to generate a UMD bundle of that custom viewer.

In a Nutshell

Create a sub-class of Viewer or Modeler, depending on which variant you would like to extend:

import inherits from 'inherits';

import Viewer from 'bpmn-js/lib/Viewer';

import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';

import CustomLoggingModule from './features/logging';

 * A viewer that includes mouse navigation and other goodies.
 * @param {Object} options
function CustomViewer(options) {, options);

inherits(CustomViewer, Viewer);

module.exports = CustomViewer;

Add additional modules to your custom bpmn-js prototype:

CustomViewer.prototype._customModules = [

CustomViewer.prototype._modules = [].concat(

Package the file as UMD for the browser, using a module bundler such as Rollup, Browserify or Webpack.

We're using rollup to bundle the files based on this configuration:

rollup -c

Include the bundle in your webpage, as you would include our pre-package distributions:

<script src="dist/custom-viewer.bundled.js"></script>
  var viewer = new CustomBpmnJS({
    container: '#canvas'

  // ...

Build this Example

npm install
npm run all