Create a JSON Forms App

This section describes how you can integrate JSON Forms into a React app from scratch. Alternatively you can also clone the seed app.

1. We'll use create-react-app to scaffold a basic React application which we'll use as a starting point. If you didn't install create-react-app yet, please do so now before continuing.

Let's now create a basic application with:

npx create-react-app my-jsonforms-app

If you want to use typescript within your project, use the following command instead:

npx create-react-app my-jsonforms-app --template typescript

Scaffolding may take a couple of moments. Once it's finished, switch to your newly created app.

cd my-jsonforms-app

2. Install JSON Forms and the material renderer set. We'll use an example from JSON Forms in order to obtain a JSON schema, a corresponding UI schema and a data instance to be rendered. You don't need to install the @jsonforms/examples package if you plan to supply your own schema in the following:

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 

3. Switch to the src directory and open App.js (App.tsx when using typescript) with an editor of your choice. Let's add a couple of imports first:

import { person } from '@jsonforms/examples';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';

The person import is necessary for importing the person example while @jsonforms/material-renderers imports the Material UI based renderer set and respective cells.

Now let's define the variables that are crucial for JSON Forms to work, that is, data, schema and uischema. As previously mentioned, we are using the person example from JSON Forms here:

const schema = person.schema;
const uischema = person.uischema;
const initialData = person.data;

These variables are defined as follows:

Demo

Name

Age *

Birth Date

Additional Information

Height *

is a required property

Nationality *

is a required property

Occupation *

is a required property

Schema

schema.json

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 3,
      "description": "Please enter your name"
    },
    "vegetarian": {
      "type": "boolean"
    },
    "birthDate": {
      "type": "string",
      "format": "date"
    },
    "nationality": {
      "type": "string",
      "enum": [
        "DE",
        "IT",
        "JP",
        "US",
        "RU",
        "Other"
      ]
    },
    "personalData": {
      "type": "object",
      "properties": {
        "age": {
          "type": "integer",
          "description": "Please enter your age."
        },
        "height": {
          "type": "number"
        },
        "drivingSkill": {
          "type": "number",
          "maximum": 10,
          "minimum": 1,
          "default": 7
        }
      },
      "required": [
        "age",
        "height"
      ]
    },
    "occupation": {
      "type": "string"
    },
    "postalCode": {
      "type": "string",
      "maxLength": 5
    }
  },
  "required": [
    "occupation",
    "nationality"
  ]
}

UI Schema

uischema.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"
            ]
          }
        }
      ]
    }
  ]
}

Data

{
  "name": "John Doe",
  "vegetarian": false,
  "birthDate": "1985-06-02",
  "personalData": {
    "age": 34
  },
  "postalCode": "12345"
}

4. Now import the JsonForms component from @jsonforms/react. Delete the header element and replace it with the JsonForms element to get a form rendered:

import React, { useState } from 'react';
import { JsonForms } from '@jsonforms/react';

function App() {
  const [data, setData] = useState(initialData);
  return (
    <div className='App'>
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={data}
        renderers={materialRenderers}
        cells={materialCells}
        onChange={({ data, errors }) => setData(data)}
      />
    </div>
  );
}

The optional onChange handler demonstrates how you can listen to data and validation changes in JSON Forms.

5. Now you have a basic form up and running! Take a look at our seed app for more examples.