View and edit DMN 1.1 diagrams in the browser.
JavaScript CSS Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.

dmn-js - DMN for the web

Build Status

View and edit DMN 1.1 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 dmn-js instance and render DMN 1.1 diagrams in the browser:

var xml; // my DMN 1.1 xml
var viewer = new DmnJS({
  container: 'body'

viewer.importXML(xml, function(err) {

  if (err) {
    console.log('error rendering', err);
  } else {

Checkout our examples for more supported usage scenarios.

Dynamic Attach/Detach

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

var viewer = new DmnJS();

// attach it to some element

// detach the panel


Building the Project

Perform the following steps to build the library, including running all tests:

npm install
npm run all

Run tests in individual packages:

npm run dev -- dmn-js

Please checkout our contributing guidelines if you plan to file an issue or pull request.


dmn-js builds on top of a few additional powerful tools:

  • dmn-moddle: Read / write support for DMN 1.1 XML
  • diagram-js: Diagram rendering and editing toolkit
  • table-js: Table rendering and editing toolkit


Use under the terms of the license.