JSONForms
More forms. Less code.
Complex forms in the blink of an eye
Version: v3.2.1
@next: 3.3.0-alpha.0
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
{"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"}}}}}
{"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.2.0 🎉. Besides various fixes and improved developer tooling, this release adds middleware support to all bindings. This makes it a breeze to hook into data updates!
With this release, the Angular bindings and Angular Material renderer set now support Angular 16 and 17. Special thanks to JBBianchi for contributing this massive upgrade.
You can find the full changelog in the Github release.
We welcome any feedback of curious users. Any questions? Check out our community forum.
January 24, 2024