BPMN Kit vs. bpmn-js
bpmn-js is a mature, widely-used open-source toolkit from bpmn.io for rendering and interactively modeling BPMN 2.0 diagrams in the browser. BPMN Kit is a TypeScript toolkit for generating, simulating and deploying BPMN 2.0 from code, with its own viewer and editor. Here's how they compare.
| BPMN Kit | bpmn-js | |
|---|---|---|
| Licence | MIT, no conditions beyond the copyright notice. No watermark. | MIT-derived bpmn.io licence that requires the bpmn.io watermark to stay on every rendered diagram, unaltered and fully visible |
| Primary purpose | TypeScript toolkit: generate, lint, simulate and deploy BPMN from code, plus a viewer and a full editor | Toolkit for rendering and interactively modeling BPMN diagrams in the browser |
| Runtime | Node.js, browsers, Deno, Bun, edge — zero runtime dependencies in core | Browser (SVG/DOM rendering); bpmn-moddle parses XML in Node too |
| Generate a diagram from code | Yes — Bpmn.createProcess().startEvent()...build() with typed elements | No fluent builder; you script the diagram-js model or write XML |
| Auto-layout | Built in (.withAutoLayout()), runs synchronously in milliseconds; in our own measurement bpmn-auto-layout 2.0 still routes edges more cleanly | Separate package, bpmn-auto-layout |
| Interactive editor | @bpmnkit/editor — palette, properties panel, undo/redo, copy/paste, align, touch, keyboard and screen-reader announcements | bpmn-js Modeler with bpmn-js-properties-panel — the most widely used BPMN modeler on the web |
| Simulation | @bpmnkit/engine executes the process — FEEL conditions, job-worker mocks, DMN, timers — with scenario tests | bpmn-js-token-simulation animates tokens; expressions and workers are not evaluated |
| Linting | Built-in optimizer (~40 rules), casen lint, VS Code Problems panel | bpmnlint with a plugin ecosystem and Camunda rules |
| Camunda 8 deployment | @bpmnkit/api — 180-method typed REST client | Not included |
| DMN and Forms | Same package (Dmn, Form builders), FEEL with 94% DMN TCK | Separate libraries (dmn-js, form-js) |
| AI / LLM-friendly | Compact intermediate format, MCP server, offline docs pack for agents | Not a design goal |
| Maturity & ecosystem | Newer and much smaller; 12 core packages at 1.0 | Mature, widely adopted, large extension ecosystem, near-daily releases |
The licence difference
bpmn-js is free to use, but its licence adds one condition to MIT. Quoted from the bpmn-js LICENSE:
The source code responsible for displaying the bpmn.io project watermark that links back to https://bpmn.io as part of rendered diagrams MUST NOT be removed or changed. When this software is being used in a website or application, the watermark must stay fully visible and not visually overlapped by other elements.
dmn-js and form-js carry the same condition. If you embed a BPMN editor in your own product, that is a visible bpmn.io mark on every diagram your users see. BPMN Kit is plain MIT — keep the copyright notice with the source, and nothing else.
Frequently asked
Do I have to show a watermark when I embed BPMN Kit?
No. BPMN Kit is plain MIT: keep the copyright notice with the source and nothing else. bpmn-js, dmn-js and form-js use the bpmn.io licence, which requires the bpmn.io watermark to stay on every rendered diagram, unchanged and not overlapped by other elements.
Is BPMN Kit a replacement for bpmn-js?
It can be. BPMN Kit has its own viewer and editor, so it can replace bpmn-js where you need a modeler without the watermark or a code-first workflow. bpmn-js has the larger ecosystem of extensions, lint rules and element-template tooling. The two read and write the same BPMN 2.0 XML, so they are not mutually exclusive.
Can I generate a BPMN diagram programmatically with bpmn-js?
bpmn-js exposes a lower-level diagram-js model you can script against, but it does not provide a fluent builder API or automatic layout for generating a complete, valid BPMN 2.0 process from code the way @bpmnkit/core does.