Embed a BPMN editor in your app

Why this matters for your team: your product can offer process design as a feature — customers or internal teams build their own workflows visually — without you building or licensing a diagramming engine.

Building process-design features into your own product usually means either embedding a heavyweight third-party editor or building canvas interaction (drag, connect, resize, label-edit) from scratch. @bpmnkit/editor is a full BPMN 2.0 editor — canvas, properties panel, and an AI bridge — that mounts into any container element.

Mounting the editor

import { BpmnEditor } from "@bpmnkit/editor";

const editor = new BpmnEditor({
  container: document.getElementById("editor-container"),
  xml: existingXml, // optional — starts blank if omitted
  theme: "neon",
});

editor.on("diagram:change", () => {
  const xml = editor.exportXml();
  saveToBackend(xml);
});

The editor emits change events with the current BPMN 2.0 XML, so persisting a diagram is just wiring that event to wherever you store process definitions.

Read-only viewing

If you only need to display diagrams — not edit them — @bpmnkit/canvas is a lighter, zero-dependency SVG viewer with pan/zoom and light/dark theming, useful for dashboards or audit views where editing isn't needed.

@bpmnkit/editor reference @bpmnkit/canvas reference Try the editor Compare to bpmn-js

Frequently asked

Does the editor require a backend?

No — @bpmnkit/editor runs entirely client-side. It reads and writes BPMN 2.0 XML directly; where you store that XML (a database, a file, a Camunda deployment) is up to your app.

Can I use it in React, Vue, or plain JavaScript?

@bpmnkit/editor is a framework-agnostic class that mounts into a container element, so it works the same way regardless of your view framework — wrap it in a small adapter component for React/Vue if you want idiomatic lifecycle hooks.