Skip Main Navigation
Ben IlegboduBen Ilegbodu

Check out react-jsonschema-form

How to use react-jsonschema-form to automatically render a form based on JSON schema

Thursday, April 23, 2020 ยท 1 min read

Lately, I've been spending a lot of time figuring out how to validate a UI with an API, specifically that the format of the request/response that the UI expects matches that of the API. GraphQL naturally solves this problems (and many other problems as well), but not everyone can immediately switch from REST to GraphQL.

Enter JSON Schema. It is a "vocabulary that allows you to annotate and validate JSON documents." When used with a JSON-based HTTP API, it allows for client and server to validate the request/response agreement.

But I'm actually not here to talk about that aspect of JSON Schema. I wanted to share about a UI library based on JSON schema called react-jsconschema-form. It is a "simple React component capable of building HTML forms out of a JSON schema." It allows you to generate a form for any data, "sight unseen," simply given a JSON schema. It even validates that the submitted data conforms to the given schema, although it won't prevent the user from typing in bad data.

Try out the live playground!

An animated screenshot of a form

It uses Bootstrap by default for the form elements. So if all you need is a nice looking form, what comes out of the box is great. However, if you have your own component library, it is possible to use custom field components to use your own input fields. There's even react-jsonschema-form-material-ui that uses the awesome Material UI component library! The name is a mouthful though.

I'm sure there are lots of other great features I don't yet know about it. But I do know that building and validating forms is always both tricky and annoying. So having something like react-jsconschema-form to offload the work is great.

But if you are interested in React form libraries that let you build things from scratch, check out React Final Form or Formik.

Keep learning my friends. ๐Ÿค“

Subscribe to the Newsletter

Get notified about new blog posts, minishops & other goodies


Hi, I'm Ben Ilegbodu. ๐Ÿ‘‹๐Ÿพ

I'm a Christian, husband, and father of 3, with 15+ years of professional experience developing user interfaces for the Web. I'm a Google Developer Expert Frontend Architect at Stitch Fix, and frontend development teacher. I love helping developers level up their frontend skills.

Discuss on Twitter // Edit on GitHub