1# dmn-js - DMN for the web
2
3[![Build Status](https://travis-ci.com/bpmn-io/dmn-js.svg?branch=master)](https://travis-ci.com/bpmn-io/dmn-js)
4
5View and edit DMN 1.3 diagrams in the browser.
6
7
8## Installation
9
10Use the library [pre-packaged](https://github.com/bpmn-io/dmn-js-examples/tree/master/pre-packaged)
11or include it [via npm](https://github.com/bpmn-io/dmn-js-examples/tree/master/bundling)
12into your node-style web-application.
13
14
15## Usage
16
17To get started, create a [dmn-js](https://github.com/bpmn-io/dmn-js) instance
18and render [DMN 1.3 diagrams](http://www.omg.org/spec/DMN/About-DMN/) in the browser:
19
20```javascript
21var xml; // my DMN 1.3 xml
22var viewer = new DmnJS({
23  container: 'body'
24});
25
26viewer.importXML(xml, function(err) {
27
28  if (err) {
29    console.log('error rendering', err);
30  } else {
31    console.log('rendered');
32  }
33});
34```
35
36Checkout our [examples](https://github.com/bpmn-io/dmn-js-examples) for
37more supported usage scenarios.
38
39
40### Dynamic Attach/Detach
41
42You may attach or detach the viewer dynamically to any element on the page, too:
43
44```javascript
45var viewer = new DmnJS();
46
47// attach it to some element
48viewer.attachTo('#container');
49
50// detach the panel
51viewer.detach();
52```
53
54
55## Resources
56
57* [Demo](http://demo.bpmn.io/dmn)
58* [Issues](https://github.com/bpmn-io/dmn-js/issues)
59* [Examples](https://github.com/bpmn-io/dmn-js-examples)
60* [Forum](https://forum.bpmn.io)
61* [Changelog](./CHANGELOG.md)
62
63
64## Related
65
66dmn-js builds on top of a few additional powerful tools:
67
68* [dmn-moddle](https://github.com/bpmn-io/dmn-moddle): Read / write support for DMN 1.3 XML
69* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
70* [table-js](https://github.com/bpmn-io/table-js): Table rendering and editing toolkit
71
72
73## License
74
75Use under the terms of the [bpmn.io license](http://bpmn.io/license).