UI Schema

Overview

The JSON Schema form + UI generator is a tool that allows developers to easily create user interfaces and forms based on JSON Schema structures. It provides first-class support for Material UI React and can be used with any design system. The tool aims to help developers develop React apps faster and with less code duplication, while also providing easy implementation of data validations.

Features

• Add any design system or custom widget
• Easily create isolated and atomic widgets with autowired data and validations
• Customize design system behavior with widget composition
• Easily bind own design systems and custom widgets
• Easily add advanced features like read-or-write mode
• Auto-render forms based on data & schema or create fully-customized forms with autowired widgets
• Flexible translation of widgets with any library (t prop (Translator), Trans component)
• In-schema translations (t keyword)
• Label text transforms (tt/ttEnum keyword)
• Support for single or multi-language labels, titles, errors, icons
• Integrated translation library (optional)
• Translation dictionaries (optional)
• Modular, extensible, and slim core
• Ability to add own plugins, validators, base renderers, widget matchers, and render strategies
• Performance optimized with targeted HTML updates for efficient rendering
• Code splitting with custom widget mappings and lazy-loading widgets
• Includes helper functions for store and immutable handling
• Easy nesting for custom object/array widgets with PluginStack
• Validate hidden/auto-generated values and virtualize schema levels with the hidden keyword
• Handle store updates from anywhere and in any way required

Installation

To install the JSON Schema form + UI generator, you can use the following npm packages:

npm install @ui-schema/ui-schema

npm install @ui-schema/ds-material

npm install @ui-schema/ds-bootstrap

npm install @ui-schema/pro

npm install @ui-schema/dictionary

Additional Material-UI widgets can be installed using the following commands:

npm install @ui-schema/material-pickers

npm install @ui-schema/material-code

npm install @ui-schema/material-color

npm install @ui-schema/material-colorful

npm install @ui-schema/material-dnd

npm install @ui-schema/material-editorjs

npm install @ui-schema/material-slate

Additional packages for UI Schema include:

npm install @ui-schema/kit-codemirror

npm install @ui-schema/kit-dnd

For more detailed documentation and examples, refer to the provided links.

Summary

The JSON Schema form + UI generator is a powerful tool that allows developers to easily create user interfaces and forms based on JSON Schema structures. It provides support for various design systems and custom widgets, with the ability to customize behavior and add advanced features. The tool is modular, extensible, and performance optimized, making it ideal for developing React apps efficiently. With the added support for translations, nested widgets, and store handling, it offers a comprehensive solution for developers looking to streamline their development process.