{"id":13631063,"url":"https://github.com/bpmn-io/bpmn-js-examples","last_synced_at":"2025-04-27T04:24:40.359Z","repository":{"id":17284380,"uuid":"20054543","full_name":"bpmn-io/bpmn-js-examples","owner":"bpmn-io","description":"Examples how to use bpmn-js","archived":false,"fork":false,"pushed_at":"2025-04-25T09:09:26.000Z","size":11987,"stargazers_count":1908,"open_issues_count":8,"forks_count":1241,"subscribers_count":78,"default_branch":"main","last_synced_at":"2025-04-26T11:33:09.853Z","etag":null,"topics":["bpmn","bpmn-js","hacktoberfest","javascript","svg"],"latest_commit_sha":null,"homepage":"https://bpmn.io/toolkit/bpmn-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bpmn-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-05-22T09:02:09.000Z","updated_at":"2025-04-25T09:09:30.000Z","dependencies_parsed_at":"2024-01-14T06:53:14.719Z","dependency_job_id":"ad58f453-bbd0-4709-bf2a-9acca41f25bd","html_url":"https://github.com/bpmn-io/bpmn-js-examples","commit_stats":{"total_commits":684,"total_committers":36,"mean_commits":19.0,"dds":0.6666666666666667,"last_synced_commit":"fba83ff9374cb8e4fc90fb237a0c7f241be42f20"},"previous_names":[],"tags_count":242,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fbpmn-js-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fbpmn-js-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fbpmn-js-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fbpmn-js-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpmn-io","download_url":"https://codeload.github.com/bpmn-io/bpmn-js-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251086664,"owners_count":21534094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bpmn","bpmn-js","hacktoberfest","javascript","svg"],"created_at":"2024-08-01T22:02:09.087Z","updated_at":"2025-04-27T04:24:40.343Z","avatar_url":"https://github.com/bpmn-io.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Learning Resources"],"sub_categories":[],"readme":"# bpmn-js Examples\n\nThis repository contains a number of examples showing how to use and integrate\n[bpmn-js](https://github.com/bpmn-io/bpmn-js) into your applications.\n\n\n## Starter\n\n* [starter](./starter) - Getting started with [bpmn-js](https://github.com/bpmn-io/bpmn-js) using our [pre-packaged distribution](./pre-packaged).\n\n\n## Basic\n\n* [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/).\n* [colors](./colors) - Showcases different ways to add colors to your BPMN diagram.\n* [embedding](./embedding) - Shows embedding of BPMN diagrams into a larger website.\n* [interaction](./interaction) - Listen to diagram events and react to them.\n* [overlays](./overlays) - Attach overlays to BPMN 2.0 diagrams to provide custom buttons or showing additional information.\n* [url-viewer](./url-viewer) - A simple url viewer for BPMN 2.0 process diagrams.\n* [types](./types) - How to use the types shipped with bpmn-js.\n\n\n## Intermediate\n\n* [modeler](./modeler) - A simple BPMN 2.0 modeler. Gains more features as time passes by.\n* [commenting](./commenting) - A simple commenting application build on top of BPMN 2.0 diagrams\n* [bpmn-properties](./bpmn-properties) - Read and write BPMN properties with bpmn-js.\n* [i18n](./i18n) - Use a custom translation module with bpmn-js.\n* [properties-panel](./properties-panel) - Add a properties panel and edit execution related BPMN 2.0 properties. \n* [theming](./theming) - an example that showcases the different aspects of theming bpmn-js.\n* [modeling-api](./modeling-api) - How to create, connect and edit elements using the API.\n\n\n## Advanced\n\n* [bpmn-js-nyan](https://github.com/nikku/bpmn-js-nyan) - Model nyan cats instead of service tasks, resize elements and assign custom element colors.\n* [bpmn-js-task-priorities](https://github.com/bpmn-io/bpmn-js-task-priorities) - persistent task colors, diagram interaction and custom extension elements demo.\n* [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.\n* [custom-bundle](./custom-bundle) - How to build a custom version of bpmn-js\n* [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.\n* [bpmn-js-example-custom-rendering](https://github.com/bpmn-io/bpmn-js-example-custom-rendering) - An example of creating custom rendering for bpmn-js.\n* [bpmn-js-example-custom-controls](https://github.com/bpmn-io/bpmn-js-example-custom-controls) - An example of creating custom controls for bpmn-js.\n* [custom-elements](./custom-elements) - An introduction to custom elements, their use cases and implementation approaches.\n* [custom-modeling-rules](./custom-modeling-rules) - Add custom rules to the bpmn-js modeler.\n* [deep-linking](./deep-linking) - An example of how to switch between different diagram layers.\n\n\n### Properties Panel\n\n* [properties-panel-extension](./properties-panel-extension) - An example showing how to extend the properties panel with custom controls.\n* [properties-panel-async-extension](./properties-panel-async-extension) - An example showing how to handle asynchronous data loading inside the properties panel.\n* [properties-panel-list-extension](./properties-panel-list-extension) - An example showing how to extend the properties panel with lists.\n* [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.\n\n\n## Featuring Libraries\n\n* [minimap](./minimap) - Adding a minimap to bpmn-js.\n* [transaction-boundaries](./transaction-boundaries) - Visualizing transaction boundaries in bpmn-js.\n\n\n## Integrations\n\n* [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.\n* [vue-bpmn](https://github.com/bpmn-io/vue-bpmn) - Showing a possible integration of the toolkit into a [Vue.js](https://vuejs.org) application.\n* [react-bpmn](https://github.com/bpmn-io/react-bpmn) - Showing a possible integration of the toolkit into a [React](https://reactjs.org/) application.\n* [svelte-bpmn](https://github.com/bpmn-io/svelte-bpmn) - Showing a possible integration of the toolkit into a [Svelte](https://svelte.dev/) application.\n\n\n## Additional Resources\n\n* [bpmn-js Walkthrough](https://bpmn.io/toolkit/bpmn-js/walkthrough/) - A full guide through the library and its underlying foundation.\n* [bpmn.io Awesome List](https://github.com/bpmn-io/awesome-bpmn-io) - Links to great libraries and additional learning resources\n\n## License\n\nMIT _(unless noted otherwise)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpmn-io%2Fbpmn-js-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpmn-io%2Fbpmn-js-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpmn-io%2Fbpmn-js-examples/lists"}