Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bpmn-io/bpmn-js
A BPMN 2.0 rendering toolkit and web modeler.
https://github.com/bpmn-io/bpmn-js
bpmn bpmn-js browser hacktoberfest javascript modeler toolkit
Last synced: 5 days ago
JSON representation
A BPMN 2.0 rendering toolkit and web modeler.
- Host: GitHub
- URL: https://github.com/bpmn-io/bpmn-js
- Owner: bpmn-io
- License: other
- Created: 2014-03-10T12:57:00.000Z (almost 11 years ago)
- Default Branch: develop
- Last Pushed: 2024-10-28T12:51:10.000Z (3 months ago)
- Last Synced: 2024-10-29T11:26:01.820Z (3 months ago)
- Topics: bpmn, bpmn-js, browser, hacktoberfest, javascript, modeler, toolkit
- Language: JavaScript
- Homepage: https://bpmn.io/toolkit/bpmn-js/
- Size: 13.7 MB
- Stars: 8,608
- Watchers: 225
- Forks: 1,330
- Open Issues: 136
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - bpmn-io/bpmn-js - A BPMN 2.0 rendering toolkit and web modeler. (JavaScript)
- awesome-ccamel - bpmn-io/bpmn-js - A BPMN 2.0 rendering toolkit and web modeler. (JavaScript)
- awesome-repositories - bpmn-io/bpmn-js
- awesome-github-star - bpmn-js - io | 7490 | (JavaScript)
- awesome - bpmn-js
- StarryDivineSky - bpmn-io/bpmn-js
- awesome-bpmn-io - bpmn-js
README
# bpmn-js - BPMN 2.0 for the web
[](https://github.com/bpmn-io/bpmn-js/actions?query=workflow%3ACI)
View and edit BPMN 2.0 diagrams in the browser.
[](http://demo.bpmn.io/s/start)
## Installation
Use the library [pre-packaged](https://github.com/bpmn-io/bpmn-js-examples/tree/main/pre-packaged)
or include it [via npm](https://github.com/bpmn-io/bpmn-js-examples/tree/main/bundling)
into your node-style web-application.
## Usage
To get started, create a [bpmn-js](https://github.com/bpmn-io/bpmn-js) instance
and render [BPMN 2.0 diagrams](https://www.omg.org/spec/BPMN/2.0.2/) in the browser:
```javascript
const xml = '...'; // my BPMN 2.0 xml
const viewer = new BpmnJS({
container: 'body'
});
try {
const { warnings } = await viewer.importXML(xml);
console.log('rendered');
} catch (err) {
console.log('error rendering', err);
}
```
Checkout our [examples](https://github.com/bpmn-io/bpmn-js-examples) for many
more supported usage scenarios.
### Dynamic Attach/Detach
You may attach or detach the viewer dynamically to any element on the page, too:
```javascript
const viewer = new BpmnJS();
// attach it to some element
viewer.attachTo('#container');
// detach the panel
viewer.detach();
```
## Resources
* [Demo](http://demo.bpmn.io)
* [Issues](https://github.com/bpmn-io/bpmn-js/issues)
* [Examples](https://github.com/bpmn-io/bpmn-js-examples)
* [Forum](https://forum.bpmn.io)
* [Changelog](./CHANGELOG.md)
## Build and Run
Prepare the project by installing all dependencies:
```sh
npm install
```
Then, depending on your use-case you may run any of the following commands:
```sh
# build the library and run all tests
npm run all
# spin up a single local modeler instance
npm start
# run the full development setup
npm run dev
```
You may need to perform [additional project setup](./docs/project/SETUP.md) when
building the latest development snapshot.
## Related
bpmn-js builds on top of a few powerful tools:
* [bpmn-moddle](https://github.com/bpmn-io/bpmn-moddle): Read / write support for BPMN 2.0 XML in the browsers
* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
It is an extensible toolkit, complemented by many [additional utilities](https://github.com/bpmn-io/awesome-bpmn-io).
## License
Use under the terms of the [bpmn.io license](http://bpmn.io/license).