https://github.com/eclipsesource/jsonforms-react-seed
React-based JSON Forms Seed App
https://github.com/eclipsesource/jsonforms-react-seed
Last synced: about 1 year ago
JSON representation
React-based JSON Forms Seed App
- Host: GitHub
- URL: https://github.com/eclipsesource/jsonforms-react-seed
- Owner: eclipsesource
- License: mit
- Created: 2018-01-15T12:57:14.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-03T14:46:19.000Z (over 1 year ago)
- Last Synced: 2025-04-12T14:17:21.749Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://jsonforms-react-seed.netlify.app
- Size: 1.08 MB
- Stars: 141
- Watchers: 9
- Forks: 150
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JSON Forms React seed App
This seed demonstrates how to use [JSON Forms](https://jsonforms.io) 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.
- Execute `npm ci` to install the prerequisites. If you want to have the latest released versions use `npm install`.
- Execute `npm run build` to build the application.
- Execute `npm start` to start the application.
Browse to http://localhost:3000 to see the application in action.
## File Structure
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
- `src/main.tsx` is the entry point of the application. We also customize the Material UI theme to give each control more space.
- `src/App.tsx` is the main app component and makes use of the `JsonForms` component in order to render a form.
The [data schema](src/schema.json) defines the structure of a Task: it contains attributes such as title, description, due date and so on.
The [corresponding UI schema](src/uischema.json) 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 `schema`, `uischema`, `data`, `renderer` and `cell` props. We listen to changes in the form via the `onChange` callback.
## Custom renderers
Please see [our corresponding tutorial](https://jsonforms.io/docs/tutorial) on how to add custom renderers.