JSONForms
More forms. Less code.
Complex forms in the blink of an eye
Version: 2.5.0
@next: 2.5.1-alpha.1
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
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"}
Today we released JSON Forms v2.5 🎉 This release marks the final step in our quest to remove Redux as a hard dependency of JSON Forms. Check our updated migration guide if you'd like to migrate to the Redux-less variants. We also like to announce the new JSON Forms Vue 2 & Vue 3 support. Many thanks to headwire.com whose sponsoring made the JSON Forms Vue bindings possible. Among others they plan to power peregrine-cms.com with JSON Forms Vue and decided to contribute back ❤️. We now also work on a basic JSON Forms Vue renderer set which we plan to release with one of the next versions of JSON Forms! See you soon!
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.