fixed_form_builder v1.0.0
npm run start:editor || npm run start:viewer
@bpmn-io/form-js
View, visually 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](./docs/FORM_SCHEMA.md) 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](./packages/form-js-viewer) 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](./packages/form-js-editor) 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 formPlayground = new FormPlayground({
container: document.querySelector("#form-playground"),
schema,
data,
});
See [playground documentation](./packages/form-js-playground) for further details.
Resources
- [Demo](https://demo.bpmn.io/form)
- [Issues](https://github.com/bpmn-io/form-js/issues)
- [Changelog](./packages/form-js/CHANGELOG.md)
- [Contributing guide](https://github.com/bpmn-io/.github/blob/master/.github/CONTRIBUTING.md#create-a-pull-request)
- [Form schema](./docs/FORM_SCHEMA.md)
Build and run
Build the project in a Posix environment. On Windows, that is [Git Bash](https://gitforwindows.org/) 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
](https://github.com/nvm-sh/nvm) or [n
](https://github.com/tj/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](./e2e/README.md)
License
Use under the terms of the [bpmn.io license](http://bpmn.io/license).
1 year ago