{"_id":"@bpmn-sdk/canvas","_rev":"7-d2daa7d5b5fdfe0c112e7f261ca2cf5b","name":"@bpmn-sdk/canvas","dist-tags":{"latest":"0.0.8"},"versions":{"0.0.1":{"name":"@bpmn-sdk/canvas","version":"0.0.1","_id":"@bpmn-sdk/canvas@0.0.1","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"dist":{"shasum":"df50ca5a6f122e204a2b2b7c5c1c121e8cfdcdb0","tarball":"https://registry.npmjs.org/@bpmn-sdk/canvas/-/canvas-0.0.1.tgz","fileCount":33,"integrity":"sha512-JRYatoL6X32XP9Uzgy8Ij+Uc29IVMPamaF12O2PTEqsveT3sPmOHcshjLmklV+EeDqxFGPT+05LKExuZPsN4Yg==","signatures":[{"sig":"MEYCIQC4Zrh76emuUDEV70aiWgwgxp6Li5uHkDq6bq8Exd6c4QIhAMN6r1YlnrbaHSW7KnYbmP8Sno4cS2k40hNoBLr6GyU6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":148220},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"fa13b7e9a12f9fe6ff083ef71515bb500b2bd3a8","scripts":{"test":"vitest run","build":"tsc","check":"biome check .","typecheck":"tsc --noEmit"},"_npmUser":{"name":"urbanisierung","email":"adam.urban@gmail.com"},"_npmVersion":"11.6.1","directories":{},"_nodeVersion":"24.11.0","dependencies":{"@bpmn-sdk/core":"workspace:*"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/canvas_0.0.1_1771914118504_0.8508737475452124","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@bpmn-sdk/canvas","version":"0.0.3","_id":"@bpmn-sdk/canvas@0.0.3","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"homepage":"https://github.com/bpmn-sdk/monorepo#readme","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"dist":{"shasum":"1db2b7ad9c987b3dc4e8ce086d1ba257b55a0325","tarball":"https://registry.npmjs.org/@bpmn-sdk/canvas/-/canvas-0.0.3.tgz","fileCount":16,"integrity":"sha512-dhrlQA+90/WhzaTRvOtu8f06A8i6MGMRJa+1qpRXpFlaKXzawAWJXovii+Bjivc3jc7dF4S3usdba4JltdjDpQ==","signatures":[{"sig":"MEYCIQDClSQF8BkuRLfg+hCbewGQ9DTi4DD8rdLkMox2EX7c8QIhALo/hQxrcJ+QBgMCWndaNWCfn/VKTGa4phMRRvvfKF8+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bpmn-sdk%2fcanvas@0.0.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":96583},"main":"./dist/index.js","type":"module","_from":"file:bpmn-sdk-canvas-0.0.3.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"tsc","check":"biome check .","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:7c993156-57f7-4ee6-bab6-ad6dbefa6a06"}},"_resolved":"/tmp/57aaff4273946d526bd25a7652466a2d/bpmn-sdk-canvas-0.0.3.tgz","_integrity":"sha512-dhrlQA+90/WhzaTRvOtu8f06A8i6MGMRJa+1qpRXpFlaKXzawAWJXovii+Bjivc3jc7dF4S3usdba4JltdjDpQ==","repository":{"url":"git+https://github.com/bpmn-sdk/monorepo.git","type":"git"},"_npmVersion":"11.9.0","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@bpmn-sdk/core":"0.0.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/canvas_0.0.3_1772992006656_0.6764485436548453","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@bpmn-sdk/canvas","version":"0.0.4","_id":"@bpmn-sdk/canvas@0.0.4","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"homepage":"https://github.com/bpmn-sdk/monorepo#readme","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"dist":{"shasum":"99a3cd56f66f71352584f43f83d029cbaf7a1121","tarball":"https://registry.npmjs.org/@bpmn-sdk/canvas/-/canvas-0.0.4.tgz","fileCount":17,"integrity":"sha512-tLP0EsSr88CpUiaX+yuxvlUaj6DMOk3vSzRY6KULMdtnH7kcb+b2A/edRS3clJQ3b5Bkg8A2zi6Bk1AvVIaEcg==","signatures":[{"sig":"MEUCIBvEgwkC3AziiI1Y4HVYqtpjCloEKNFlN5hA1MPIdtAkAiEAla5OCxILcakIn+7SpCZIX4Ih0RQBjKeSQZz2XC8zvi0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bpmn-sdk%2fcanvas@0.0.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":101293},"main":"./dist/index.js","type":"module","_from":"file:bpmn-sdk-canvas-0.0.4.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"tsc","check":"biome check .","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:7c993156-57f7-4ee6-bab6-ad6dbefa6a06"}},"_resolved":"/tmp/ea3dad6b087148ae190840cc86fe4f97/bpmn-sdk-canvas-0.0.4.tgz","_integrity":"sha512-tLP0EsSr88CpUiaX+yuxvlUaj6DMOk3vSzRY6KULMdtnH7kcb+b2A/edRS3clJQ3b5Bkg8A2zi6Bk1AvVIaEcg==","repository":{"url":"git+https://github.com/bpmn-sdk/monorepo.git","type":"git"},"_npmVersion":"11.9.0","description":"
\"BPMN

@bpmn-sdk/canvas

Zero-dependency SVG BPMN viewer with pan/zoom, theming, an","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@bpmn-sdk/core":"0.0.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/canvas_0.0.4_1773080900023_0.49651567249765405","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@bpmn-sdk/canvas","version":"0.0.5","keywords":["bpmn","viewer","svg","canvas","workflow","typescript"],"license":"MIT","_id":"@bpmn-sdk/canvas@0.0.5","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"homepage":"https://github.com/bpmn-sdk/monorepo#readme","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"dist":{"shasum":"0af305afa5a157a9c4ef4ec1ae4e0c993ea427f8","tarball":"https://registry.npmjs.org/@bpmn-sdk/canvas/-/canvas-0.0.5.tgz","fileCount":17,"integrity":"sha512-RBXmWb2RpKuZyifpzJ8e1TCzUHveuDbH3jTpPpLRz6HikTpkH8G6+DD1hY2Uu0UCmhtn7XcWGcHe24e85OCGCQ==","signatures":[{"sig":"MEQCIGUNhsPsNgXfwtxEVeKaaSMg7dmHtngvzl+WjyZHxoaBAiAKf9kMtQp6kq44+XA4/7QziNYKV/P00BbcdQOz1viMPQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bpmn-sdk%2fcanvas@0.0.5","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":101788},"main":"./dist/index.js","type":"module","_from":"file:bpmn-sdk-canvas-0.0.5.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"tsc","check":"biome check .","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:7c993156-57f7-4ee6-bab6-ad6dbefa6a06"}},"_resolved":"/tmp/26a5231da295b74afd32e8d1ba76b091/bpmn-sdk-canvas-0.0.5.tgz","_integrity":"sha512-RBXmWb2RpKuZyifpzJ8e1TCzUHveuDbH3jTpPpLRz6HikTpkH8G6+DD1hY2Uu0UCmhtn7XcWGcHe24e85OCGCQ==","repository":{"url":"git+https://github.com/bpmn-sdk/monorepo.git","type":"git"},"_npmVersion":"11.9.0","description":"Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@bpmn-sdk/core":"0.0.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/canvas_0.0.5_1773173858384_0.8160562952008334","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@bpmn-sdk/canvas","version":"0.0.6","keywords":["bpmn","viewer","svg","canvas","workflow","typescript"],"license":"MIT","_id":"@bpmn-sdk/canvas@0.0.6","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"homepage":"https://github.com/bpmn-sdk/monorepo#readme","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"dist":{"shasum":"89cd47a9d09b0fa7fd9956977c4c30c76425f95b","tarball":"https://registry.npmjs.org/@bpmn-sdk/canvas/-/canvas-0.0.6.tgz","fileCount":17,"integrity":"sha512-KA8uVRSBRP4zRjvxf/VVabftrqq0hIIZnn0knUDp1Z77Ja+Iqy4t09md+/mUVkghRbNynC6cas3/e3aOxgRThw==","signatures":[{"sig":"MEUCIAYWoZOd1EpVDMp/u0Cor+eALU/N2m+2CUPTICNNa6hUAiEA7P/i4mZEg56lAdPXpzZDc8Ay3jYIgGrAB/kVIiRf+vw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bpmn-sdk%2fcanvas@0.0.6","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":102938},"main":"./dist/index.js","type":"module","_from":"file:bpmn-sdk-canvas-0.0.6.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"tsc","check":"biome check .","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:7c993156-57f7-4ee6-bab6-ad6dbefa6a06"}},"_resolved":"/tmp/1c7302533b5de020e3114f9ac36013d6/bpmn-sdk-canvas-0.0.6.tgz","_integrity":"sha512-KA8uVRSBRP4zRjvxf/VVabftrqq0hIIZnn0knUDp1Z77Ja+Iqy4t09md+/mUVkghRbNynC6cas3/e3aOxgRThw==","repository":{"url":"git+https://github.com/bpmn-sdk/monorepo.git","type":"git"},"_npmVersion":"11.9.0","description":"Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@bpmn-sdk/core":"0.0.6"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/canvas_0.0.6_1773258778077_0.3746064671740148","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@bpmn-sdk/canvas","version":"0.0.7","keywords":["bpmn","viewer","svg","canvas","workflow","typescript"],"license":"MIT","_id":"@bpmn-sdk/canvas@0.0.7","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"homepage":"https://github.com/bpmn-sdk/monorepo#readme","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"dist":{"shasum":"40faaac280db0dda32efac13569af16ad3d0afdf","tarball":"https://registry.npmjs.org/@bpmn-sdk/canvas/-/canvas-0.0.7.tgz","fileCount":17,"integrity":"sha512-ssn+COKY05GwOVupliIsP+3OSbYSqIEwEPYy0BtHgmlzbOZFx9lzyWR/kmo2GZ05mwZjdAttGtB3zW7MwSqWzQ==","signatures":[{"sig":"MEUCIAIYx87yBvXOMZpJEtZUyjGpHVYFn9kYqojT0t45V200AiEA45sFUSEWlcXPRZnsnbKRcLTWZ9wa0W5bTO9NY45QVjc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bpmn-sdk%2fcanvas@0.0.7","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":102938},"main":"./dist/index.js","type":"module","_from":"file:bpmn-sdk-canvas-0.0.7.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"tsc","check":"biome check .","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:7c993156-57f7-4ee6-bab6-ad6dbefa6a06"}},"_resolved":"/tmp/33428af013b8c219ee508bb119e27d4a/bpmn-sdk-canvas-0.0.7.tgz","_integrity":"sha512-ssn+COKY05GwOVupliIsP+3OSbYSqIEwEPYy0BtHgmlzbOZFx9lzyWR/kmo2GZ05mwZjdAttGtB3zW7MwSqWzQ==","repository":{"url":"git+https://github.com/bpmn-sdk/monorepo.git","type":"git"},"_npmVersion":"11.9.0","description":"Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@bpmn-sdk/core":"0.0.7"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/canvas_0.0.7_1773341677813_0.09464670832164579","host":"s3://npm-registry-packages-npm-production"}},"0.0.8":{"name":"@bpmn-sdk/canvas","version":"0.0.8","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"dependencies":{"@bpmn-sdk/core":"0.0.8"},"description":"Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API","keywords":["bpmn","viewer","svg","canvas","workflow","typescript"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/bpmn-sdk/monorepo.git"},"scripts":{"build":"tsc","typecheck":"tsc --noEmit","check":"biome check .","test":"vitest run"},"_id":"@bpmn-sdk/canvas@0.0.8","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"homepage":"https://github.com/bpmn-sdk/monorepo#readme","_integrity":"sha512-0R6Drt+Se7RnfRv/kPAVMBdiRgqhU8UlgA5IAl21VhHVpp2OzPYURm6oQ38n1bn8oIw71YB/RNav+wv24zlyWA==","_resolved":"/tmp/6dc1792a13511013e10266946f29e7e0/bpmn-sdk-canvas-0.0.8.tgz","_from":"file:bpmn-sdk-canvas-0.0.8.tgz","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-0R6Drt+Se7RnfRv/kPAVMBdiRgqhU8UlgA5IAl21VhHVpp2OzPYURm6oQ38n1bn8oIw71YB/RNav+wv24zlyWA==","shasum":"46b93ff39d166d9e43695e9c010e4356186f2fac","tarball":"https://registry.npmjs.org/@bpmn-sdk/canvas/-/canvas-0.0.8.tgz","fileCount":17,"unpackedSize":104534,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bpmn-sdk%2fcanvas@0.0.8","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC/23QUyDY1epgeB/yuVfkbx1QIz2Le0CoxSC9dC89gcwIgMJROSCM3+zBIOg7n/UzGHZJRPxpSTMGC18xpP1WhA/I="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:7c993156-57f7-4ee6-bab6-ad6dbefa6a06"}},"directories":{},"maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/canvas_0.0.8_1773428384239_0.9172675240803254"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-24T06:21:58.404Z","modified":"2026-03-13T18:59:44.645Z","0.0.1":"2026-02-24T06:21:58.656Z","0.0.3":"2026-03-08T17:46:46.818Z","0.0.4":"2026-03-09T18:28:20.172Z","0.0.5":"2026-03-10T20:17:38.539Z","0.0.6":"2026-03-11T19:52:58.247Z","0.0.7":"2026-03-12T18:54:38.003Z","0.0.8":"2026-03-13T18:59:44.383Z"},"bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"license":"MIT","homepage":"https://github.com/bpmn-sdk/monorepo#readme","keywords":["bpmn","viewer","svg","canvas","workflow","typescript"],"repository":{"type":"git","url":"git+https://github.com/bpmn-sdk/monorepo.git"},"description":"Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"readme":"

\n \"BPMN\n

@bpmn-sdk/canvas

\n

Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API

\n\n [![npm](https://img.shields.io/npm/v/@bpmn-sdk/canvas?style=flat-square&color=6244d7)](https://www.npmjs.com/package/@bpmn-sdk/canvas)\n [![license](https://img.shields.io/npm/l/@bpmn-sdk/canvas?style=flat-square)](https://github.com/bpmn-sdk/monorepo/blob/main/LICENSE)\n [![typescript](https://img.shields.io/badge/TypeScript-strict-6244d7?style=flat-square&logo=typescript&logoColor=white)](https://github.com/bpmn-sdk/monorepo)\n\n [Documentation](https://bpmn-sdk-docs.pages.dev) · [GitHub](https://github.com/bpmn-sdk/monorepo) · [Changelog](https://github.com/bpmn-sdk/monorepo/blob/main/packages/canvas/CHANGELOG.md)\n
\n\n---\n\n## Overview\n\n`@bpmn-sdk/canvas` renders BPMN 2.0 diagrams as interactive SVG. It has zero runtime dependencies, works in any framework (or none), and exposes a plugin API for extending its behaviour.\n\n## Features\n\n- **SVG rendering** — crisp diagrams at any zoom level, all element types\n- **Pan & zoom** — mouse drag, scroll wheel, touch/pinch, keyboard shortcuts\n- **Theming** — light / dark / system-auto, fully overridable via CSS custom properties\n- **Plugin API** — install composable `CanvasPlugin` add-ons without touching core code\n- **Event system** — subscribe to element clicks, selection changes, diagram load, viewport updates\n- **Keyboard navigation** — arrow keys, fit-to-screen, zoom shortcuts\n- **Zero dependencies** — runs in browsers, bundlers, and SSR\n\n## Installation\n\n```sh\nnpm install @bpmn-sdk/canvas\n```\n\n## Quick Start\n\n```typescript\nimport { BpmnCanvas } from \"@bpmn-sdk/canvas\"\n\nconst canvas = new BpmnCanvas({\n container: document.getElementById(\"canvas\")!,\n theme: \"dark\", // \"light\" | \"dark\" | \"auto\"\n grid: true, // dot-grid background\n plugins: [], // CanvasPlugin[]\n})\n\n// Load a diagram\ncanvas.loadXML(bpmnXml)\n\n// Respond to element clicks\ncanvas.on(\"element:click\", (id, event) => {\n console.log(\"Clicked:\", id)\n})\n\n// Fit diagram to container\ncanvas.fit()\n```\n\n## API Reference\n\n### Constructor Options\n\n```typescript\ninterface CanvasOptions {\n container: HTMLElement\n theme?: \"light\" | \"dark\" | \"auto\" // default: \"auto\"\n grid?: boolean // default: false\n fit?: boolean // auto-fit on load, default: true\n plugins?: CanvasPlugin[]\n}\n```\n\n### CanvasApi Methods\n\n| Method | Description |\n|--------|-------------|\n| `loadXML(xml)` | Parse and render a BPMN XML string |\n| `fit()` | Fit the diagram to the container |\n| `zoom(factor)` | Set zoom level (1 = 100%) |\n| `getShapes()` | All rendered `RenderedShape` objects |\n| `getEdges()` | All rendered `RenderedEdge` objects |\n| `setTheme(theme)` | Switch theme at runtime |\n| `destroy()` | Remove canvas and clean up |\n| `on(event, handler)` | Subscribe to a canvas event |\n| `off(event, handler)` | Unsubscribe |\n\n### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `diagram:load` | `BpmnDefinitions` | Fired when a new diagram loads |\n| `element:click` | `(id, PointerEvent)` | An element was clicked |\n| `editor:select` | `string[]` | Selection changed (element IDs) |\n| `viewport:change` | `ViewportState` | Pan or zoom occurred |\n\n### Plugin API\n\n```typescript\nimport type { CanvasPlugin, CanvasApi } from \"@bpmn-sdk/canvas\"\n\nconst myPlugin: CanvasPlugin = {\n name: \"my-plugin\",\n install(api: CanvasApi) {\n api.on(\"element:click\", (id) => console.log(\"clicked\", id))\n },\n uninstall() {},\n}\n```\n\n---\n\n## Related Packages\n\n| Package | Description |\n|---------|-------------|\n| [`@bpmn-sdk/core`](https://www.npmjs.com/package/@bpmn-sdk/core) | BPMN/DMN/Form parser, builder, layout engine |\n| [`@bpmn-sdk/editor`](https://www.npmjs.com/package/@bpmn-sdk/editor) | Full-featured interactive BPMN editor |\n| [`@bpmn-sdk/engine`](https://www.npmjs.com/package/@bpmn-sdk/engine) | Lightweight BPMN process execution engine |\n| [`@bpmn-sdk/feel`](https://www.npmjs.com/package/@bpmn-sdk/feel) | FEEL expression language parser & evaluator |\n| [`@bpmn-sdk/plugins`](https://www.npmjs.com/package/@bpmn-sdk/plugins) | 22 composable canvas plugins |\n| [`@bpmn-sdk/api`](https://www.npmjs.com/package/@bpmn-sdk/api) | Camunda 8 REST API TypeScript client |\n| [`@bpmn-sdk/ascii`](https://www.npmjs.com/package/@bpmn-sdk/ascii) | Render BPMN diagrams as Unicode ASCII art |\n| [`@bpmn-sdk/profiles`](https://www.npmjs.com/package/@bpmn-sdk/profiles) | Shared auth, profile storage, and client factories for CLI & proxy |\n| [`@bpmn-sdk/operate`](https://www.npmjs.com/package/@bpmn-sdk/operate) | Monitoring & operations frontend for Camunda clusters |\n\n## License\n\n[MIT](https://github.com/bpmn-sdk/monorepo/blob/main/LICENSE) © bpmn-sdk\n","readmeFilename":"README.md"}