Website · Documentation · GitHub · Changelog

Overview

@bpmnkit/editor turns the @bpmnkit/canvas viewer into a fully interactive editor. Drag to connect elements, inline-edit labels, resize shapes, attach boundary events, and integrate AI-assisted design — all through a composable API.

Features

• 40+ element types — all BPMN 2.0 tasks, events, gateways, sub-processes
• Drag-to-connect — draw sequence flows with automatic waypoint routing
• Resize & move — multi-select, group move, constrained resize
• Label editing — inline text editor with multi-line support
• Undo/redo — full command history with keyboard shortcuts
• Copy/paste — multi-element clipboard with offset paste
• Boundary events — attach and detach boundary events interactively
• HUD toolbar — customisable palette with shape categories
• Side dock — resizable right sidebar with Properties, AI chat, and Docs tabs
• Theme persistence — auto read/write localStorage with persistTheme

Installation

npm install @bpmnkit/editor @bpmnkit/canvas

Quick Start

import { BpmnEditor, initEditorHud, createSideDock } from "@bpmnkit/editor"

// Full editor (viewer + editing interactions)
const editor = new BpmnEditor({
  container: document.getElementById("editor")!,
  theme: "dark",
  persistTheme: true,
  plugins: [],
})

// Toolbar HUD (palette, zoom controls, etc.)
initEditorHud(editor, {
  container: document.getElementById("hud")!,
})

// Sidebar with Properties + AI tabs
const dock = createSideDock(document.body)
editor.loadXML(bpmnXml)

API Reference

BpmnEditor

Extends BpmnCanvas. Adds all editing interactions.

interface EditorOptions extends CanvasOptions {
  persistTheme?: boolean  // auto-save theme to localStorage
}

initEditorHud(editor, options)

Mounts the toolbar HUD into a container.

interface HudOptions {
  container: HTMLElement
  optimizeButton?: HTMLElement  // inject into action bar
  aiButton?: HTMLElement        // inject into action bar
}

createSideDock(container) → SideDock

Creates the right-side collapsible dock.

interface SideDock {
  el: HTMLElement
  propertiesPane: HTMLDivElement
  aiPane: HTMLDivElement
  docsPane: HTMLDivElement
  switchTab(tab: "properties" | "ai" | "docs" | "history" | "play"): void
  expand(): void
  collapse(): void
  collapsed: boolean
  setDiagramInfo(processName: string, fileName: string): void
}

Related Packages

| Package | Description | |---------|-------------| | @bpmnkit/core | BPMN/DMN/Form parser, builder, layout engine | | @bpmnkit/canvas | Zero-dependency SVG BPMN viewer | | @bpmnkit/engine | Lightweight BPMN process execution engine | | @bpmnkit/feel | FEEL expression language parser & evaluator | | @bpmnkit/plugins | 22 composable canvas plugins | | @bpmnkit/api | Camunda 8 REST API TypeScript client | | @bpmnkit/ascii | Render BPMN diagrams as Unicode ASCII art | | @bpmnkit/ui | Shared design tokens and UI components | | @bpmnkit/profiles | Shared auth, profile storage, and client factories for CLI & proxy | | @bpmnkit/operate | Monitoring & operations frontend for Camunda clusters | | @bpmnkit/connector-gen | Generate connector templates from OpenAPI specs | | @bpmnkit/cli | Camunda 8 command-line interface (casen) | | @bpmnkit/proxy | Local AI bridge and Camunda API proxy server |

License

MIT © BPMN Kit — made by u11g