JSON Forms

https://jsonforms.io/docs
Admin
JSON Forms is a declarative framework for efficiently building form-based web UIs by utilizing the...
Tokens:27,725
Snippets:307
Trust Score:9.1
Update:2 months ago
Show doc for...
Tokens:
Raw
### 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 = () => {
  

  ...
  

  <JsonForms/>
  
}
```

```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<ErrorObject[]>([]);  

    

  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 (  

        <div>  

            <JsonForms  

                schema={schema}  

                uischema={uischema}  

                data={formData}  

                renderers={materialRenderers}  

                cells={materialCells}  

                additionalErrors={additionalErrors}  

            />  

            <Button onClick={addAdditionalError} >  

                Add Additional Error  

            </Button>  

        </div>  

    );  

};  
```

--------------------------------

### 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
<Provider store={store}>  

  <JsonFormsReduxContext>  

    <JsonFormsDispatch />  

  </JsonFormsReduxContext>  

</Provider>
```

--------------------------------

### 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 (  

    <Grid container>  

      <Grid item xs={12}>  

        <MaterialBooleanControl {...props} label={label} />  

      </Grid>  

      {schema.price > 50 && (  

        <Grid item xs={12}>  

          <Typography>Shipping is free!</Typography>  

        </Grid>  

      )}  

    </Grid>  

  );  

};  

  

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 (  

    <div>  

      <JsonForms  

        schema={schema}  

        uischema={uischema}  

        data={data}  

        renderers={materialRenderers}  

        cells={materialCells}  

        onChange={({ data, _errors }) => setData(data)}  

      />  

      <Button onClick={() => setData({})} color='primary'>  

        Clear form data  

      </Button>  

    </div>  

  );  

};  
```

--------------------------------

### 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 <div> Loading... </div>  

  }  

  

  return (  

    <JsonForms  

      schema={resolvedSchema}  

      uischema={uischema}  

      data={data}  

      renderers={materialRenderers}  

      cells={materialCells}  

      onChange={({ data, _errors }) => 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
<JsonForms  

  schema={schema}  

  uischema={uischema}  

  data={data}  

  renderers={renderers}  

  cells={cells}  

  ajv={ajv}  

  refParserOptions={refParserOptions}  

/>  
```

--------------------------------

### 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<string[]>([]);  

  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 <CircularProgress />;  

  }  

  

  return (  

    <MaterialEnumControl  

      {...props}  

      handleChange={(path: string, value: any) => {  

        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 (  

    <Grid container>  

      <Grid item xs={12}>  

        <MaterialBooleanControl {...props} label={label} />  

      </Grid>  

      {schema.price > 50 && (  

        <Grid item xs={12}>  

          <Typography>Shipping is free!</Typography>  

        </Grid>  

      )}  

    </Grid>  

  );  

};  



```

--------------------------------

### 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 (  

    <JsonForms  

      data={data}  

      schema={schema}  

      renderers={materialRenderers}  

      middleware={middleware}  

      additionalErrors={errors}  

      validationMode='NoValidation'  

    />  

  );  

};  

  

<ControlledStyle />
```

--------------------------------

### 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"

}
```
Tokens:
Raw