Custom Palette - CSS not applying

I have extended Palette.js from the diagram-js library. My palette does get initialized, however it does not get the CSS applied, even though I have it included in the diagram-js.css file.

Snippet from diagram-js.css:

.lg-palette {
  left: 20px;
  top: 20px;
  box-sizing: border-box;
  width: 48px;

Snippet from Palette.js:

      '<div class="lg-palette">' +
      '<div class="lg-palette-entries"></div>' +
      '<div class="lg-palette-toggle"></div>' +

Palette.prototype._lgInit = function() {
  var canvas = this._canvas,
  eventBus = this._eventBus;
  var parent = canvas.getContainer(),
  container = this._lgContainer = domify(Palette.LG_HTML_MARKUP),
  self = this;
  domDelegate.bind(container, LG_ELEMENT_SELECTOR, 'click', function(event) {
    var target = event.delegateTarget;
    if (domMatches(target, LG_TOGGLE_SELECTOR)) {
      return self.lgToggle();
    self.lgTrigger('click', event);
  // prevent drag propagation
  domEvent.bind(container, 'mousedown', function(event) {
  // prevent drag propagation
  domDelegate.bind(container, LG_ENTRY_SELECTOR, 'dragstart', function(event) {
    self.lgTrigger('dragstart', event);
  eventBus.on('canvas.resized', this._lgLayoutChanged, this);'palette.create', {
    container: container

Screenshots to show what it looks like:

Anmerkung 2020-02-18 161903 Anmerkung 2020-02-18 161939

What am I doing wrong?

It’s hard to help you if we don’t know your project setup. Are you able to share it, e.g. via

Hi Niklas,

the issue was actually very simple. It turns out that I had to add the styles to the diagram-js.css that is in node_modules/bpmn-js/dist/assets and not the one in node_modules/diagram-js/assets

Best Regards

1 Like