@bpmn-sdk/editor

Full-featured interactive BPMN editor with undo/redo, HUD, and side-dock UI

Documentation · GitHub · Changelog

Overview

@bpmn-sdk/editor turns the @bpmn-sdk/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 @bpmn-sdk/editor @bpmn-sdk/canvas

Quick Start

import { BpmnEditor, initEditorHud, createSideDock } from "@bpmn-sdk/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

License

MIT © bpmn-sdk