{"id":29102319,"url":"https://github.com/formio/core","last_synced_at":"2025-06-28T21:44:44.874Z","repository":{"id":40942937,"uuid":"342127026","full_name":"formio/core","owner":"formio","description":"The Form.io Core Javascript Framework","archived":false,"fork":false,"pushed_at":"2025-06-25T20:23:34.000Z","size":8516,"stargazers_count":12,"open_issues_count":5,"forks_count":10,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-06-25T21:29:51.026Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://formio.github.io/core","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/formio.png","metadata":{"files":{"readme":"Readme.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":"LICENSE.txt","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-25T04:53:28.000Z","updated_at":"2025-06-12T21:18:58.000Z","dependencies_parsed_at":"2023-10-13T09:17:58.027Z","dependency_job_id":"f33ccb7f-3a46-47a1-928b-12723c953b61","html_url":"https://github.com/formio/core","commit_stats":{"total_commits":113,"total_committers":8,"mean_commits":14.125,"dds":0.2566371681415929,"last_synced_commit":"7f2cab8a6965d0e2306c7ccfc2471f700e6333cd"},"previous_names":[],"tags_count":169,"template":false,"template_full_name":null,"purl":"pkg:github/formio/core","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formio%2Fcore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formio%2Fcore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formio%2Fcore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formio%2Fcore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/formio","download_url":"https://codeload.github.com/formio/core/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formio%2Fcore/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261960429,"owners_count":23236560,"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":[],"created_at":"2025-06-28T21:44:31.082Z","updated_at":"2025-06-28T21:44:44.854Z","avatar_url":"https://github.com/formio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Form.io Core Data Processing Engine\n\nThis library is the core data processing engine behind the Form.io platform. It is a set of isomorphic APIs that allow for complex orchestration (e.g. calculated values, conditionally hidden components, complex logic, etc.) of JSON form and submission definitions.\n\n### Usage\n\n@formio/core is available as an npm package. You can install it using the package manager of your choice:\n\n```bash\n# npm\nnpm install --save @formio/core\n\n# yarn\nyarn add @formio/core\n```\n\n### Development\n\nProcessing form and submission data efficiently has two distinct requirements:\n\n1. A form- and data-aware traversal of the form JSON; and\n2. A set of processing functions to derive (and occasionally mutate) form state.\n\nThe first requirement is accomplished via the `eachComponentData` and `eachComponentDataAsync` functions, which traverse each form component JSON and provide a callback parameter by which to interact with the component and it's corresponding submission data parameter(s).\n\nThe second requirement is accomplished via \"processors\" (e.g. `calculate`, `validate`, or `hideChildren`) which are functions that, given an evaluation `context`, operate on, derive state from, and occasionally mutate the form state and submission values depending on the internal form logic, resulting in a `scope` object that contains the results of each processor keyed by component path.\n\nTo run a suite of processor functions on a form and a submission, the `process` family of functions take a form JSON definition, a submission JSON definition, and an array of processor function as an arguments (encapsulated as a `context` object which is passed through to each callback processor function).\n\n```js\nimport { processSync } from '@formio/core';\n\nconst form = {\n  display: 'form',\n  components: [\n    {\n      type: 'textfield',\n      key: 'firstName',\n      label: 'First Name',\n      input: true,\n    },\n    {\n      type: 'textfield',\n      key: 'lastName',\n      label: 'Last Name',\n      input: true,\n    },\n    {\n      type: 'button',\n      key: 'submit',\n      action: 'submit',\n      label: 'Submit',\n    },\n  ],\n};\n\nconst submission = {\n  data: {\n    firstName: 'John',\n    lastName: 'Doe',\n  },\n};\n\nconst addExclamationSync = (context) =\u003e {\n  const { component, data, scope, path, value } = context;\n\n  if (!scope.addExclamation) scope.addExclamation = {};\n  let newValue = `${value}!`;\n\n  // The scope is a rolling \"results\" object that tracks which components have been operated on by which processor functions\n  scope.addExclamation[path] = true;\n  _.set(data, path, newValue);\n  return;\n};\n\n// The context object is mutated depending on which component is being processed; after `processSync` it will contain the processed components and data\nconst context = {\n  components: form.components,\n  data: submission.data,\n  processors: [{ processSync: addExclamationSync }],\n  scope: {},\n};\n\n// The `process` family of functions returns the scope object\nconst resultScope = processSync(context);\n\nconsole.assert(resultScope['addExclamation']?.firstName === true);\nconsole.assert(resultScope['addExclamation']?.lastName === true);\nconsole.assert(submission.data.firstName === 'John!');\nconsole.assert(submission.data.lastName === 'Doe!');\n```\n\n### Debugging\n\nDebugging the Form.io Enterprise Server can be challenging because of the added complexity of the @formio/vm library (which sandboxes the @formio/core processors for safe execution of untrusted JavaScript on the server). [Instructions on how to debug can be found here.](https://formio.atlassian.net/wiki/spaces/SD/pages/184025089/Debugging+formio+core)\n\n### Experimental\n\nThis library contains experimental code (found in the `src/experimental` directory or via an import, e.g. `import { Components } from @formio/core/experimental`) that was designed to update and replace the core rendering engine behind the Form.io platform. It is a tiny (12k gzipped) rendering framework that allows for the rendering of complex components as well as managing the data models controlled by each component.\n\n#### Usage\n\nTo use this experimental framework, you will first need to install the parent library into your application.\n\n```bash\n# npm\nnpm install --save @formio/core\n# yarn\nyarn add @formio/core\n```\n\nNext, you can create a new component as follows.\n\n```js\nimport { Components } from '@formio/core/experimental';\nComponents.addComponent({\n  type: 'h3',\n  template: (ctx) =\u003e `\u003ch3\u003e${ctx.component.header}\u003c/h3\u003e`,\n});\n```\n\nAnd now this component will render using the following.\n\n```js\nconst header = Components.createComponent({\n  type: 'h3',\n  header: 'This is a test',\n});\nconsole.log(header.render()); // Outputs \u003ch3\u003eThis is a test\u003c/h3\u003e\n```\n\nYou can also use this library by including it in your webpage scripts by including the following.\n\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@formio/base@latest/dist/formio.core.min.js\"\u003e\u003c/script\u003e\n```\n\nAfter you do this, you can then do the following to create a Data Table in your website.\n\n```js\nFormioCore.render(\n  document.getElementById('data-table'),\n  {\n    type: 'datatable',\n    key: 'customers',\n    components: [\n      {\n        type: 'datavalue',\n        key: 'firstName',\n        label: 'First Name',\n      },\n      {\n        type: 'datavalue',\n        key: 'lastName',\n        label: 'First Name',\n      },\n    ],\n  },\n  {},\n  {\n    customers: [\n      { firstName: 'Joe', lastName: 'Smith' },\n      { firstName: 'Sally', lastName: 'Thompson' },\n      { firstName: 'Mary', lastName: 'Bono' },\n    ],\n  },\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformio%2Fcore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformio%2Fcore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformio%2Fcore/lists"}