Auto generate ReactJS Forms from json schema
If your application involves lot of forms and data collection flows, then writing forms in JSX (react) is very repetitive. Though we might try to extract the common components out, the core problem is that we know exactly what data we want to collect but from thought to code time is too high.
Recently I was working on a project which demanded lot of data to be collected from users. Too many html forms are involved throughout the application.
We started with constructing the html forms with react-bootstrap. As the forms grew in number and length, started moving out parts of it and started reusing them. Validation rules started to grow. Post validation, the data should be send to the server as JSON object. As the needs started growing, it became little not so manageable. Code flow was also getting more convoluted for simple needs.
react-jsonschema-form library
From mozilla-services, found this open source library — react-jsonschema-form which does exactly what we were looking for.
Live playground
check out: They provide a live playground to test drive the schema driven Form generation.
Key features
- Data schema and UI schema is maintained as two separate json object. This provides lot of flexibility
- Validation rules based on data type(string, number), data format (eg: email), minimum length, maximum length etc comes very handy
- Form Template (how the form structure looks) can be customized
- Errors can be customized
- New UI widgets can be added
- Pure ReactJS based.
Other options for generating html forms
- jsonforms.io — Customizable JSON Schema-based forms with React, Angular and Vue support out of the box
- react-json-editor — is a very similar project aiming to achieve reactJs form generation from json. Cons — UI is not that great and feature set is much lesser than react-jsonschema-form
- XForms — this is a classic standard for declaring the form definition and genrating forms. I haven’t seen a ReactJS library that implements this well.
- http://winterfell.andrewhathaway.net — Generate complex, validated and extendable JSON-based forms in React. I haven’t tried this.
- react-schema-form — A React component for building Web forms from JSON Schema
Further reading
Recommended books
- Learning React: Functional Web Development with React and Redux
- React.js Book: Learning React JavaScript Library From Scratch
Conclusion
Though react-jsonschema-form is implemented well, it may not solve all our needs. The goal is very simple. Instead of coding html forms directly, generate them from a well defined JSON schema. If this library doesn’t solve our needs, we could implement a custom layer which could transform JSON schema to HTML form. But going the JSON schema route to generate forms looks very promising.
