Skip to main content

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

  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:

  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.