# bpmn-js

> A bpmn 2.0 toolkit and web modeler

Latest version **18.28.0** (published 2026-09-04) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install bpmn-js
pnpm add bpmn-js
yarn add bpmn-js
bun add bpmn-js
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 18.28.0 |
| Published | 2026-09-04 |
| First published | 2014-05-08 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | * |
| Dependencies | 8 |
| Unpacked size | 5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9653 |
| Author | Nico Rehwaldt |
| Maintainers | bpmn-io-admin, nikku, barmac, philippfromme, maxtru, skaiir-camunda, vsgoulart, barinali, ev-camunda, jarekdanielak, alekseymanetov |
| Keywords | bpmn, bpmn-js, toolkit, web modeler, modeler, modeling, process modeling |

## Links

- npm: https://www.npmjs.com/package/bpmn-js
- Repository: https://github.com/bpmn-io/bpmn-js
- Homepage: https://github.com/bpmn-io/bpmn-js#readme
- Issues: https://github.com/bpmn-io/bpmn-js/issues
- npm.io page: https://npm.io/package/bpmn-js

## Dependencies (8)

- [ids](https://npm.io/package/ids.md) ^3.0.2
- [min-dom](https://npm.io/package/min-dom.md) ^5.3.0
- [min-dash](https://npm.io/package/min-dash.md) ^5.1.0
- [tiny-svg](https://npm.io/package/tiny-svg.md) ^4.1.4
- [diagram-js](https://npm.io/package/diagram-js.md) ^15.26.0
- [bpmn-moddle](https://npm.io/package/bpmn-moddle.md) ^10.2.0
- [inherits-browser](https://npm.io/package/inherits-browser.md) ^0.1.0
- [diagram-js-direct-editing](https://npm.io/package/diagram-js-direct-editing.md) ^3.5.1

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 18.28.0 (latest) — 2026-09-04
- 10.0.0-alpha.1 (next) — 2022-08-17
- 9.0.0-subprocesses.3 (exp) — 2021-11-19
- 2.5.4 (backports) — 2019-06-13
- 18.27.1 — 2026-09-03
- 18.27.0 — 2026-08-31
- 18.26.0 — 2026-08-28
- 18.25.1 — 2026-08-19
- 18.25.0 — 2026-08-19
- 18.24.0 — 2026-08-11
- 18.23.0 — 2026-08-10
- 18.22.1 — 2026-07-29
- 18.22.0 — 2026-07-23
- 18.21.0 — 2026-07-08
- 18.20.0 — 2026-07-06
- … 374 more at https://npm.io/package/bpmn-js/versions

## README

# bpmn-js - BPMN 2.0 for the web

[![Build Status](https://github.com/bpmn-io/bpmn-js/workflows/CI/badge.svg)](https://github.com/bpmn-io/bpmn-js/actions?query=workflow%3ACI)

View and edit BPMN 2.0 diagrams in the browser.

[![bpmn-js screencast](./resources/screencast.gif "bpmn-js in action")](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.

## 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).

---
_Source: https://npm.io/package/bpmn-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._