Forms playground sidebar not showing up?


I am trying to incorporate the forms playground component into my app but the sidebard with all the different form fields you can drag and drop is not showing up. And I am finding the documentation is very limiting. Can anyone please help me out?

Here is what I have so far

import React, { CSSProperties, useEffect, useRef, useState } from 'react'
import { createFormEditor } from "@bpmn-io/form-js";
import { Playground } from '@bpmn-io/form-js-playground';

import '@bpmn-io/form-js/dist/assets/dragula.css'
import '@bpmn-io/form-js/dist/assets/form-js.css'
import '@bpmn-io/form-js/dist/assets/form-js-editor.css'
import '@bpmn-io/form-js/dist/assets/properties-panel.css'
import '@bpmn-io/form-js/dist/assets/form-js-playground.css'

// import schema from './schema.json'

const BpmnForms = () => {

    const data = {
        creditor: "John Doe Company",
        amount: 456,
        invoiceNumber: "C-123",
        approved: true,
        approvedBy: "John Doe"

    const schema = {
      schemaVersion: 3,
      exporter: {
        name: "form-js (",
        version: "0.3.0"
      components: [
          key: "name",
          label: "Text Field",
          type: "textfield",
          id: "Field_1jfqw1v",
          description: "Enter your name ...",
          validate: {
            required: true,
            minLength: 3,
            maxLength: 50
      type: "default",
      id: "Form_1f88rws"

    useEffect(() => {   
          const playground = new Playground({
            container: document.querySelector('#container'),

    }, [])

          <link href=",wght@0,400;0,600;1,400&display=swap" rel="stylesheet"/>
          <link href="" rel="stylesheet"></link>
          <div id="container" style={{ width: '75%', height: '80%'}}></div>

export default BpmnForms;

And here is what is displayed

Hi! Do you have any errors poping up in the Browser console (e.g. Developer Tools in Chrome)? Something not properly rendering could be an indicator for this.

1 Like

Yes I am getting this error but can’t figure out why. I followed the documentation exactly.

 useEffect(() => {
        const formEditor = new FormEditor({
          container: document.querySelector('#container')
        const importSchema = async () => {
          await formEditor.importSchema(schema);

    }, [])

          <link href=",wght@0,400;0,600;1,400&display=swap" rel="stylesheet"/>
          <link href="" rel="stylesheet"></link>
          <div id="container"></div>

This is an issue with the dragula library. For some reason, the library uses global which is undefined in browsers like Chrome (cf. Angular 7: Uncaught ReferenceError: global is not defined when adding package · Issue #602 · bevacqua/dragula · GitHub). Webpack polyfills global by default (cf. Module Variables | webpack). You need to polyfill global, too.

1 Like

Do you know of a way to fix this? I already have global defined in my vite.config file

export default defineConfig({
  plugins: [
      include: 'src/',
      exclude: ['node_modules/*', 'dist'],
      extension: ['.js', '.ts', '.tsx'],
      // requireEnv: true,
      // forceBuildInstrument: Boolean(process.env.INSTRUMENT_BUILD),
  define: {
    global: {},

Defining it as an empty object won’t solve the problem. Dragula will try to access global.navigator.pointerEnabled so you need to point global to window. I assume that’s what Webpack does.

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