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.
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.