Bpmn.io custom panel properties doesn't show the field

I have tried to use the Bpmn-io modeler plus panel properties in Vue3 and I followed exactly what they have described in this example in Bpmn-io official examples. But it seems doesn’t work properly in Vue (I guess Vuejs is the reason), and I don’t know why. I can see the custom group but inside it is completely empty.



import { createApp } from 'vue'
import App from './App.vue'

import '../node_modules/bpmn-js/dist/assets/bpmn-js.css'
import '../node_modules/bpmn-js/dist/assets/diagram-js.css'
import '../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import '../node_modules/bpmn-js-properties-panel/dist/assets/properties-panel.css'



    <div id="js-canvas"></div>
    <div id="js-properties-panel"></div>

import BpmnModeler from "bpmn-js/lib/Modeler";
import {
} from "bpmn-js-properties-panel";
import magicPropertiesProviderModule from "./provider/magic/";
import magicModdleDescriptor from "./descriptors/magic";

export default {
  mounted() {
    const diagram = `
    <?xml version="1.0" encoding="UTF-8"?>
    <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">
      <bpmn2:process id="Process_1" isExecutable="false">
        <bpmn2:startEvent id="StartEvent_1"/>
      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
          <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
            <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>
    const bpmnModeler = new BpmnModeler({
      container: "#js-canvas",
      propertiesPanel: {
        parent: "#js-properties-panel",
      additionalModules: [
      moddleExtensions: {
        magic: magicModdleDescriptor,


Hi @sepehr_Amirkiaee, welcome!

Are there any errors popping up? Please try to share a CodeSandbox that reproduces your issue in a way that we can inspect it.

I set up a new clean Vue project with bpmn-io and I got this error message:

There is a point, I don’t have any problem with camunda-bpmn-moddle and it works correctly.

You can clone my sample project from here

Thanks for sharing!

You need to configure your compiler to recognize JSX properly. In this example you see how it is done via babel-loader.

Thanks @Niklas_Kiefer. You saved my day.
It worked
To make it clear, here is what exactly I’ve done

1- Adding "@babel/plugin-transform-react-jsx": "^7.18.6" as a devDependency in package.json


2- Adding plugins config to the babel.config.js

module.exports = {
  presets: [
  plugins: [
        throwIfNamespace: false,
        runtime: 'automatic', 
        importSource: '@bpmn-io/properties-panel/preact',
1 Like

Happy to see you fixed it and thanks for sharing your solution, others will definitely benefit from it :+1:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.