### Install dependencies
Source: https://jsonforms.io/docs/getting-started
Run this command in the project root to install all required dependencies.
```bash
npm ci
```
--------------------------------
### Run development server
Source: https://jsonforms.io/docs/getting-started
Start the application in development mode.
```bash
npm run dev
```
--------------------------------
### UI schema translation example
Source: https://jsonforms.io/docs/i18n
Example UI schema demonstrating how i18n keys, labels, and text properties are resolved for translation.
```javascript
const uischema = {
type: 'VerticalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/user',
options: {
detail: {
type: 'Group',
i18n: 'i18nUser',
}
}
},
{
type: 'Control',
scope: '#/properties/address',
options: {
detail: {
type: 'Group',
label: 'labelAddress',
}
}
},
{
type: 'Control',
scope: '#/properties/address'
},
{
type: 'Label',
i18n: 'i18nLabel'
},
{
type: 'Label',
text: 'textLabel'
},
]
};
```
--------------------------------
### Date Picker Data Example
Source: https://jsonforms.io/docs/date-time-picker
Example of the data structure associated with the date picker configuration.
```json
{
"date": "2026-08-06"
}
```
--------------------------------
### Install JSON Forms and Material UI dependencies
Source: https://jsonforms.io/docs/tutorial
Installs the core JSON Forms packages, material renderers, and required Material UI libraries.
```bash
npm install --save @jsonforms/core
npm install --save @jsonforms/react
npm install --save @jsonforms/material-renderers
npm install --save @jsonforms/examples
npm install --save @mui/material
npm install --save @mui/icons-material
npm install --save @mui/x-date-pickers
npm install --save @emotion/styled
npm install --save @emotion/react
```
--------------------------------
### Import JSON Forms components
Source: https://jsonforms.io/docs/tutorial
Imports the example data and material renderer sets into the application file.
```javascript
import { person } from '@jsonforms/examples';
import {
materialRenderers,
materialCells,
} from '@jsonforms/material-renderers';
```
--------------------------------
### Configure Time Picker Options
Source: https://jsonforms.io/docs/date-time-picker
Example demonstrating custom time formatting, 12-hour clock, and custom labels for the time picker modal.
```json
{
"properties": {
"time": {
"type": "string"
}
}
}
```
```json
{
"type": "Control",
"scope": "#/properties/time",
"options": {
"format": "time",
"ampm": true,
"timeFormat": "HH",
"timeSaveFormat": "HH:mm",
"clearLabel": "Clear it!",
"cancelLabel": "Abort",
"okLabel": "Do it"
}
}
```
```json
{
"time": "13:00:00"
}
```
--------------------------------
### Example Data Object
Source: https://jsonforms.io/docs/tutorial/custom-renderers
Sample data object containing a rating value.
```json
{
"rating": 2
}
```
--------------------------------
### Define JSON Forms configuration variables
Source: https://jsonforms.io/docs/tutorial
Initializes the schema, UI schema, and data variables using the imported example.
```javascript
const schema = person.schema;
const uischema = person.uischema;
const initialData = person.data;
```
--------------------------------
### Example Data Object
Source: https://jsonforms.io/docs/uischema/controls
Sample data object containing a value for the name property.
```json
{
"name": "Ottgar"
}
```
--------------------------------
### Example data for comments array
Source: https://jsonforms.io/docs/uischema/controls
Sample data object containing an array of comment objects.
```json
{
"comments": [
{
"name": "John Doe",
"message": "This is an example message"
},
{
"name": "Max Mustermann",
"message": "Another message"
}
]
}
```
--------------------------------
### Default property path keys
Source: https://jsonforms.io/docs/i18n
Example JSON schema demonstrating how property paths are used as default translation keys.
```json
{
"properties": {
"firstName": {
"type": "string"
},
"address": {
"type": "object",
"properties": {
"street": {
"type": "string"
}
}
},
"comments": {
"type": "array",
"items": {
"type": "object",
"properties": {
"message": {
"type": "string"
},
}
}
}
}
}
```
--------------------------------
### Date Time Picker Data Example
Source: https://jsonforms.io/docs/date-time-picker
Represents the data structure for the date-time picker control.
```json
{
"datetime": "2026-08-06T12:55:56.716Z"
}
```
--------------------------------
### oneOf enum attribute schema example
Source: https://jsonforms.io/docs/i18n
Example of a oneOf schema structure demonstrating how i18n keys, titles, and constants are used for translation.
```json
{
gender: {
oneOf: [
{
title: "Male",
const: 0
},
{
title: "Female",
const: "f",
i18n: "fem"
},
{
const: null
}
]
}
}
```
--------------------------------
### Define a UI Schema Control
Source: https://jsonforms.io/docs/uischema/controls
Example of a UI schema element configured as a Control with a scope pointing to the name property.
```json
{
"type": "Control",
"scope": "#/properties/name"
}
```
--------------------------------
### Enum attribute schema example
Source: https://jsonforms.io/docs/i18n
Example of a simple enum attribute schema that triggers translation keys based on the property path and enum values.
```json
{
gender: {
type: "string",
enum: ["male", "female", "other"]
}
}
```
--------------------------------
### Define a JSON Schema property
Source: https://jsonforms.io/docs/uischema/controls
Example of a simple JSON schema defining a string property named name.
```json
{
"properties": {
"name": {
"type": "string"
}
}
}
```
--------------------------------
### Define JSON Schema
Source: https://jsonforms.io/docs/integrations/react
Example of a JSON Schema object defining data types, constraints, and required fields for a form.
```javascript
const schema = {
type: 'object',
properties: {
name: {
type: 'string',
minLength: 1,
},
description: {
type: 'string',
},
done: {
type: 'boolean',
},
due_date: {
type: 'string',
format: 'date',
},
rating: {
type: 'integer',
maximum: 5,
},
recurrence: {
type: 'string',
enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
},
recurrence_interval: {
type: 'integer',
},
},
required: ['name', 'due_date'],
};
```
--------------------------------
### Navigate to project directory
Source: https://jsonforms.io/docs/tutorial
Command to enter the newly created application directory.
```bash
cd my-jsonforms-app
```
--------------------------------
### Scaffold a React application
Source: https://jsonforms.io/docs/tutorial
Commands to initialize a new React project using create-react-app.
```bash
npx create-react-app my-jsonforms-app
```
```bash
npx create-react-app my-jsonforms-app --template typescript
```
--------------------------------
### Initialize the JSON Forms Seed Application
Source: https://jsonforms.io/docs/tutorial/custom-layouts
Commands to set up the local development environment using the provided seed repository.
```bash
cd jsonforms-react-seed
npm install
npm start
```
--------------------------------
### init(data, schema, uischema, options)
Source: https://jsonforms.io/docs/deprecated/available-actions
Initializes the JSON Forms store with the provided data, schema, and UI schema. This action is required for JSON Forms to function correctly.
```APIDOC
## init(data: any, schema: JsonSchema, uischema: UISchemaElement, options: InitActionOptions | AJV.Ajv)
### Description
Initializes the store with the provided data, schema, and UI schema. This must be called for JSON Forms to work properly.
### Parameters
- **data** (any) - The data to initialize the store with.
- **schema** (JsonSchema) - The JSON schema.
- **uischema** (UISchemaElement) - The UI schema.
- **options** (InitActionOptions | AJV.Ajv) - Optional customization for the validator and ref resolver.
```
--------------------------------
### Initialize and Access React Context
Source: https://jsonforms.io/docs/tutorial/dynamic-enum
Set up a React Context to provide the API service to components and consume it using the useContext hook.
```javascript
export const APIContext = React.createContext(new API(url));
const App = () => {
...
}
```
```javascript
const api = React.useContext(APIContext);
```
--------------------------------
### Configure detail view options
Source: https://jsonforms.io/docs/uischema/controls
Options for configuring how array items are rendered in a detail view.
```json
options: {
detail : 'DEFAULT'
}
```
```json
options: {
detail : 'GENERATED'
}
```
```json
options: {
detail : 'REGISTERED'
}
```
```json
options: {
detail : {
type: 'HorizontalLayout',
...
}
}
```
--------------------------------
### Supply External Validation Errors
Source: https://jsonforms.io/docs/validation
Example of using the additionalErrors prop to inject custom AJV-style error objects into the form.
```tsx
const AdditionalErrorsExample = () => {
const [additionalErrors, setAdditionalErrors] = useState([]);
const addAdditionalError = () => {
const newError: ErrorObject = {
// AJV style path to the property in the schema
instancePath: '/lastname',
// message to display
message: 'New error',
schemaPath: '',
keyword: '',
params: {},
};
setAdditionalErrors(errors => [...errors, newError]);
};
return (
);
};
```
--------------------------------
### UI Schema-based Date-Time Picker Configuration
Source: https://jsonforms.io/docs/date-time-picker
Configures the date-time picker by setting the format option within the UI Schema.
```json
{
"properties": {
"datetime": {
"type": "string",
"description": "uischema-based datetime picker"
}
}
}
```
```json
{
"type": "Control",
"scope": "#/properties/datetime",
"options": {
"format": "date-time"
}
}
```
```json
{
"datetime": "2026-08-06T12:55:56.716Z"
}
```
--------------------------------
### Initial Data Object
Source: https://jsonforms.io/docs/tutorial
Provides the initial state for the form fields.
```json
{
"name": "John Doe",
"vegetarian": false,
"birthDate": "1985-06-02",
"personalData": {
"age": 34
},
"postalCode": "12345"
}
```
--------------------------------
### Define Initial Data
Source: https://jsonforms.io/docs/middleware
The initial data object containing selected services and the calculated price.
```json
{
"services": [
"Wash (15$)",
"Polish (15$)"
],
"price": 30
}
```
--------------------------------
### Wrap entry point with JsonFormsReduxContext
Source: https://jsonforms.io/docs/deprecated/redux
Use this structure to integrate JSON Forms with a Redux store.
```jsx
```
--------------------------------
### Full CheckBoxWithPriceControl Implementation
Source: https://jsonforms.io/docs/tutorial/custom-renderers
Complete source code for the custom renderer including the tester logic.
```typescript
import {
JsonSchema,
ControlProps,
isBooleanControl,
RankedTester,
rankWith,
schemaMatches,
and,
} from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';
import { Unwrapped } from '@jsonforms/material-renderers';
import { Grid, Typography } from '@mui/material';
const { MaterialBooleanControl } = Unwrapped;
type JsonSchemaWithPrice = JsonSchema & { price: number };
export const checkBoxWithPriceControl = (props: ControlProps) => {
const schema = props.schema as JsonSchemaWithPrice;
const label = `${props.label} (${schema.price})`;
return (
{schema.price > 50 && (
Shipping is free!
)}
);
};
export const checkBoxWithPriceControlTester: RankedTester = rankWith(
3,
and(
isBooleanControl,
schemaMatches((schema) => schema.hasOwnProperty('price'))
)
);
export default withJsonFormsControlProps(checkBoxWithPriceControl);
```
--------------------------------
### Define a UI Schema for JSON Forms
Source: https://jsonforms.io/docs/integrations/react
A sample UI schema demonstrating VerticalLayout, HorizontalLayout, and conditional visibility rules.
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": false,
"scope": "#/properties/done"
},
{
"type": "Control",
"scope": "#/properties/name"
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/due_date"
},
{
"type": "Control",
"scope": "#/properties/rating"
}
]
},
{
"type": "Control",
"scope": "#/properties/description",
"options": {
"multi": true
}
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/recurrence"
},
{
"type": "Control",
"scope": "#/properties/recurrence_interval",
"rule": {
"effect": "HIDE",
"condition": {
"scope": "#/properties/recurrence",
"schema": {
"const": "Never"
}
}
}
}
]
}
]
}
```
--------------------------------
### Define UI Schema-based Time Picker
Source: https://jsonforms.io/docs/date-time-picker
Configures a time picker by setting the format option to time within the UI Schema.
```json
{
"properties": {
"time": {
"type": "string"
}
}
}
```
```json
{
"type": "Control",
"scope": "#/properties/time",
"options": {
"format": "time"
}
}
```
```json
{
"time": "13:37:00"
}
```
--------------------------------
### Define UI Schema
Source: https://jsonforms.io/docs/tutorial
Configures the layout and control rendering for the form fields.
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/name"
},
{
"type": "Control",
"scope": "#/properties/personalData/properties/age"
},
{
"type": "Control",
"scope": "#/properties/birthDate"
}
]
},
{
"type": "Label",
"text": "Additional Information"
},
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/personalData/properties/height"
},
{
"type": "Control",
"scope": "#/properties/nationality"
},
{
"type": "Control",
"scope": "#/properties/occupation",
"options": {
"suggestion": [
"Accountant",
"Engineer",
"Freelancer",
"Journalism",
"Physician",
"Student",
"Teacher",
"Other"
]
}
}
]
}
]
}
```
--------------------------------
### Define Basic Schema and UI Schema
Source: https://jsonforms.io/docs/readonly
Standard schema and UI schema definitions for a form with first and last name fields.
```json
{
"properties": {
"firstName": {
"type": "string"
},
"lastName": {
"type": "string"
}
}
}
```
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/firstName"
},
{
"type": "Control",
"scope": "#/properties/lastName"
}
]
}
```
```json
{
"firstName": "Max",
"lastName": "Mustermann"
}
```
--------------------------------
### Configure AJV for referenced schemas
Source: https://jsonforms.io/docs/deprecated/ref-resolving-legacy
Create a customized AJV instance and register the referenced schema with a unique identifier.
```javascript
const ajv = createAjv();
ajv.addSchema(yourSchemaObject, 'yourSchemaIdentifier');
```
--------------------------------
### Customize AJV Instance
Source: https://jsonforms.io/docs/validation
Shows the default configuration used by JSON Forms when creating an AJV instance.
```javascript
import Ajv from 'ajv';
import addFormats from 'ajv-formats';
const ajv = new AJV({
allErrors: true,
verbose: true,
strict: false,
...options,
});
addFormats(ajv);
```
--------------------------------
### Configure array sorting buttons
Source: https://jsonforms.io/docs/uischema/controls
Enable sorting buttons for array elements using the showSortButtons option.
```json
options: {
showSortButtons: true
}
```
```json
{
"properties": {
"comments": {
"type": "array"
}
}
}
```
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/comments",
"options": {
"showSortButtons": true
}
}
]
}
```
```json
{
"comments": [
{
"name": "John Doe",
"message": "This is an example message"
},
{
"name": "Max Mustermann",
"message": "Get ready for booohay"
}
]
}
```
--------------------------------
### Configure Date Picker UI Schema
Source: https://jsonforms.io/docs/date-time-picker
Configures the UI schema to restrict views to year and month and sets custom labels and date formats.
```json
{
"type": "Control",
"scope": "#/properties/date",
"label": "Year Month Picker",
"options": {
"format": "date",
"clearLabel": "Clear it!",
"cancelLabel": "Abort",
"okLabel": "Do it",
"views": [
"year",
"month"
],
"dateFormat": "YYYY.MM",
"dateSaveFormat": "YYYY-MM"
}
}
```
--------------------------------
### Schema-based Date-Time Picker Configuration
Source: https://jsonforms.io/docs/date-time-picker
Defines a string property with format 'date-time' in the JSON Schema to trigger the picker.
```json
{
"properties": {
"datetime": {
"type": "string",
"format": "date-time",
"description": "schema-based datetime picker"
}
}
}
```
```json
{
"type": "Control",
"scope": "#/properties/datetime"
}
```
```json
{
"datetime": "2026-08-06T12:55:56.716Z"
}
```
--------------------------------
### Configure Form Layout with UI Schema
Source: https://jsonforms.io/docs
Defines the vertical arrangement and control options for the form elements.
```json
{
"type":"VerticalLayout",
"elements":[
{
"type":"Control",
"scope":"#/properties/name"
},
{
"type":"Control",
"scope":"#/properties/description",
"options":{
"multi":true
}
},
{
"type":"Control",
"label":"Rating",
"scope":"#/properties/rating"
},
{
"type":"Control",
"label":"Done?",
"scope":"#/properties/done"
}
]
}
```
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/name"
},
{
"type": "Control",
"scope": "#/properties/description",
"options": {
"multi": true
}
},
{
"type": "Control",
"label": "Rating",
"scope": "#/properties/rating"
},
{
"type": "Control",
"label": "Done?",
"scope": "#/properties/done"
}
]
}
```
--------------------------------
### Define UI Schema for Control
Source: https://jsonforms.io/docs/uischema/controls
The UI schema configuration for the control.
```json
{
"type": "Control",
"scope": "#/properties/name",
"label": "First name"
}
```
--------------------------------
### Enable autocomplete renderer
Source: https://jsonforms.io/docs/multiple-choice
Set the autocomplete option to true in the UI schema to enable the autocomplete renderer for enum or oneOf fields.
```json
{
type: "Control",
scope: "#/properties/autocompleteEnum",
options: {
autocomplete: true
}
}
```
```json
{
"type": "object",
"properties": {
"autocompleteEnum": {
"type": "string",
"enum": [
"foo",
"bar",
"foobar"
]
}
}
}
```
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/autocompleteEnum",
"options": {
"autocomplete": true
}
}
]
}
```
```json
{}
```
--------------------------------
### Update form data in React
Source: https://jsonforms.io/docs/integrations/react
Demonstrates how to manage and clear form data using the data prop and the onChange callback.
```javascript
const initialData = {
name: 'Max Power',
};
const ClearFormExample = () => {
const [data, setData] = useState(initialData);
return (
setData(data)}
/>
);
};
```
--------------------------------
### UI Schema-Based Date Picker
Source: https://jsonforms.io/docs/date-time-picker
Renders a date picker by specifying the format in the UI Schema options instead of the JSON Schema.
```json
{
"properties": {
"date": {
"type": "string"
}
}
}
```
```json
{
"type": "Control",
"scope": "#/properties/date",
"options": {
"format": "date"
}
}
```
```json
{
"date": "2026-08-06"
}
```
--------------------------------
### Define UI schema for comments array
Source: https://jsonforms.io/docs/uischema/controls
UI schema using elementLabelProp to display array items and a custom detail layout.
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/comments",
"options": {
"elementLabelProp": "name",
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/message"
},
{
"type": "Control",
"scope": "#/properties/name"
}
]
}
}
}
]
}
```
--------------------------------
### Date Time Picker UI Schema Configuration
Source: https://jsonforms.io/docs/date-time-picker
Configures the date-time picker behavior, including custom labels and specific date-time formats for display and saving.
```json
{
"type": "Control",
"scope": "#/properties/datetime",
"options": {
"format": "date-time",
"clearLabel": "Clear it!",
"cancelLabel": "Abort",
"okLabel": "Do it",
"dateTimeFormat": "DD-MM-YY hh:mm:a",
"dateTimeSaveFormat": "YYYY/MM/DD h:mm a",
"ampm": true
}
}
```
--------------------------------
### Define UI Schema label
Source: https://jsonforms.io/docs/labels
Explicitly set a label within the UI Schema using the label attribute.
```json
{
type: "VerticalLayout",
elements: [
{
type: "Control",
scope: "#/properties/name",
label: "First Name"
}
]
}
```
```json
{
"properties": {
"name": {
"type": "string"
}
}
}
```
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/name",
"label": "First Name"
}
]
}
```
```json
{}
```
--------------------------------
### Define a Categorization Layout
Source: https://jsonforms.io/docs/uischema/layouts
Structures controls into multiple categories, typically rendered as tabs.
```json
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Personal Data",
"elements": [
{
"type": "Control",
"scope": "#/properties/firstName"
},
{
"type": "Control",
"scope": "#/properties/lastName"
},
{
"type": "Control",
"scope": "#/properties/age"
},
{
"type": "Control",
"scope": "#/properties/height"
},
{
"type": "Control",
"scope": "#/properties/dateOfBirth"
}
]
},
{
"type": "Category",
"label": "Dietary requirements",
"elements": [
{
"type": "Control",
"scope": "#/properties/diet"
},
{
"type": "Control",
"scope": "allergicToPeanuts"
}
]
}
]
}
```
--------------------------------
### Configure Dynamic Rules for ReadOnly
Source: https://jsonforms.io/docs/readonly
Use the rule property in the UI schema to dynamically enable or disable elements based on conditions.
```json
{
type: "VerticalLayout",
elements: [
{
type: "Control",
scope: "#/properties/firstName",
rule: {
effect: "DISABLE",
condition: {
scope: "#",
schema: {} //always true
}
}
},
// OR
{
type: "Control",
scope: "#/properties/firstName",
rule: {
effect: "ENABLE",
condition: {
scope: "#",
schema: { not: {} } //always false
}
}
}
]
}
```
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/firstName",
"rule": {
"effect": "DISABLE",
"condition": {
"scope": "#",
"schema": {}
}
}
},
{
"type": "Control",
"scope": "#/properties/lastName"
}
]
}
```
--------------------------------
### Configure radio group format
Source: https://jsonforms.io/docs/uischema/controls
Option configuration to display an enum as a radio group.
```javascript
options: {
format: 'radio'
}
```
--------------------------------
### Configure Global Locale with dayjs
Source: https://jsonforms.io/docs/date-time-picker
Import the required dayjs locales and set the global locale before initializing the JSON Forms component.
```javascript
import dayjs from 'dayjs';
import 'dayjs/locale/de';
import 'dayjs/locale/en';
dayjs.locale("en");
```
--------------------------------
### Resolving JSON Schema References
Source: https://jsonforms.io/docs/ref-resolving
Demonstrates using json-schema-ref-parser and json-refs to resolve schema references before passing the schema to the JsonForms component.
```javascript
import React, { useState } from 'react';
import { JsonForms } from '@jsonforms/react';
import { materialCells, materialRenderers } from '@jsonforms/material-renderers';
import $RefParser from '@apidevtools/json-schema-ref-parser';
import JsonRefs from 'json-refs';
import mySchemaWithReferences from 'myschema.json';
const yourRemoteSchemaResolver = {
order: 1,
canRead: function(file) {
return file.url.indexOf('yourRemoteSchemaIdentifier') !== -1;
},
read: function() {
return JSON.stringify(yourSchemaObject);
},
};
const refParserOptions = {
dereference: {
circular: false
},
resolve: {
foo: yourRemoteSchemaResolver
}
function App() {
const [data, setData] = useState(initialData);
const [resolvedSchema, setSchema] = useState();
useEffect(() => {
$RefParser.dereference(mySchemaWithReferences, refParserOptions).then(res => setSchema(res.$schema));
// or
JsonRefs.resolveRefs(mySchemaWithReferences).then(res => setSchema(res.resolved));
},[]);
if(resolvedSchema === undefined) {
return
Loading...
}
return (
setData(data)}
/>
);
}
```
--------------------------------
### Implement a custom ref resolver
Source: https://jsonforms.io/docs/deprecated/ref-resolving-legacy
Define a resolver object with canRead and read methods, then include it in the refParserOptions configuration.
```javascript
const yourSchemaResolver = {
order: 1,
canRead: function(file) {
return file.url.indexOf('yourSchemaIdentifier') !== -1;
},
read: function() {
return JSON.stringify(yourSchemaObject);
},
};
const refParserOptions = {
resolve: {
foo: yourSchemaResolver,
},
};
```
--------------------------------
### Define UI Schema for Control
Source: https://jsonforms.io/docs/tutorial/custom-renderers
UI schema configuration targeting the rating property scope.
```json
{
"type": "Control",
"scope": "#/properties/rating"
}
```
--------------------------------
### Implement Default Middleware Behavior
Source: https://jsonforms.io/docs/middleware
A middleware implementation that delegates all actions to the default reducer without modification.
```typescript
const middleware = (
state: JsonFormsCore,
action: CoreActions,
defaultReducer: (state: JsonFormsCore, action: CoreActions) => JsonFormsCore
) => {
return defaultReducer(state, action);
};
```
--------------------------------
### Empty Data Object
Source: https://jsonforms.io/docs
Represents the initial state of the form data.
```json
{}
```
--------------------------------
### Configure radio buttons in UI schema
Source: https://jsonforms.io/docs/multiple-choice
Set the format option to radio in the UI schema to display enum or oneOf options as radio buttons.
```json
{
type: "Control",
scope: "#/properties/radioGroup",
options: {
format: "radio"
}
}
```
```json
{
"type": "object",
"properties": {
"radioGroup": {
"type": "string",
"enum": [
"foo",
"bar",
"foobar"
]
}
}
}
```
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/radioGroup",
"options": {
"format": "radio"
}
}
]
}
```
```json
{}
```
--------------------------------
### Importing Unwrapped Material Controls
Source: https://jsonforms.io/docs/tutorial/custom-renderers
Access the unwrapped version of Material UI controls to gain access to detailed props.
```typescript
import { Unwrapped } from '@jsonforms/material-renderers';
const { MaterialBooleanControl } = Unwrapped;
```
--------------------------------
### Registering a UI Schema
Source: https://jsonforms.io/docs/deprecated/available-actions
Registers a custom UI schema using a tester function to determine applicability based on the schema path.
```typescript
import { Actions, NOT_APPLICABLE } from '@jsonforms/core';
store.dispatch(
Actions.registerUISchema(
(jsonSchema, schemaPath) => {
return schemaPath === '#/properties/firstarray' ? 2 : NOT_APPLICABLE;
},
{
type: 'VerticalLayout',
elements: [
{
type: 'Control',
scope: '#/properties/firstName',
},
{
type: 'Control',
scope: '#/properties/lastName',
},
],
}
)
);
```
--------------------------------
### Define Schema-based Time Picker
Source: https://jsonforms.io/docs/date-time-picker
Configures a time picker by setting the format property to time within the JSON Schema.
```json
{
"properties": {
"time": {
"type": "string",
"format": "time",
"description": "schema-based time picker"
}
}
}
```
```json
{
"type": "Control",
"scope": "#/properties/time"
}
```
```json
{
"time": "13:37:00"
}
```
--------------------------------
### Pass configuration to JsonForms
Source: https://jsonforms.io/docs/deprecated/ref-resolving-legacy
Provide the custom AJV instance and refParserOptions to the JsonForms component props.
```jsx
```
--------------------------------
### Configure array element labels
Source: https://jsonforms.io/docs/uischema/controls
Set a specific property to serve as the label for array items using elementLabelProp.
```json
options: {
elementLabelProp: "propertyName"
}
```
```json
{
"properties": {
"comments": {
"type": "array",
"title": "Comments",
"items": {
"type": "object",
"properties": {
"message": {
"type": "string"
},
"name": {
"type": "string"
}
}
}
}
}
}
```
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/comments",
"options": {
"elementLabelProp": "name",
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/message"
},
{
"type": "Control",
"scope": "#/properties/name"
}
]
}
}
}
]
}
```
```json
{
"comments": [
{
"name": "John Doe",
"message": "This is an example message"
},
{
"name": "Max Mustermann",
"message": "Another message"
}
]
}
```
--------------------------------
### Implement Country Renderer
Source: https://jsonforms.io/docs/tutorial/dynamic-enum
Full implementation of a custom renderer that fetches API data and resets dependent fields upon selection change.
```typescript
import { Unwrapped, WithOptionLabel } from '@jsonforms/material-renderers';
const { MaterialEnumControl } = Unwrapped;
type JsonSchemaWithDependenciesAndEndpoint = JsonSchema & {
'x-dependent': string[];
'x-endpoint': string;
};
const CountryControl = (
props: ControlProps & WithOptionLabel & TranslateProps
) => {
const { handleChange } = props;
const [options, setOptions] = useState([]);
const api = React.useContext(APIContext);
const schema = props.schema as JsonSchemaDependenciesAndEndpoint;
const endpoint = schema['x-endpoint'];
const dependent: string[] = schema['x-dependents'] ? schema['x-dependents'] : [];
useEffect(() => {
api.get(endpoint).then((result) => {
setOptions(result);
});
}, []);
if (options.length === 0) {
return ;
}
return (
{
handleChange(path, value);
dependent.forEach((path) => {
handleChange(path, undefined);
});
}}
options={options.map((option) => {
return { label: option, value: option };
})}
/>
);
};
export default withJsonFormsControlProps(
withTranslateProps(React.memo(CountryControl)),
false
);
```
--------------------------------
### Define a Renderer Tester
Source: https://jsonforms.io/docs/tutorial/custom-renderers
Creates a predicate function that assigns a priority rank to the renderer based on the UI schema scope.
```javascript
import { rankWith, scopeEndsWith } from '@jsonforms/core';
export default rankWith(
3, //increase rank as needed
scopeEndsWith('rating')
);
```
--------------------------------
### Schema-Based Date Picker
Source: https://jsonforms.io/docs/date-time-picker
Renders a date picker by setting the format to 'date' directly within the JSON Schema.
```json
{
"properties": {
"date": {
"type": "string",
"format": "date",
"description": "schema-based date picker"
}
}
}
```
```json
{
"type": "Control",
"scope": "#/properties/date"
}
```
```json
{
"date": "2026-08-06"
}
```
--------------------------------
### Define a Group Layout
Source: https://jsonforms.io/docs/uischema/layouts
Similar to VerticalLayout but requires a label property to describe the grouped elements.
```json
{
"type": "Group",
"label": "My Group",
"elements": [
{
"type": "Control",
"label": "Name",
"scope": "#/properties/name"
},
{
"type": "Control",
"label": "Birth Date",
"scope": "#/properties/birthDate"
}
]
}
```
--------------------------------
### Implementing the Custom Control
Source: https://jsonforms.io/docs/tutorial/custom-renderers
Define the functional component using ControlProps and inject custom logic based on schema attributes.
```typescript
import { ControlProps } from '@jsonforms/core';
export const checkBoxWithPriceControl = (props: ControlProps) => {
const schema = props.schema as JsonSchemaWithPrice;
const label = `${props.label} (${schema.price})`;
return (
{schema.price > 50 && (
Shipping is free!
)}
);
};
```
--------------------------------
### Configure radio group format
Source: https://jsonforms.io/docs/uischema/controls
Display enum values as a radio group using the format option.
```json
options: {
format: 'radio'
}
```
```json
{
"type": "object",
"properties": {
"exampleRadioEnum": {
"type": "string",
"enum": [
"One",
"Two",
"Three"
]
}
}
}
```
```json
{
"type": "Control",
"scope": "#/properties/exampleRadioEnum",
"options": {
"format": "radio"
}
}
```
```json
{}
```
--------------------------------
### registerUISchema(tester, uischema)
Source: https://jsonforms.io/docs/deprecated/available-actions
Registers a UI schema for specific use cases, such as rendering nested arrays.
```APIDOC
## registerUISchema(tester: UISchemaTester, uischema: UISchemaElement)
### Description
Registers a UI schema that can be retrieved later, useful for customizing layouts for elements like arrays.
### Parameters
- **tester** (UISchemaTester) - The tester to match the UI schema.
- **uischema** (UISchemaElement) - The UI schema to register.
```
--------------------------------
### Configure readonly state
Source: https://jsonforms.io/docs/uischema/controls
Disable a control or layout by setting the readonly option to true.
```json
options: {
readonly: true
}
```
--------------------------------
### update(path, updater)
Source: https://jsonforms.io/docs/deprecated/available-actions
Updates the data substate within the store using a dot-separated path and an updater function.
```APIDOC
## update(path: string, updater: (existingData: any) => any)
### Description
Updates the data substate within the store. It uses a dot-separated path to locate the data and an updater function to calculate the new value.
### Parameters
- **path** (string) - Dot-separated path to the data.
- **updater** (function) - Function that receives existing data and returns the updated value.
```
--------------------------------
### Implement controlled JSON Forms with middleware
Source: https://jsonforms.io/docs/middleware
Uses middleware to intercept INIT and UPDATE_DATA actions, preventing internal state updates while triggering external validation and data synchronization.
```javascript
import { INIT, UPDATE_DATA } from '@jsonforms/core';
export const ControlledStyle = () => {
const [errors, setErrors] = useState([]);
const [data, setData] = useState({ activity: 'Snowboarding' });
const validateActivity = useCallback((data) => {
switch (data.activity) {
case 'Snowboarding':
setErrors([
{
instancePath: '/activity',
message: 'No Snow',
schemaPath: '#/properties/activity',
},
]);
break;
case 'Soccer':
setErrors([
{
instancePath: '/activity',
message: 'Too Cold',
schemaPath: '#/properties/activity',
},
]);
break;
default:
setErrors([]);
}
}, []);
const middleware = useCallback(
(state, action, defaultReducer) => {
const newState = defaultReducer(state, action);
switch (action.type) {
case INIT:
case UPDATE_DATA: {
setData(newState.data);
validateActivity(newState.data);
return state;
}
default:
return newState;
}
},[]
);
return (
);
};
```
--------------------------------
### Create a custom tester for Group elements
Source: https://jsonforms.io/docs/tutorial/custom-layouts
Defines a tester that assigns a rank of 1000 to UI schema elements of type 'Group'.
```javascript
import { rankWith, uiTypeIs } from '@jsonforms/core';
export const myGroupTester = rankWith(1000, uiTypeIs('Group'));
```
--------------------------------
### Configure readonly option
Source: https://jsonforms.io/docs/uischema/controls
Option configuration to set a control or layout to read-only mode.
```javascript
options: {
readonly: true
}
```
--------------------------------
### Define a VerticalLayout
Source: https://jsonforms.io/docs/uischema/layouts
Arranges contained elements in a vertical stack.
```json
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"label": "Name",
"scope": "#/properties/name"
},
{
"type": "Control",
"label": "Birth Date",
"scope": "#/properties/birthDate"
}
]
}
```
--------------------------------
### Date Time Picker Schema Configuration
Source: https://jsonforms.io/docs/date-time-picker
Defines the JSON schema property for the date-time picker control.
```json
{
"properties": {
"datetime": {
"type": "string",
"description": "uischema-based datetime picker"
}
}
}
```
--------------------------------
### Define JSON Schema with API Metadata
Source: https://jsonforms.io/docs/tutorial/dynamic-enum
Define the schema structure including custom properties like x-url and x-endpoint to manage dynamic dependencies.
```json
{
"x-url": "www.api.com",
"type": "object",
"properties": {
"country": {
"type": "string",
"x-endpoint": "countries",
"x-dependent": [
"region",
"city"
]
},
"region": {
"type": "string",
"x-endpoint": "regions",
"x-dependent": [
"city"
]
},
"city": {
"type": "string"
}
}
}
```
```json
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/country"
},
{
"type": "Control",
"scope": "#/properties/region"
},
{
"type": "Control",
"scope": "#/properties/city"
}
]
}
```
```json
{}
```
```json
{
"type": "object",
"x-url": "www.api.com",
"properties": {
"country": {
"type": "string",
"x-endpoint": "countries",
"x-dependents": ["region", "city"]
},
"region": {
"type": "string",
"x-endpoint": "regions",
"x-dependents": ["city"]
},
"city": {
"type": "string"
}
}
}
```
--------------------------------
### Access API URL from Schema
Source: https://jsonforms.io/docs/tutorial/dynamic-enum
Retrieve the API base URL directly from the schema object.
```javascript
const url = schema['x-url'];
```
--------------------------------
### Customize Control Label
Source: https://jsonforms.io/docs/uischema/controls
Set a custom string value for the label property within the UI schema control definition.
```json
{
"type": "Control",
"scope": "#/properties/name",
"label": "First name"
}
```