https://github.com/camunda/camunda-modeler-plugin-helpers
Helpers to build Camunda Modeler plug-ins.
https://github.com/camunda/camunda-modeler-plugin-helpers
camunda-modeler
Last synced: about 1 month ago
JSON representation
Helpers to build Camunda Modeler plug-ins.
- Host: GitHub
- URL: https://github.com/camunda/camunda-modeler-plugin-helpers
- Owner: camunda
- License: mit
- Created: 2017-03-30T13:23:19.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2025-07-08T10:47:59.000Z (3 months ago)
- Last Synced: 2025-08-09T02:51:00.705Z (2 months ago)
- Topics: camunda-modeler
- Language: JavaScript
- Homepage:
- Size: 112 KB
- Stars: 2
- Watchers: 16
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Camunda Modeler Plugin Helpers :electric_plug:
[](https://github.com/camunda/camunda-modeler)
Helper functions and core utility exports for bundling your Camunda Modeler client plugins.
> [!WARNING]
> This library re-exposes core utilities that you want to use as you develop plug-ins for the [Camunda Modeler](https://github.com/camunda/camunda-modeler).
> If a plug-in uses any of the utilities, i.e. React, then it **must** consume them via the respective [helper export](#api). Use our [webpack plug-in](https://github.com/camunda/camunda-modeler-webpack-plugin) to accomplish that automatically, or use a source mod / configure your plug-in bundler accordingly.
## Usage
Install the plug-in:
```
npm install camunda-modeler-plugin-helpers
```
Use any of the [exposed utilities](#api).
## API
### bpmn-js
Register plugin to be passed as additional module:
```javascript
import {
registerBpmnJSPlugin
} from 'camunda-modeler-plugin-helpers';
const BpmnJSModule = {
__init__: [ 'myService' ],
myService: [ 'type', ... ]
};
registerBpmnJSPlugin(BpmnJSModule);
```
Register a custom [moddle extension](https://github.com/bpmn-io/bpmn-moddle):
```javascript
import {
registerBpmnJSModdleExtension
} from 'camunda-modeler-plugin-helpers';
var moddleDescriptor = {
name: 'my descriptor',
uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0',
prefix: 'mydesc',
...
};
registerBpmnJSModdleExtension(moddleDescriptor);
```
### UI Components
[](https://github.com/camunda/camunda-modeler)
[Components](https://github.com/camunda/camunda-modeler-plugin-helpers/tree/main/components) exported for use in Camunda Modeler client plugins:
- **Fill**
- **Modal**
- **Overlay**
- **Section**
- **ToggleSwitch**
- **TextInput**
- **CachedComponent**
```javascript
import Fill from 'camunda-modeler-plugin-helpers/components/Fill.js';
function MyReactExtension() {
return ;
}
```
### Higher-Order Function Helpers
These higher-order components (HOCs) enhance functionality:
- **[WithCache](https://github.com/camunda/camunda-modeler-plugin-helpers/blob/main/components/WithCache.js)** - pass cache and forward refs to a wrapped component.
- **[WithCachedState](https://github.com/camunda/camunda-modeler-plugin-helpers/blob/main/components/WithCachedState.js)** - lazy-load a wrapped component.
### Helper Functions
* **[createTab](https://github.com/camunda/camunda-modeler-plugin-helpers/blob/main/components/create-tab.js)** - helper function to create Tab components to be used with the TabProvider via the `Comp#createCachedState` method.
### Properties Panel
Should be used to access various properties panel exports:
```js
import { useService } from 'camunda-modeler-plugin-helpers/vendor/bpmn-js-properties-panel.js';
import { useState } from 'camunda-modeler-plugin-helpers/vendor/@bpmn-io/properties-panel/preact/hooks.js';
```
### React
Should be used in place of `react` imports.
```javascript
import React, { useEffect } from 'camunda-modeler-plugin-helpers/vendor/react.js';
```
### Carbon
[](https://github.com/camunda/camunda-modeler)
Should be used in place of `@carbon/react` imports:
```javascript
import { Button, Theme, TextInput } from 'camunda-modeler-plugin-helpers/vendor/@carbon/react.js';
import { Add } from 'camunda-modeler-plugin-helpers/vendor/@carbon/icons-react.js';
```
## Additional Resources
* [camunda-modeler-webpack-plugin](https://github.com/camunda/camunda-modeler-webpack-plugin) - Bundle your libraries for use within the [Camunda Modeler](https://github.com/camunda/camunda-modeler)
## License
MIT