# @formio/core

> The core Form.io renderering framework.

Latest version **1.2.0** (published 2022-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @formio/core
pnpm add @formio/core
yarn add @formio/core
bun add @formio/core
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2022-12-29 |
| First published | 2020-06-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 3.5 MB |
| Known vulnerabilities | 0 (+16 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Travis Tidwell |
| Maintainers | ryanformio, lane-formio, tanyagashtold, edwinanciani, travist |
| Keywords | The, core, Form.io, rendering, framework. |

## Links

- npm: https://www.npmjs.com/package/@formio/core
- Repository: https://github.com/formio/core
- Homepage: https://github.com/formio/core#readme
- Issues: https://github.com/formio/core/issues
- npm.io page: https://npm.io/package/@formio/core

## Dependencies (7)

- [dayjs](https://npm.io/package/dayjs.md) ^1.10.8
- [core-js](https://npm.io/package/core-js.md) ^3.21.1
- [dompurify](https://npm.io/package/dompurify.md) ^2.3.6
- [eventemitter3](https://npm.io/package/eventemitter3.md) ^4.0.7
- [json-logic-js](https://npm.io/package/json-logic-js.md) ^2.0.2
- [@formio/lodash](https://npm.io/package/@formio/lodash.md) 0.0.9
- [fetch-ponyfill](https://npm.io/package/fetch-ponyfill.md) ^7.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2022-12-29
- 2.8.1-api99.0 (rc) — 2026-07-27
- 2.5.3 (2_5_x) — 2025-12-19
- 2.6.0-rc.3 (2_6_x) — 2025-12-16
- 2.3.0-patch.2 (2_3_x) — 2025-08-27
- 2.9.0 — 2026-09-22
- 2.8.3 — 2026-09-16
- 2.8.2 — 2026-08-27
- 2.8.1-pdf515.0 — 2026-08-11
- 2.8.1 — 2026-08-11
- 2.8.0 — 2026-07-23
- 2.8.0-api99.0 — 2026-07-21
- 2.7.1 — 2026-06-16
- 2.7.0 — 2026-06-03
- 2.6.6 — 2026-05-27
- … 568 more at https://npm.io/package/@formio/core/versions

## README

## Form.io Core Data Processing Engine

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

## Official Documentation

For the latest documentation, release information, and guides, always refer to the official Form.io Help Documentation available here:

**[https://help.form.io](https://help.form.io/deploy/maintenance-and-migration#new-validation-engine)**

### Usage

@formio/core is available as an npm package. You can install it using the package manager of your choice:

```bash
# npm
npm install --save @formio/core

# yarn
yarn add @formio/core
```

### Development

Processing form and submission data efficiently has two distinct requirements:

1. A form- and data-aware traversal of the form JSON; and
2. A set of processing functions to derive (and occasionally mutate) form state.

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

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

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

```js
import { processSync } from '@formio/core';

const form = {
  display: 'form',
  components: [
    {
      type: 'textfield',
      key: 'firstName',
      label: 'First Name',
      input: true,
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      input: true,
    },
    {
      type: 'button',
      key: 'submit',
      action: 'submit',
      label: 'Submit',
    },
  ],
};

const submission = {
  data: {
    firstName: 'John',
    lastName: 'Doe',
  },
};

const addExclamationSync = (context) => {
  const { component, data, scope, path, value } = context;

  if (!scope.addExclamation) scope.addExclamation = {};
  let newValue = `${value}!`;

  // The scope is a rolling "results" object that tracks which components have been operated on by which processor functions
  scope.addExclamation[path] = true;
  _.set(data, path, newValue);
  return;
};

// The context object is mutated depending on which component is being processed; after `processSync` it will contain the processed components and data
const context = {
  components: form.components,
  data: submission.data,
  processors: [{ processSync: addExclamationSync }],
  scope: {},
};

// The `process` family of functions returns the scope object
const resultScope = processSync(context);

console.assert(resultScope['addExclamation']?.firstName === true);
console.assert(resultScope['addExclamation']?.lastName === true);
console.assert(submission.data.firstName === 'John!');
console.assert(submission.data.lastName === 'Doe!');
```

### Experimental

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

#### Usage

To use this experimental framework, you will first need to install the parent library into your application.

```bash
# npm
npm install --save @formio/core
# yarn
yarn add @formio/core
```

Next, you can create a new component as follows.

```js
import { Components } from '@formio/core/experimental';
Components.addComponent({
  type: 'h3',
  template: (ctx) => `<h3>${ctx.component.header}</h3>`,
});
```

And now this component will render using the following.

```js
const header = Components.createComponent({
  type: 'h3',
  header: 'This is a test',
});
console.log(header.render()); // Outputs <h3>This is a test</h3>
```

You can also use this library by including it in your webpage scripts by including the following.

```
<script src="https://cdn.jsdelivr.net/npm/@formio/base@latest/dist/formio.core.min.js"></script>
```

After you do this, you can then do the following to create a Data Table in your website.

```js
FormioCore.render(
  document.getElementById('data-table'),
  {
    type: 'datatable',
    key: 'customers',
    components: [
      {
        type: 'datavalue',
        key: 'firstName',
        label: 'First Name',
      },
      {
        type: 'datavalue',
        key: 'lastName',
        label: 'First Name',
      },
    ],
  },
  {},
  {
    customers: [
      { firstName: 'Joe', lastName: 'Smith' },
      { firstName: 'Sally', lastName: 'Thompson' },
      { firstName: 'Mary', lastName: 'Bono' },
    ],
  },
);
```

---
_Source: https://npm.io/package/@formio/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._