# @openremote/or-json-forms > Renders a JSON schema and provides instance editing Latest version **1.30.0** (published 2026-09-02) · AGPL-3.0-or-later license · 3.9K weekly downloads ## Install ```sh npm install @openremote/or-json-forms pnpm add @openremote/or-json-forms yarn add @openremote/or-json-forms bun add @openremote/or-json-forms ``` ## Health **Score 80/100 (A)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. ## Facts | | | |---|---| | Version | 1.30.0 | | Published | 2026-09-02 | | First published | 2024-05-12 | | Weekly downloads | 3.9K | | License | AGPL-3.0-or-later | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 9 | | Unpacked size | 3.9 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | OpenRemote | | Maintainers | openremotedeveloper, wborn | ## Links - npm: https://www.npmjs.com/package/@openremote/or-json-forms - npm.io page: https://npm.io/package/@openremote/or-json-forms ## Dependencies (9) - [ajv](https://npm.io/package/ajv.md) ^8.20.0 - [lit](https://npm.io/package/lit.md) ^3.3.1 - [@jsonforms/core](https://npm.io/package/@jsonforms/core.md) ^3.5.1 - [@openremote/core](https://npm.io/package/@openremote/core.md) 1.30.0 - [@openremote/or-element](https://npm.io/package/@openremote/or-element.md) 1.30.0 - [@openremote/or-translate](https://npm.io/package/@openremote/or-translate.md) 1.30.0 - [@openremote/or-components](https://npm.io/package/@openremote/or-components.md) 1.30.0 - [@openremote/or-mwc-components](https://npm.io/package/@openremote/or-mwc-components.md) 1.30.0 - [@openremote/or-vaadin-components](https://npm.io/package/@openremote/or-vaadin-components.md) 1.30.0 ## Recent versions - 1.30.0 (latest) — 2026-09-02 - 1.31.0-snapshot.20260916144308 (snapshot) — 2026-09-16 - 1.31.0-snapshot.20260916130646 — 2026-09-16 - 1.31.0-snapshot.20260915122244 — 2026-09-15 - 1.31.0-snapshot.20260911091633 — 2026-09-11 - 1.31.0-snapshot.20260910125057 — 2026-09-10 - 1.31.0-snapshot.20260910120754 — 2026-09-10 - 1.31.0-snapshot.20260908130403 — 2026-09-08 - 1.31.0-snapshot.20260907094218 — 2026-09-07 - 1.31.0-snapshot.20260904133325 — 2026-09-04 - 1.31.0-snapshot.20260904115341 — 2026-09-04 - 1.31.0-snapshot.20260904102436 — 2026-09-04 - 1.31.0-snapshot.20260903144735 — 2026-09-03 - 1.31.0-snapshot.20260903135821 — 2026-09-03 - 1.31.0-snapshot.20260903081447 — 2026-09-03 - … 791 more at https://npm.io/package/@openremote/or-json-forms/versions ## README # @openremote/or-json-forms \ [![NPM Version][npm-image]][npm-url] Web Component for generating forms based on JSON Schema. This can be useful for creating forms for complex data structures and validating user input. This component expects the JSON Schemas to be formatted as described in [Usage](#usage). ## Install ```bash npm i @openremote/or-json-forms yarn add @openremote/or-json-forms ``` ## Usage The JSON Forms expects [Draft-07](http://json-schema.org/draft-07) schemas. ### Unsupported keywords The following keywords are not (fully) supported: - `anyOf`: ??? - `allOf`: ??? - `$ref`: will only resolve the reference if it is in the schema. - `examples`: planned ### Behavior Specification - `{ "type": "string" }` - Displays a text input field. - `{ "type": "number" }` - Displays a number input field. - `{ "type": "integer" }` - Displays a number input field. - `{ "type": "array" }` - Displays a wrapper with a button to add items. - `{ "type": "object" }` - Displays a wrapper with a button to add properties. #### Renderers & Testers #### Default values The JSON Forms will resolve default values from the schema based on the `default` property or infer it from the type. It derives the type from the schema's `type` property, or from properties that are characteristic of the type. | property | type | | ---------------------- | ------------------ | | `type` | The specified type | | `properties` | object | | `additionalProperties` | object | | `items` | array | Depending on the type, it derives the default value as follows: | type | value | formats | Formatted default | | ----------------------- | ----------------------------------------------------------------- | --------------------- | ----------------- | | [...] (array of values) | [...] | | | | string | `""` | date-time, date, time | `new Date()` | | integer, number | `0` | | | | boolean | `false` | | | array | `[]` | | | object | An object with the required properties, otherwise an empty object | | | null | `null` | | ### Example usage ```typescript import { html } from 'lit'; import { ErrorObject, StandardRenderers } from "@openremote/or-json-forms"; import "@openremote/or-json-forms"; public class MyJsonForms extends LitElement { private static schema = { $schema: "http://json-schema.org/draft-07/schema#", title: "MyObject", type: "object", properties: { firstname: { type: "string" }, lastname: { type: "string" }, birthday: { type: "integer", minimum: 0 }, }, }; // Apply a custom UI schema to remove the outer VerticalLayout private static uiSchema: any = { type: "Control", scope: "#" }; render() { return html`` } onChanged(dataAndErrors: { errors: ErrorObject[] | undefined, data: any }) { // Do something with the data and errors } }; ``` ### Custom renderers ### Styling All styling is done through CSS, the following CSS variables can be used: ```css --or-app-color3 /* Change text colors */ --or-app-color4 /* Change border colors */ --or-app-color5 /* Change border colors */ --or-icon-fill ``` ## Supported Browsers The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. ## License [GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html) [npm-image]: https://img.shields.io/npm/v/@openremote/or-json-forms.svg [npm-url]: https://www.npmjs.com/package/@openremote/or-json-forms --- _Source: https://npm.io/package/@openremote/or-json-forms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._