JSON Forms is a JSON Schema based approach for creating forms. It comes with off the shelf support for React, Angular and Vue.

JSON Forms is a declarative framework for efficiently building form-based web UIs. These UIs are targeted at entering, modifying and viewing data and are usually embedded within an application. Why do we need such a framework?

For a more detailed guide about the usage of JSON Forms, please see our tutorial. Other starters We also maintain an Angular seed and a Vue seed.

JSON Forms provides a basic example for creating forms using JSON Schema, with features like data-binding and input validation.

Create a JSON Forms App. This section describes how you can integrate JSON Forms into a React app from scratch. Alternatively you can also clone the seed app. We'll use create-react-app to scaffold a basic React application which we'll use as a starting point. If you didn't install create-react-app yet, please do so now before continuing.

It uses JSON Forms Core. You can combine the Angular package with any Angular-based renderer set you want, for example the Material Renderers. See the official documentation and the JSON Forms Angular seed repository for examples on how to integrate JSON Forms with your application.

If you provide no UI schema to JSON Forms it'll generate one. The generated layout will be a VerticalLayout containing controls for the provided JSON schema. Demo

JSON Forms ships with a default renderer set which consists of renderers for all primitive types as well as for arrays. Furthermore JSON Forms allows controls to be replaced or new controls to be added for newly invented UI Schema Elements.

The UI schema, which is passed to JSON Forms, describes the general layout of a form and is just a regular JSON object. It describes the form by means of different UI schema elements, which can often be categorized into either Controls or Layouts.

The @jsonforms/vue package offers JSON Forms Core bindings based on the composition API. These bindings handle the props given to the dispatch-renderer and use the JSON Forms Core to determine specialized inputs for many use cases like validation and rule-based visibility.