# bpmn-js-properties-panel > A simple properties panel for bpmn-js Latest version **5.65.0** (published 2026-08-21) · MIT license · 0 weekly downloads ## Install ```sh npm install bpmn-js-properties-panel pnpm add bpmn-js-properties-panel yarn add bpmn-js-properties-panel bun add bpmn-js-properties-panel ``` ## Health **Score 60/100 (C)** — status: active. Positive: esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types; large bundle. ## Facts | | | |---|---| | Version | 5.65.0 | | Published | 2026-08-21 | | First published | 2015-11-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | * | | Dependencies | 5 | | Unpacked size | 11.5 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 337 | | Author | Nico Rehwaldt | | Maintainers | bpmn-io-admin, nikku, barmac, philippfromme, maxtru, skaiir-camunda, vsgoulart, barinali, ev-camunda, jarekdanielak, alekseymanetov | | Keywords | bpmn-io, bpmn-js, properties, properties-panel | ## Links - npm: https://www.npmjs.com/package/bpmn-js-properties-panel - Repository: https://github.com/bpmn-io/bpmn-js-properties-panel - Homepage: https://github.com/bpmn-io/bpmn-js-properties-panel#readme - Issues: https://github.com/bpmn-io/bpmn-js-properties-panel/issues - npm.io page: https://npm.io/package/bpmn-js-properties-panel ## Dependencies (5) - [ids](https://npm.io/package/ids.md) ^3.0.2 - [min-dom](https://npm.io/package/min-dom.md) ^5.3.0 - [min-dash](https://npm.io/package/min-dash.md) ^5.0.0 - [array-move](https://npm.io/package/array-move.md) ^4.0.0 - [@bpmn-io/extract-process-variables](https://npm.io/package/@bpmn-io/extract-process-variables.md) ^2.2.1 ## Recent versions - 5.65.0 (latest) — 2026-08-21 - 6.0.0 (next) — 2026-02-05 - 1.0.0-alpha.13 (alpha) — 2022-04-08 - 5.64.0 — 2026-08-16 - 5.63.0 — 2026-07-29 - 5.62.0 — 2026-07-24 - 5.61.0 — 2026-07-14 - 5.60.0 — 2026-06-26 - 5.59.0 — 2026-06-19 - 5.58.0 — 2026-05-22 - 5.57.0 — 2026-05-22 - 5.56.0 — 2026-05-19 - 5.55.0 — 2026-05-18 - 5.54.0 — 2026-04-21 - 5.53.0 — 2026-03-03 - … 234 more at https://npm.io/package/bpmn-js-properties-panel/versions ## README # bpmn-js-properties-panel [![CI](https://github.com/bpmn-io/bpmn-js-properties-panel/workflows/CI/badge.svg)](https://github.com/bpmn-io/bpmn-js-properties-panel/actions?query=workflow%3ACI) A properties panel extension for [bpmn-js](https://github.com/bpmn-io/bpmn-js) that adds the ability to edit technical properties (generic and [Camunda](https://camunda.com)). [![bpmn-js-properties-panel screenshot](./docs/screenshot.png "Screenshot of the bpmn-js modeler with properties panel")](https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel) ## Features The properties panel allows users to edit invisible BPMN properties in a convenient way. Some of the features are: * Edit element ids, multi-instance details and more * Edit execution related [Camunda 7](https://docs.camunda.org) and [Camunda 8](https://docs.camunda.io/) properties * Redo and undo (plugs into the [bpmn-js](https://github.com/bpmn-io/bpmn-js) editing cycle) ## Usage Provide two HTML elements, one for the properties panel and one for the BPMN diagram: ```html
``` Bootstrap [bpmn-js](https://github.com/bpmn-io/bpmn-js) with the properties panel and a [properties provider](https://github.com/bpmn-io/bpmn-js-properties-panel/tree/master/src/provider): ```javascript import BpmnModeler from 'bpmn-js/lib/Modeler'; import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, } from 'bpmn-js-properties-panel'; const modeler = new BpmnModeler({ container: '#canvas', propertiesPanel: { parent: '#properties' }, additionalModules: [ BpmnPropertiesPanelModule, BpmnPropertiesProviderModule ] }); ``` ### Styling For proper styling include the necessary stylesheets: ```html ``` ### Dynamic Attach/Detach You may attach or detach the properties panel dynamically to any element on the page, too: ```javascript const propertiesPanel = bpmnJS.get('propertiesPanel'); // detach the panel propertiesPanel.detach(); // attach it to some other element propertiesPanel.attachTo('#other-properties'); ``` ### Edit Camunda Properties To edit [Camunda](https://camunda.com) properties, you have to use a [moddle extension](https://github.com/bpmn-io/moddle) so bpmn-js is can read and write Camunda properties and use a provider so these properties are shown in the properties panel. For example, to edit [Camunda 8](https://camunda.com/platform/) properties, use the [Camunda 8 moddle extension](https://github.com/camunda/zeebe-bpmn-moddle) and the [Camunda 8 provider](https://github.com/bpmn-io/bpmn-js-properties-panel/tree/master/src/provider/zeebe). Additionally, you should use [behaviors specific to Camunda 8](https://github.com/camunda/camunda-bpmn-js-behaviors?tab=readme-ov-file#camunda-8) to ensure parts of the model that are specific to Camunda 8 are maintained correctly. ```javascript import BpmnModeler from 'bpmn-js/lib/Modeler'; import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, ZeebePropertiesProviderModule // Camunda 8 provider } from 'bpmn-js-properties-panel'; // Camunda 8 moddle extension import zeebeModdle from 'zeebe-bpmn-moddle/resources/zeebe'; // Camunda 8 behaviors import ZeebeBehaviorsModule from 'camunda-bpmn-js-behaviors/lib/camunda-cloud'; const modeler = new BpmnModeler({ container: '#canvas', propertiesPanel: { parent: '#properties' }, additionalModules: [ BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, ZeebePropertiesProviderModule, ZeebeBehaviorsModule ], moddleExtensions: { zeebe: zeebeModdle } }); ``` ### API #### `BpmnPropertiesPanelRenderer#attachTo(container: HTMLElement, headerContainer?: HTMLElement) => void` Attach the properties panel to a parent node. ```javascript const propertiesPanel = modeler.get('propertiesPanel'); propertiesPanel.attachTo('#other-properties'); // or attach the panel body and header to different containers propertiesPanel.attachTo('#properties', '#panel-header'); ``` #### `BpmnPropertiesPanelRenderer#detach() => void` Detach the properties panel from its parent node. ```javascript const propertiesPanel = modeler.get('propertiesPanel'); propertiesPanel.detach(); ``` #### `BpmnPropertiesPanelRenderer#registerProvider(priority: Number, provider: PropertiesProvider) => void` Register a new properties provider to the properties panel. ```javascript class ExamplePropertiesProvider { constructor(propertiesPanel) { propertiesPanel.registerProvider(500, this); } getGroups(element) { return (groups) => { // add, modify or remove groups // ... return groups; }; } } ExamplePropertiesProvider.$inject = [ 'propertiesPanel' ]; ``` #### `BpmnPropertiesPanelRenderer#getEntryId(element: djs.model.Base, path: Array) => string|null` Resolve the id of the entry that edits the given moddle property path, relative to the element's business object. Providers may implement `getEntryId(element, path)` to resolve paths for the groups they contribute; they are asked in reverse render order, so a provider whose groups render last (e.g. one registered with a low priority to override others) is asked first. ```javascript const propertiesPanel = modeler.get('propertiesPanel'); const entryId = propertiesPanel.getEntryId(element, [ 'extensionElements', 'values', 0, 'inputParameters', 1, 'source' ]); // 'ServiceTask_1-input-1-source' ``` ## Additional Resources * [Issue tracker](https://github.com/bpmn-io/bpmn-js-properties-panel) * [Forum](https://forum.bpmn.io) * [Example Project](https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel) ## Development Prepare the project by installing all dependencies: ```sh npm install ``` Then, depending on your use-case, you may run any of the following commands: ```sh # build the library and run all tests npm run all # spin up a single local modeler instance npm start # run the full development setup npm run dev ``` ## License MIT --- _Source: https://npm.io/package/bpmn-js-properties-panel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._