form-js-playground

@bpmn-io/form-js-playground

A tool to try out and explore @bpmn-io/form-js in a playful manner.

Usage

Integrate the playground into your application:

import { Playground } from '@bpmn-io/form-js-playground';

const schema = {
  type: 'default',
  components: [
    {
      key: 'creditor',
      label: 'Creditor',
      type: 'textfield',
      validate: {
        required: true,
      },
    },
  ],
};

const data = {
  creditor: 'John Doe Company',
};

const playground = new Playground({
  container: document.querySelector('#container'),
  schema,
  data,
});

const { schema, data } = playground.getState();

Styling

For proper styling include the necessary stylesheets, and font used:

<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap"
  rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet" />

<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js.css" />
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js-editor.css" />
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.10.0/dist/assets/form-js-playground.css" />

Resources

• Demo
• Issues

License

Use under the terms of the bpmn.io license.