A tool to try out and explore @bpmn-io/form-js in a playful manner.
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();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/[email protected]/dist/assets/form-js.css" />
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/[email protected]/dist/assets/form-js-editor.css" />
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/[email protected]/dist/assets/form-js-playground.css" />Use under the terms of the bpmn.io license.