More forms. Less code.

Declare your forms as JSON based on a JSON Schema

Fully-featured forms including data-binding, input validation, and rule-based visibility out-of-the-box

Designed for customizability - from custom styling to custom widgets

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

Demo
Schema
UI Schema
Data

First Name

Last Name

Age

is a required property

Date Of Birth

Height

Gender

Committer

Address for Shipping T-Shirt

Street

Streetnumber

Postal Code

City

schema.json

{
  "type": "object",
  "required": [
    "age"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "minLength": 2,
      "maxLength": 20
    },
    "lastName": {
      "type": "string",
      "minLength": 5,
      "maxLength": 15
    },
    "age": {
      "type": "integer",
      "minimum": 18,
      "maximum": 100
    },
    "gender": {
      "type": "string",
      "enum": [
        "Male",
        "Female",
        "Undisclosed"
      ]
    },
    "height": {
      "type": "number"
    },
    "dateOfBirth": {
      "type": "string",
      "format": "date"
    },
    "rating": {
      "type": "integer"
    },
    "committer": {
      "type": "boolean"
    },
    "address": {
      "type": "object",
      "properties": {
        "street": {
          "type": "string"
        },
        "streetnumber": {
          "type": "string"
        },
        "postalCode": {
          "type": "string"
        },
        "city": {
          "type": "string"
        }
      }
    }
  }
}

uischema.json

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/firstName"
        },
        {
          "type": "Control",
          "scope": "#/properties/lastName"
        }
      ]
    },
    {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/age"
        },
        {
          "type": "Control",
          "scope": "#/properties/dateOfBirth"
        }
      ]
    },
    {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/height"
        },
        {
          "type": "Control",
          "scope": "#/properties/gender"
        },
        {
          "type": "Control",
          "scope": "#/properties/committer"
        }
      ]
    },
    {
      "type": "Group",
      "label": "Address for Shipping T-Shirt",
      "elements": [
        {
          "type": "HorizontalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/address/properties/street"
            },
            {
              "type": "Control",
              "scope": "#/properties/address/properties/streetnumber"
            }
          ]
        },
        {
          "type": "HorizontalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/address/properties/postalCode"
            },
            {
              "type": "Control",
              "scope": "#/properties/address/properties/city"
            }
          ]
        }
      ],
      "rule": {
        "effect": "ENABLE",
        "condition": {
          "scope": "#/properties/committer",
          "schema": {
            "const": true
          }
        }
      }
    }
  ]
}

{
  "firstName": "Max",
  "lastName": "Power"
}

We released v3.3.0 🎉.

The release contains various fixes and enhancements across all renderer sets. Furthermore, the Angular bindings and Angular Material renderer set now support Angular 17 and 18. Support for Angular 16 was dropped.

You can find the full changelog in the Github release.

We welcome any feedback of curious users. Any questions? Check out our community forum.

May 29, 2024

JSON Forms Architecture

JSON Forms has a modular architecture and can be customized on every level. The core functionality is pure Javascript and therefore independent from any UI framework. We offer bindings for React, Angular and Vue. For more information see here.

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 Architecture

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