# bpmn-js Examples This repository contains a number of examples showing how use and integrate [bpmn-js](https://github.com/bpmn-io/bpmn-js) 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. * [modeling-api](./modeling-api) - How to create, connect and edit elements using the API. ## 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 * [bpmn-js-example-model-extension](https://github.com/bpmn-io/bpmn-js-example-model-extension) - An example of creating a model extension for bpmn-js. * [bpmn-js-example-custom-rendering](https://github.com/bpmn-io/bpmn-js-example-custom-rendering) - An example of creating custom rendering for bpmn-js. * [bpmn-js-example-custom-controls](https://github.com/bpmn-io/bpmn-js-example-custom-controls) - An example of creating custom controls for bpmn-js. * [custom-elements](./custom-elements) - An introduction to custom elements, their use cases and implementation approaches. * [custom-modeling-rules](./custom-modeling-rules) - Add custom rules to the bpmn-js modeler. * [deep-linking](./deep-linking) - An example of how to switch between different diagram layers. * [properties-panel-async-extension](./properties-panel-async-extension) - An example showing how to handle asynchronous data loading inside the properties panel. * [properties-panel-extension](./properties-panel-extension) - An example showing how to extend the properties panel with custom controls. * [properties-panel-list-extension](./properties-panel-list-extension) - An example showing how to extend the properties panel with lists. ## 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. * [vue-bpmn](https://github.com/bpmn-io/vue-bpmn) - Showing a possible integration of the toolkit into a [Vue.js](https://vuejs.org) application. * [react-bpmn](https://github.com/bpmn-io/react-bpmn) - Showing a possible integration of the toolkit into a [React](https://reactjs.org/) application. * [svelte-bpmn](https://github.com/bpmn-io/svelte-bpmn) - Showing a possible integration of the toolkit into a [Svelte](https://svelte.dev/) application. ## Additional Resources * [bpmn-js Walkthrough](https://bpmn.io/toolkit/bpmn-js/walkthrough/) - A full guide through the library and its underlying foundation. * [bpmn.io Awesome List](https://github.com/bpmn-io/awesome-bpmn-io) - Links to great libraries and additional learning resources ## License MIT _(unless noted otherwise)_