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:

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 for many more supported usage scenarios.

You may attach or detach the viewer dynamically to any element on the page, too:

const viewer = new BpmnJS(); // attach it to some element viewer.attachTo('#container'); // detach the panel viewer.detach();

• Demo
• Issues
• Examples
• Forum
• Changelog

Prepare the project by installing all dependencies:

npm install

Then, depending on your use-case you may run any of the following commands:

# 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 when building the latest development snapshot.

bpmn-js builds on top of a few powerful tools:

• bpmn-moddle: Read / write support for BPMN 2.0 XML in the browsers
• diagram-js: Diagram rendering and editing toolkit

It is an extensible toolkit, complemented by many additional utilities.

Use under the terms of the bpmn.io license.