Over the last few months, we worked hard to re-write our DMN viewer and editor with focus on improved user experience and performance. On top of the promised improvements, the release adds a number of valuable features, not to be found in our legacy DMN toolkit.
A few months ago we set out to rebuild our DMN toolkit from scratch focusing on both usability and performance. More than 400 commits and numerous intermediate releases later we have accomplished this mission.
Improved keyboard navigation in action.
Try out the new release on demo.bpmn.io/dmn.
New Features
Compared to our legacy DMN toolkit this release comes with numerous improvements:
FEAT: Multi-view awareFEAT: New mode-less designFEAT: Improved script / expression language visibilityFEAT: Copy, cut and paste rows and columns with implementation detailsFEAT: Reworked row and column drag and dropFEAT: New pre-packaged distribution
Since our first post about dmn-js@2 we have carried out numerous additional improvements on our decision table editor:
FEAT: Improved selection and keyboard navigationFEAT: Reworked annotations / cell descriptionsFEAT: Open DMN tables without inputsCHORE: restore ability to add custom hit policy and expression languages
Check out the newly introduced changelog for details on all improvements.
In terms of non-functional features, this release is a complete re-write of our DMN toolkit in modern JavaScript. Thanks to the improvements in its underlying architecture, it is able to open larger decision tables with ease.
New Pre-Packaged Distribution
The new version of dmn-js discontinues our Bower bundle. Pre-built versions of the DMN modeler and viewer are now distributed directly with the dmn-js npm package and available for download via unpkg.
You may reference individual assets directly from unpkg, as it is a full-fledged CDN:
<!-- required viewer styles -->
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-js-shared.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-js-drd.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-js-decision-table.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-js-literal-expression.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4/dist/assets/dmn-font/css/dmn.css">
<!-- viewer distro -->
<script src="https://unpkg.com/dmn-js@4/dist/dmn-viewer.development.js"></script>Check out the new pre-packaged example to learn how to embed the toolkit without prior setup.
Road Ahead
Please try out the latest toolkit version at demo.bpmn.io or the starter example. We are interested in your feedback. Is there anything you like in particular about the new mode-less approach? Something you're missing about the good old simple / advanced modes? Tell us about it in our forums.
As always, get the latest DMN toolkit pre-packaged or as source code via npm or unpkg.
Are you passionate about JavaScript, modeling, and the web?
Join Camunda and build modeling tools people 
.