UI Schema
Use JSON-Schema with React, generate Forms + UIs with any design system, easy creation of complex custom widgets.
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
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Material UI
material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
