This seed demonstrates how to use JSON Forms with React in order to render a simple form for displaying a task entity.

• Clone the repo
• Execute npm install to install the prerequisites.
• Execute npm run build to build the application.
• Execute npm start to start the application.

Browse to localhost to see the application in action.

Let's briefly have a look at the most important files:

• src/schema.json contains the JSON schema (also referred to as 'data schema')
• src/uischema.json contains the UI schema

examples

• src/main.tsx is the entry point of the application. We also customize the Material UI theme to give each control more space.
• src/components/App.tsxis the main app
• src/components/MyCato.tsx makes use of the JsonForms component in order to render a form.

The data schema defines the structure of a Task: it contains attributes such as title, description, due date and so on.

The corresponding UI schema specifies controls for each property and puts them into a vertical layout that in turn contains two horizontal layouts.

JSON Forms is rendered by importing and using the JsonForms component and directly handing over the schema, uischema, data, renderer and cell props. We listen to changes in the form via the onChange callback.

Please see our corresponding tutorial on how to add custom renderers.