Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

bpmn-js Examples

This repository contains a number of examples showing how use and integrate bpmn-js into your applications.



  • bundling - an example how to install bpmn-js via npm, use it in a node-style application and package it and the application code for the browser with Webpack.
  • colors - Showcases different ways to add colors to your BPMN diagram.
  • interaction - Listen to diagram events and react to them.
  • overlays - Attach overlays to BPMN 2.0 diagrams to provide custom buttons or showing additional information.
  • url-viewer - A simple url viewer for BPMN 2.0 process diagrams.


  • modeler - A simple BPMN 2.0 modeler. Gains more features as time passes by.
  • commenting - A simple commenting application build on top of BPMN 2.0 diagrams
  • bpmn-properties - Read and write BPMN properties with bpmn-js.
  • i18n - Use a custom translation module with bpmn-js.
  • properties-panel - Add a properties panel and edit execution related BPMN 2.0 properties.
  • theming - an example that showcases the different aspects of theming bpmn-js.
  • modeling-api - How to create, connect and edit elements using the API.


Featuring Libraries


Additional Resources


MIT (unless noted otherwise)