JSONForms
More forms. Less code.
Complex forms in the blink of an eye
Version: v3.4.1
@next: 3.5.0-beta.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
is a required property
Address for Shipping T-Shirt
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.4.1 🎉.
The release contains fixes for the angular bindings and the vue-vuetify renderer set.
You can find the full changelog in the Github release.
We welcome any feedback of curious users. Any questions? Check out our community forum.
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.