Gathering detailed insights and metrics for bpmn-js
Gathering detailed insights and metrics for bpmn-js
Gathering detailed insights and metrics for bpmn-js
Gathering detailed insights and metrics for bpmn-js
bpmn-js-properties-panel
A simple properties panel for bpmn-js
bpmn-js-token-simulation
bpmn-js token simulation extension
camunda-bpmn-js-behaviors
Camunda Platform 7 and 8 behaviors for bpmn-js
@bpmn-io/diagram-js-ui
[](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml)
A BPMN 2.0 rendering toolkit and web modeler.
npm install bpmn-js
Typescript
Module System
Min. Node Version
Node Version
NPM Version
97.6
Supply Chain
94.9
Quality
91.6
Maintenance
100
Vulnerability
98.8
License
JavaScript (98.91%)
TypeScript (0.71%)
Shell (0.22%)
CSS (0.16%)
Total Downloads
12,599,402
Last Day
2,780
Last Week
72,938
Last Month
307,401
Last Year
3,479,286
NOASSERTION License
9,084 Stars
3,226 Commits
1,389 Forks
228 Watchers
46 Branches
50 Contributors
Updated on Jun 30, 2025
Minified
Minified + Gzipped
Latest Version
18.6.2
Package Id
bpmn-js@18.6.2
Unpacked Size
4.76 MB
Size
1.10 MB
File Count
366
NPM Version
10.9.2
Node Version
22.14.0
Published on
May 22, 2025
Cumulative downloads
Total Downloads
Last Day
-7.8%
2,780
Compared to previous day
Last Week
-8.2%
72,938
Compared to previous week
Last Month
-1.1%
307,401
Compared to previous month
Last Year
17.5%
3,479,286
Compared to previous year
8
45
View and edit BPMN 2.0 diagrams in the browser.
Use the library pre-packaged or include it via npm into your node-style web-application.
To get started, create a bpmn-js instance and render BPMN 2.0 diagrams in the browser:
1const xml = '...'; // my BPMN 2.0 xml 2const viewer = new BpmnJS({ 3 container: 'body' 4}); 5 6try { 7 const { warnings } = await viewer.importXML(xml); 8 9 console.log('rendered'); 10} catch (err) { 11 console.log('error rendering', err); 12}
Checkout our examples for many more supported usage scenarios.
You may attach or detach the viewer dynamically to any element on the page, too:
1const viewer = new BpmnJS(); 2 3// attach it to some element 4viewer.attachTo('#container'); 5 6// detach the panel 7viewer.detach();
Prepare the project by installing all dependencies:
1npm install
Then, depending on your use-case you may run any of the following commands:
1# build the library and run all tests 2npm run all 3 4# spin up a single local modeler instance 5npm start 6 7# run the full development setup 8npm run dev
You may need to perform additional project setup when building the latest development snapshot.
bpmn-js builds on top of a few powerful tools:
It is an extensible toolkit, complemented by many additional utilities.
Use under the terms of the bpmn.io license.
No vulnerabilities found.
Reason
30 commit(s) and 10 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
security policy file detected
Details
Reason
packaging workflow detected
Details
Reason
SAST tool is run on all commits
Details
Reason
license file detected
Details
Reason
7 existing vulnerabilities detected
Details
Reason
Found 4/27 approved changesets -- score normalized to 1
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Score
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More