Package Exports

@bpmn-sdk/plugins/ai-bridge
@bpmn-sdk/plugins/ascii-view
@bpmn-sdk/plugins/command-palette
@bpmn-sdk/plugins/command-palette-editor
@bpmn-sdk/plugins/config-panel
@bpmn-sdk/plugins/config-panel-bpmn
@bpmn-sdk/plugins/dmn-editor
@bpmn-sdk/plugins/dmn-viewer
@bpmn-sdk/plugins/element-docs
@bpmn-sdk/plugins/feel-playground
@bpmn-sdk/plugins/form-editor
@bpmn-sdk/plugins/form-viewer
@bpmn-sdk/plugins/history
@bpmn-sdk/plugins/main-menu
@bpmn-sdk/plugins/minimap
@bpmn-sdk/plugins/optimize
@bpmn-sdk/plugins/process-runner
@bpmn-sdk/plugins/storage
@bpmn-sdk/plugins/storage-tabs-bridge
@bpmn-sdk/plugins/tabs
@bpmn-sdk/plugins/token-highlight
@bpmn-sdk/plugins/watermark
@bpmn-sdk/plugins/zoom-controls

Readme

@bpmn-sdk/plugins

22 composable canvas plugins — minimap, AI chat, process simulation, storage, and more

Overview

@bpmn-sdk/plugins is a single package containing 22 ready-made CanvasPlugin add-ons for @bpmn-sdk/canvas and @bpmn-sdk/editor. Each plugin is imported individually via subpath exports so you only bundle what you use.

Installation

npm install @bpmn-sdk/plugins

Plugins

Visualization

Subpath	Factory	Description
`/minimap`	`createMinimapPlugin()`	Thumbnail navigation minimap
`/watermark`	`createWatermarkPlugin(text)`	Corner watermark overlay
`/ascii-view`	`createAsciiViewPlugin()`	Toggle ASCII art rendering
`/zoom-controls`	`createZoomControlsPlugin()`	On-canvas +/− zoom buttons

File Management

Subpath	Factory	Description
`/tabs`	`createTabsPlugin(options)`	Multi-file tab bar with welcome screen
`/storage`	`createStoragePlugin(options)`	IndexedDB workspaces/projects/files with auto-save
`/storage-tabs-bridge`	`createStorageTabsBridge(options)`	Wire tabs + storage + main menu together

Editing

Subpath	Factory	Description
`/command-palette`	`createCommandPalettePlugin()`	⌘K command palette
`/command-palette-editor`	`createCommandPaletteEditorPlugin()`	Editor-specific commands
`/history`	`createHistoryPlugin()`	Visual undo/redo history panel
`/config-panel`	`createConfigPanelPlugin(options)`	Properties panel for selected elements
`/config-panel-bpmn`	`createConfigPanelBpmnPlugin(options)`	BPMN-specific properties panel

DMN & Forms

Subpath	Factory	Description
`/dmn-editor`	—	Embedded DMN decision table editor
`/dmn-viewer`	—	Read-only DMN viewer
`/form-editor`	—	Camunda Form schema editor
`/form-viewer`	—	Read-only form renderer
`/feel-playground`	—	Interactive FEEL expression tester

Process Simulation

Subpath	Factory	Description
`/process-runner`	`createProcessRunnerPlugin(options)`	Run BPMN instances with play/step/stop UI
`/token-highlight`	`createTokenHighlightPlugin()`	Highlight active/visited elements during execution
`/optimize`	`createOptimizePlugin()`	Show optimizer findings overlay

Subpath	Factory	Description
`/ai-bridge`	`createAiBridgePlugin(options)`	AI chat panel with diagram apply/checkpoint
`/element-docs`	`createElementDocsPlugin(options)`	Built-in BPMN element reference docs
`/main-menu`	`createMainMenuPlugin(options)`	File/Edit top-level menu

Usage Examples

Minimap

import { BpmnCanvas } from "@bpmn-sdk/canvas"
import { createMinimapPlugin } from "@bpmn-sdk/plugins/minimap"

const canvas = new BpmnCanvas({
  container: document.getElementById("canvas")!,
  plugins: [createMinimapPlugin()],
})

Storage + Tabs

import { createStoragePlugin } from "@bpmn-sdk/plugins/storage"
import { createTabsPlugin } from "@bpmn-sdk/plugins/tabs"
import { createStorageTabsBridge } from "@bpmn-sdk/plugins/storage-tabs-bridge"

const storage = createStoragePlugin({ editor })
const tabs = createTabsPlugin({ editor })
const bridge = createStorageTabsBridge({ storage, tabs, mainMenu })

Process Simulation

import { Engine } from "@bpmn-sdk/engine"
import { createTokenHighlightPlugin } from "@bpmn-sdk/plugins/token-highlight"
import { createProcessRunnerPlugin } from "@bpmn-sdk/plugins/process-runner"

const engine = new Engine()
const tokenHighlight = createTokenHighlightPlugin()
const processRunner = createProcessRunnerPlugin({ engine, tokenHighlight })

const canvas = new BpmnCanvas({
  container,
  plugins: [tokenHighlight, processRunner],
})

AI Chat Panel

import { createAiBridgePlugin } from "@bpmn-sdk/plugins/ai-bridge"

const ai = createAiBridgePlugin({
  serverUrl: "http://localhost:3033",
  container: dock.aiPane,
  onOpen: () => dock.expand(),
})

Package	Description
`@bpmn-sdk/core`	BPMN/DMN/Form parser, builder, layout engine
`@bpmn-sdk/canvas`	Zero-dependency SVG BPMN viewer
`@bpmn-sdk/editor`	Full-featured interactive BPMN editor
`@bpmn-sdk/engine`	Lightweight BPMN process execution engine
`@bpmn-sdk/feel`	FEEL expression language parser & evaluator
`@bpmn-sdk/api`	Camunda 8 REST API TypeScript client
`@bpmn-sdk/ascii`	Render BPMN diagrams as Unicode ASCII art
`@bpmn-sdk/profiles`	Shared auth, profile storage, and client factories for CLI & proxy
`@bpmn-sdk/operate`	Monitoring & operations frontend for Camunda clusters

JSPM

@bpmn-sdk/plugins

Package Exports

Readme

@bpmn-sdk/plugins

Overview

Installation

Plugins

Visualization

File Management

Editing

DMN & Forms

Process Simulation

AI & Navigation

Usage Examples

Minimap

Storage + Tabs

Process Simulation

AI Chat Panel

License

@bpmn-sdk/plugins

Package Exports

Readme

@bpmn-sdk/plugins

Overview

Installation

Plugins

Visualization

File Management

Editing

DMN & Forms

Process Simulation

AI & Navigation

Usage Examples

Minimap

Storage + Tabs

Process Simulation

AI Chat Panel

Related Packages

License