View, visually edit and simulate JSON-based forms.

This library exports a form viewer, editor and playground.

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

import { Form } from '@bpmn-io/form-js'; 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 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:

import { FormPlayground } from '@bpmn-io/form-js'; const formPlayground = new FormPlayground({ container: document.querySelector('#form-playground'), schema, data, });

See playground documentation for further details.

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 });

• Demo
• Issues
• Changelog
• Contributing guide
• Form schema

Build the project in a Posix environment. On Windows, that is Git Bash or WSL.

Note we currently support development environments with Node.js version 16 (and npm version 8). We encourage you to use a Node.js version manager (e.g., nvm or n) to set up the needed versions.

Prepare the project by installing all dependencies:

npm install

Then, depending on your use-case you may run any of the following commands:

# build the library and run all tests npm run all # spin up a single local form-js instance npm start # spin up a specific instance ## viewer npm run start:viewer ## editor npm run start:editor ## playground npm run start:playground

To run the visual regression tests, read the docs here

Use under the terms of the bpmn.io license.