[Juhana Jauhiainen]

Generating forms from JSON schema in React applications

Automatically generating UI from a schema document can be a powerful prototyping tool or can even be used to build simple apps if the requirements aren't too complex.

One awesome library for generating UIs from json-schemas is react-jsonschema-form. react-jsonschema-from can be used to automatically generate forms in a React application from a JSON schema document.

I found the library easy to use and it was perfect for my use case of a form input app which could later be expanded with additional forms with minimal coding.

For example a simple JSON schema with firstname and lastname properties can be used to generate a full form with title, description, input fields and a submit button.

{
"title": "A registration form",
"description": "A simple form example.",
"type": "object",
"required": ["firstName", "lastName"],
"properties": {
"firstName": {
"type": "string",
"title": "First name",
"default": "Chuck"
},
"lastName": {
"type": "string",
"title": "Last name"
}
}
}

By default the form is styled using Bootstrap but the inputs can be styled as by using a special UI schema. You can even use a UI schema to define the widgets for the inputs and also define some additional css classes which will be added to the input elements.

{
"firstName": {
"classNames": "additional-css-class"
}
}

Customization can be taken even further by creating custom React components for fields. There is also a Material UI port of the library called react-jsonschema-form-material-ui