bpmn-js Examples

# bpmn-js Examples This repository contains a number of examples showing how use and integrate [bpmn-js](https://github.com/bpmn-io/bpmn-js) it into your applications. ## Starter * [starter](./starter) - Getting started with [bpmn-js](https://github.com/bpmn-io/bpmn-js) using our [pre-packaged distribution](./pre-packaged). ## Basic * [bundling](./bundling) - an example how to install bpmn-js via [npm](http://npmjs.org), use it in a node-style application and package it and the application code for the browser with [Webpack](https://webpack.js.org/). * [colors](./colors) - Showcases different ways to add colors to your BPMN diagram. * [interaction](./interaction) - Listen to diagram events and react to them. * [overlays](./overlays) - Attach overlays to BPMN 2.0 diagrams to provide custom buttons or showing additional information. * [url-viewer](./url-viewer) - A simple url viewer for BPMN 2.0 process diagrams. ## Intermediate * [modeler](./modeler) - A simple BPMN 2.0 modeler. Gains more features as time passes by. * [commenting](./commenting) - A simple commenting application build on top of BPMN 2.0 diagrams * [bpmn-properties](./bpmn-properties) - Read and write BPMN properties with bpmn-js. * [i18n](./i18n) - Use a custom translation module with bpmn-js. * [properties-panel](./properties-panel) - Add a properties panel and edit execution related BPMN 2.0 properties. * [theming](./theming) - an example that showcases the different aspects of theming bpmn-js. ## Advanced * [bpmn-js-nyan](https://github.com/nikku/bpmn-js-nyan) - Model nyan cats instead of service tasks, resize elements and assign custom element colors. * [bpmn-js-task-priorities](https://github.com/bpmn-io/bpmn-js-task-priorities) - persistent task colors, diagram interaction and custom extension elements demo. * [bpmn-js-in-color](https://github.com/bpmn-io/bpmn-js-in-color) - Adding color support for BPMN based on the [BPMN in Color](https://github.com/bpmn-miwg/bpmn-in-color) proposal. * [bpmn-js-example-react-properties-panel](https://github.com/bpmn-io/bpmn-js-example-react-properties-panel) - An example how to build a simple properties panel for bpmn-js using React. * [custom-bundle](./custom-bundle) - How to build a custom version of bpmn-js * [custom-elements](./custom-elements) - A modeler that allows you to create custom elements on a bpmn diagram. * [custom-meta-model](./custom-meta-model) - An example showing how extend the BPMN meta-model to recognize BPMN extension elements and attributes. * [custom-modeling-rules](./custom-modeling-rules) - Add custom rules to the bpmn-js modeler. * [properties-panel-extension](./properties-panel-extension) - An example showing how to extend the properties panel with custom controls. ## Featuring Libraries * [minimap](./minimap) - Adding a minimap to bpmn-js. * [transaction-boundaries](./transaction-boundaries) - Visualizing transaction boundaries in bpmn-js. ## Integrations * [bpmn-js-example-angular](https://github.com/bpmn-io/bpmn-js-example-angular) - Showing a possible integration of the toolkit into an [Angular](https://angular.io/) application. ## Additional Resources * [bpmn-js Walkthrough](https://bpmn.io/toolkit/bpmn-js/walkthrough/) - A full guide through the library and its underlying foundation. ## License MIT _(unless noted otherwise)_