@bpmn-io/form-js

View, edit and simulate JSON-based forms.

Usage

This library exports a form viewer, editor and playground.

Display a form

Renders a form based on a form schema and existing data:

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

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

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

const form = new Form({
  container: document.querySelector('#form'),
});

await form.importSchema(schema, data);

form.on('submit', (event) => {
  console.log(event.data, event.errors);
});

See viewer documentation for further details.

Create and edit a form

Create a new form or edit an exsting one:

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

const formEditor = new FormEditor({
  container: document.querySelector('#form-editor'),
});

await formEditor.importSchema(schema);

See editor documentation for further details.

Create and simulate a form with input and output data

Create and simulate a form with input and output data:

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

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

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

const formPlayground = new FormPlayground({
  container: document.querySelector('#form-playground'),
  schema,
  data,
});

See playground documentation for further details.

Retrieve schema variables from a form

Use the getSchemaVariables util to retrieve the variables defined in a form schema. This is useful to gather what data is consumed and produced by a form.

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

const variables = getSchemaVariables(schema);

console.log('Schema variables', variables);

It is also possible to distinct between input and output variables:

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

const outputVariables = getSchemaVariables(schema, { inputs: false });
const inputVariables = getSchemaVariables(schema, { outputs: false });

Resources

• Demo
• Issues
• Changelog
• Form schema

License

Use under the terms of the bpmn.io license.