JSON Forms React seed App
This seed demonstrates how to use JSON Forms with React in order to render a simple form for displaying a task entity.
It is based on
create-react-app and only contains minor modifications.
npm cito install the prerequisites. If you want to have the latest released versions use
npm startto start the application.
Browse to http://localhost:3000 to see the application in action.
Let's briefly have a look at the most important files:
src/schema.jsoncontains the JSON schema (also referred to as 'data schema')
src/uischema.jsoncontains the UI schema
src/index.tsxis the entry point of the application. We also customize the Material UI theme to give each control more space.
src/App.tsxis the main app component and makes use of the
JsonFormscomponent 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.
Rendering JSON Forms
JSON Forms is rendered by importing and using the
JsonForms component and directly handing over the
cell props. We listen to changes in the form via the
Please see our corresponding tutorial on how to add custom renderers.