bpmn-js

BPMN 2.0 rendering toolkit and web modeler.

Try Online Download

Currently v0.22.1. View on GitHub.

BPMN everywhere, for everyone

Create, embed and extend BPMN diagrams in your Browser. Use it standalone or integrate it into your application.

Model BPMN 2.0 diagrams

Model

Easily create your own BPMN 2.0 diagrams using a web-based modeling component.

Embed BPMN 2.0 diagrams into the application

Embed and Annotate

Use the toolkit to embed BPMN 2.0 diagrams into your applications. Enrich them with the data that is important for you and your business.

Extend the framework

Extend

Integrate an in-browser process engine, token simulation, styling or enhanced interactivity. It is up to you because bpmn-js is an open toolkit.

Add BPMN to your Application

Embed BPMN diagrams in your application with a few lines of code. 

<script>
  var viewer = new BpmnJS({ container: 'body' });

  viewer.importXML(bpmnXML, function(err) {

    if (err) {
      console.log('error rendering', err);
    } else {
      console.log('we are good!');
    }
  });
</script>

Use the seed project to get started in no time.

Read our walkthrough or check out some examples to learn more.

Make it yours

bpmn-js is built for extensibility. Customize and extend the toolkit to suit your needs.

Built and battle tested by Camunda

We provide tooling for viewing and editing BPMN, DMN and CMMN diagrams in your browser.

Our libraries are extensible, embeddable and open source on GitHub.