Custom popup menu entries

Hi everyone,

im currently trying to customize a popup-menu. More precisely i am trying to add an entry to the color picker module, to give users the ability to define and use a custom color.

What i’ve got so far:

  1. Embedded the color picker module
  2. Register a popup menu provider for the color-picker module (see code below)
class CustomPopupMenuProvider {

    static $inject: string[] = ['popupMenu'];

    constructor(popupMenu) {
        popupMenu.registerProvider('color-picker', this);

    getPopupMenuEntries() {
        // return some custom entry here

export default {
    __init__: ["customPopupMenuProvider"],
    customPopupMenuProvider: ["type", CustomPopupMenuProvider],

Where i’m stuck:

The entry should have textfield/color input to define custom colors (e.g. fill color and text color). The following picture gives an idea of what it should look like inside the custom popup:

Bildschirm­foto 2023-09-15 um 10.29.31

I am wondering about the best approach to realize this kind of functionality. Is there a way to integrate such a feature using bpmn-js/diagram-js?

Thanks in advance,
Luka :slight_smile:


You could check out the color picker plugin we built for bpmn-js: GitHub - bpmn-io/bpmn-js-color-picker: A simple color picker for your BPMN elements.