{"id":992565,"url":"https://github.com/bpmn-io/form-js","last_synced_at":"2025-06-30T05:33:41.793Z","repository":{"id":37449587,"uuid":"341551668","full_name":"bpmn-io/form-js","owner":"bpmn-io","description":"View and visually edit JSON-based forms.","archived":false,"fork":false,"pushed_at":"2025-06-18T22:44:29.000Z","size":31398,"stargazers_count":476,"open_issues_count":175,"forks_count":135,"subscribers_count":18,"default_branch":"develop","last_synced_at":"2025-06-18T23:28:51.895Z","etag":null,"topics":["bpmn-io","form","form-js","forms","hacktoberfest"],"latest_commit_sha":null,"homepage":"https://bpmn.io/toolkit/form-js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bpmn-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-02-23T12:44:05.000Z","updated_at":"2025-06-17T06:13:01.000Z","dependencies_parsed_at":"2023-02-17T21:31:06.933Z","dependency_job_id":"5f96d2f9-c2d2-4119-9dfd-9eeb21b180f6","html_url":"https://github.com/bpmn-io/form-js","commit_stats":{"total_commits":810,"total_committers":23,"mean_commits":35.21739130434783,"dds":0.7506172839506173,"last_synced_commit":"b06bce5c0f22472269257390f48464b0c0f9ce9f"},"previous_names":[],"tags_count":120,"template":false,"template_full_name":null,"purl":"pkg:github/bpmn-io/form-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fform-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fform-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fform-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fform-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bpmn-io","download_url":"https://codeload.github.com/bpmn-io/form-js/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bpmn-io%2Fform-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260653791,"owners_count":23042642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bpmn-io","form","form-js","forms","hacktoberfest"],"created_at":"2024-01-13T15:23:12.459Z","updated_at":"2025-06-30T05:33:41.778Z","avatar_url":"https://github.com/bpmn-io.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries","技术方案"],"sub_categories":[],"readme":"# @bpmn-io/form-js\n\n[![CI](https://github.com/bpmn-io/form-js/workflows/CI/badge.svg)](https://github.com/bpmn-io/form-js/actions?query=workflow%3ACI)\n\n[View](./packages/form-js-viewer), [visually edit](./packages/form-js-editor) and [simulate](./packages/form-js-playground/) JSON-based forms.\n\n## Usage\n\nThis library exports a [form viewer](./packages/form-js-viewer), [editor](./packages/form-js-editor) and [playground](./packages/form-js-playground).\n\n### Display a form \u003ca id=\"viewer\" /\u003e\n\nRenders a form based on [a form schema](./docs/FORM_SCHEMA.md) and existing data:\n\n```javascript\nimport { Form } from '@bpmn-io/form-js';\n\nconst form = new Form({\n  container: document.querySelector('#form'),\n});\n\nawait form.importSchema(schema, data);\n\nform.on('submit', (event) =\u003e {\n  console.log(event.data, event.errors);\n});\n```\n\nSee [viewer documentation](./packages/form-js-viewer) for further details.\n\n### Create and edit a form \u003ca id=\"builder\" /\u003e\n\nCreate a new form or edit an exsting one:\n\n```javascript\nimport { FormEditor } from '@bpmn-io/form-js';\n\nconst formEditor = new FormEditor({\n  container: document.querySelector('#form-editor'),\n});\n\nawait formEditor.importSchema(schema);\n```\n\nSee [editor documentation](./packages/form-js-editor) for further details.\n\n### Create and simulate a form with input and output data \u003ca id=\"playground\" /\u003e\n\nCreate and simulate a form with input and output data:\n\n```javascript\nimport { FormPlayground } from '@bpmn-io/form-js';\n\nconst formPlayground = new FormPlayground({\n  container: document.querySelector('#form-playground'),\n  schema,\n  data,\n});\n```\n\nSee [playground documentation](./packages/form-js-playground) for further details.\n\n### Retrieve schema variables from a form\n\nUse 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.\n\n```javascript\nimport { getSchemaVariables } from '@bpmn-io/form-js';\n\nconst variables = getSchemaVariables(schema);\n\nconsole.log('Schema variables', variables);\n```\n\nIt is also possible to distinct between input and output variables:\n\n```javascript\nimport { getSchemaVariables } from '@bpmn-io/form-js';\n\nconst outputVariables = getSchemaVariables(schema, { inputs: false });\nconst inputVariables = getSchemaVariables(schema, { outputs: false });\n```\n\n## Resources\n\n- [Demo](https://demo.bpmn.io/form)\n- [Issues](https://github.com/bpmn-io/form-js/issues)\n- [Changelog](./packages/form-js/CHANGELOG.md)\n- [Contributing guide](https://github.com/bpmn-io/.github/blob/master/.github/CONTRIBUTING.md#create-a-pull-request)\n- [Form schema](./docs/FORM_SCHEMA.md)\n\n## Build and run\n\nBuild the project in a Posix environment. On Windows, that is [Git Bash](https://gitforwindows.org/) or WSL.\n\nNote 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.\n\nPrepare the project by installing all dependencies:\n\n```sh\nnpm install\n```\n\nThen, depending on your use-case you may run any of the following commands:\n\n```sh\n# build the library and run all tests\nnpm run all\n\n# spin up a single local form-js instance\nnpm start\n\n# spin up a specific instance\n\n## viewer\nnpm run start:viewer\n\n## editor\nnpm run start:editor\n\n## playground\nnpm run start:playground\n```\n\nTo run the visual regression tests, read the docs [here](./e2e/README.md)\n\n## License\n\nUse under the terms of the [bpmn.io license](http://bpmn.io/license).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpmn-io%2Fform-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbpmn-io%2Fform-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbpmn-io%2Fform-js/lists"}