https://github.com/ui-schema/ui-schema
Use JSON-Schema with React, generate Forms + UIs with any design system, easy creation of complex custom widgets.
https://github.com/ui-schema/ui-schema
form-builder form-generator json-schema material material-ui mui react ui-generator ui-schema widget
Last synced: about 12 hours ago
JSON representation
Use JSON-Schema with React, generate Forms + UIs with any design system, easy creation of complex custom widgets.
- Host: GitHub
- URL: https://github.com/ui-schema/ui-schema
- Owner: ui-schema
- License: mit
- Created: 2020-01-18T20:25:20.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-10T22:33:33.000Z (about 1 month ago)
- Last Synced: 2025-04-07T01:05:51.217Z (8 days ago)
- Topics: form-builder, form-generator, json-schema, material, material-ui, mui, react, ui-generator, ui-schema, widget
- Language: TypeScript
- Homepage: https://ui-schema.bemit.codes
- Size: 20.3 MB
- Stars: 325
- Watchers: 3
- Forks: 30
- Open Issues: 59
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- jimsghstars - ui-schema/ui-schema - Use JSON-Schema with React, generate Forms + UIs with any design system, easy creation of complex custom widgets. (TypeScript)
README
UI Schema for React
JSON Schema form + UI generator for any design system, first-class support for [Material UI React](https://material-ui.com), easily create own widgets and plugins.
Develop your next React app faster, with less code duplications - and without wasting time to implement validations.
[](https://github.com/ui-schema/ui-schema/actions)
[](https://reactjs.org/)
[](https://github.com/ui-schema/ui-schema/blob/master/LICENSE)
[](http://makeapullrequest.com)
[](https://codecov.io/gh/ui-schema/ui-schema/branch/master)
- @ui-schema/ui-schema [](https://www.npmjs.com/package/@ui-schema/ui-schema)
- @ui-schema/ds-material [](https://www.npmjs.com/package/@ui-schema/ds-material)
- @ui-schema/ds-bootstrap [](https://www.npmjs.com/package/@ui-schema/ds-bootstrap)
- @ui-schema/pro [](https://www.npmjs.com/package/@ui-schema/pro)
- @ui-schema/dictionary [](https://www.npmjs.com/package/@ui-schema/dictionary)
- Additional Material-UI Widgets:
- Date-Time Picker: `@ui-schema/material-pickers` [](https://www.npmjs.com/package/@ui-schema/material-pickers) [](https://ui-schema.bemit.codes/docs/material-pickers/Overview)
- Codemirror as Material Input: `@ui-schema/material-code` [](https://www.npmjs.com/package/@ui-schema/material-code) [](https://ui-schema.bemit.codes/docs/material-code/material-code) [](https://github.com/ui-schema/react-codemirror/tree/main/packages/material-code)
- `react-color` picker: `@ui-schema/material-color` [](https://www.npmjs.com/package/@ui-schema/material-color) [](https://ui-schema.bemit.codes/docs/material-color/material-color) [](https://github.com/ui-schema/react-color/tree/main/packages/material-color)
- `react-colorful` picker: `@ui-schema/material-colorful` [](https://www.npmjs.com/package/@ui-schema/material-colorful) [](https://ui-schema.bemit.codes/docs/material-colorful/material-colorful) [](https://github.com/ui-schema/react-color/tree/main/packages/material-colorful)
- 🚧 Drag 'n Drop with `react-dnd`: `@ui-schema/material-dnd` [](https://www.npmjs.com/package/@ui-schema/material-dnd) [](https://ui-schema.bemit.codes/docs/material-dnd/overview)
- 🚧 EditorJS as Material TextField: `@ui-schema/material-editorjs` [](https://www.npmjs.com/package/@ui-schema/material-editorjs) [](https://ui-schema.bemit.codes/docs/widgets/EditorJS)
- 🚧 SlateJS as Material TextField: `@ui-schema/material-slate` [](https://www.npmjs.com/package/@ui-schema/material-slate) [](https://ui-schema.bemit.codes/docs/widgets/RichText)
- Additional Packages, not only for UI Schema:
- CodeMirror v6 kit: `@ui-schema/kit-codemirror` [](https://www.npmjs.com/package/@ui-schema/kit-codemirror) [](https://ui-schema.bemit.codes/docs/kit-codemirror/kit-codemirror) [](https://github.com/ui-schema/react-codemirror/tree/main/packages/kit-codemirror)
- 🚧 Drag 'n Drop kit: `@ui-schema/kit-dnd` [](https://www.npmjs.com/package/@ui-schema/kit-dnd) [](https://ui-schema.bemit.codes/docs/kit-dnd/kit-dnd)
[](https://ui-schema.bemit.codes)
[](https://ui-schema.bemit.codes/quick-start)
[](https://ui-schema.bemit.codes/examples)
[](https://join.slack.com/t/ui-schema/shared_invite/zt-smbsybk5-dFIRLEPCJerzDwtycaA71w)
**🚀 Demo: UI Schema + Material Design + Create React App**: *[Demo Source](https://github.com/ui-schema/demo-cra)*
[](https://codesandbox.io/s/github/ui-schema/demo-cra/tree/master/?autoresize=1&fontsize=12&hidenavigation=1&module=%2Fsrc%2FSchema%2FDemoEditor.js)
[](https://stackblitz.com/github/ui-schema/demo-cra)
[](https://ui-schema-cra.netlify.app)
---
## Schema
Use JSON Schema to validate data and automatically create UIs with it - UI-Schema makes it easy to write widgets based on schema structures, use custom UI keywords to make it look great!
*[Schema Documentation](https://ui-schema.bemit.codes/docs/schema)*
## Features
- add any design-system or custom widget
- easily create isolated and atomic widgets, with autowired data and validations
- customize design system behaviour with e.g. widget compositions
- easy binding of own design systems and custom widgets
- easily add advanced features like [read-or-write mode](https://ui-schema.bemit.codes/docs/core-meta#read-context)
- [auto-rendering by data & schema](https://ui-schema.bemit.codes/quick-start) or [full-custom forms](https://ui-schema.bemit.codes/quick-start?render=custom) with autowired widgets
- flexible translation of widgets
- with any library ([`t` prop (Translator)](https://ui-schema.bemit.codes/docs/localization#translation), [`Trans` component](https://ui-schema.bemit.codes/docs/localization#trans-component))
- in-schema translations ([`t` keyword](https://ui-schema.bemit.codes/docs/localization#translation-in-schema))
- label text transforms ([`tt`/`ttEnum` keyword](https://ui-schema.bemit.codes/docs/localization#text-transform))
- single or multi-language
- for labels, titles, errors, icons...
- (optional) [tiny integrated translation library](https://ui-schema.bemit.codes/docs/localization#immutable-as-dictionary)
- (optional) [translation dictionaries](./packages/dictionary)
- modular, extensible and slim core
- add own [plugins](https://ui-schema.bemit.codes/docs/core-pluginstack)
- add own validators
- add own base renderers
- add own widget matchers & render strategies
- use what you need
- [performance optimized](https://ui-schema.bemit.codes/docs/performance), only updates HTML which must re-render, perfect for big schemas
- code-splitting, with custom widget mappings / lazy-loading widgets
- includes helper functions for store and immutable handling
- easy nesting for custom object/array widgets with [`PluginStack`](https://ui-schema.bemit.codes/docs/core-pluginstack)
- validate hidden/auto-generated values, virtualize schema levels ([`hidden` keyword](https://ui-schema.bemit.codes/docs/schema#hidden-keyword--virtualization))
- handle store update from anywhere and however you want
- extensive documentations of core, widgets
- typed components and definitions for JSON Schema and UI Schema
- complex conditionals schemas
- loading / referencing schemas by URL, connect any API or e.g. babel dynamic loading instead
- definitions and JSON-Pointer references in schemas
- JSON Schema extension: UI Schema, change design and even behaviour of widgets
- **JSON Schema versions** supported: Draft 2019-09 / Draft-08, Draft-07, Draft-06, Draft-04
> 🔥 **Professional service & support available, [reach out now](https://bemit.codes/get-quote)!**
*[Design-System and Widgets Overview](https://ui-schema.bemit.codes/docs/overview)*
## Versions
This project adheres to [semver](https://semver.org/), until `1.0.0` and beginning with `0.1.0`: all `0.x.0` releases are like MAJOR releases and all `0.0.x` like MINOR or PATCH, modules below `0.1.0` should be considered experimental.
**Get the latest version - or [help build it](CONTRIBUTING.md):**
- [latest releases](https://github.com/ui-schema/ui-schema/releases) (GitHub release notes)
- [update and migration notes](https://ui-schema.bemit.codes/updates) (docs page)
- [current roadmap](https://github.com/ui-schema/ui-schema/discussions/184) (GitHub discussion)
## Example UI Schema
First time? [Take the quick-start](https://ui-schema.bemit.codes/quick-start) or take a look into the MUI demo repos: [create-react-app & JS (simple)](https://github.com/ui-schema/demo-cra) or [create-react-app & Typescript (advanced)](https://github.com/ui-schema/demo-cra-ts).
Example setup of a renderer, followed by a [simple text widget](#example-simple-text-widget).
Instead of using `UIRootRenderer` it's also possible to use [full custom rendering](https://ui-schema.bemit.codes/quick-start?render=custom) with e.g. [ObjectGroup](https://ui-schema.bemit.codes/docs/core-renderer#objectgroup).
```js
import React from 'react';
// Import Schema UI Provider and Render engine
import {isInvalid} from '@ui-schema/ui-schema/ValidityReporter';
import {createOrderedMap} from '@ui-schema/ui-schema/Utils/createMap';
import {UIStoreProvider, createStore} from '@ui-schema/ui-schema/UIStore';
import {storeUpdater} from '@ui-schema/ui-schema/storeUpdater';
import {UIMetaProvider, useUIMeta} from '@ui-schema/ui-schema/UIMeta';
// new in `0.4.0-alpha.1`:
// import {injectPluginStack} from '@ui-schema/ui-schema/applyPluginStack';
// deprecated since `0.4.0-alpha.1`:
import {UIRootRenderer} from '@ui-schema/ui-schema/UIRootRenderer';
// basic in-schema translator / `t` keyword support
import {relTranslator} from '@ui-schema/ui-schema/Translate/relT';
// Get the widgets binding for your design-system
import {widgets} from '@ui-schema/ds-material/widgetsBinding';
// new in `0.4.0-alpha.1`:
// import {GridContainer} from '@ui-schema/ds-material/GridContainer';
// could be fetched from some API or bundled with the app
const schemaBase = {
type: 'object',
properties: {
country: {
type: 'string',
widget: 'Select',
enum: [
'usa',
'canada',
'eu'
],
default: 'eu',
tt: 'upper'
},
name: {
type: 'string',
maxLength: 20,
}
},
required: [
'country',
'name',
],
};
// or fetch from API
const data = {};
// for `>=0.4.0-alpha.1`:
// const GridStack = injectPluginStack(GridContainer)
export const DemoForm = () => {
// optional state for display errors/validity
const [showValidity, setShowValidity] = React.useState(false);
// needed variables and setters for the render engine, create wherever you like
const [store, setStore] = React.useState(() => createStore(createOrderedMap(data)));
const [schema/*, setSchema*/] = React.useState(() => createOrderedMap(schemaBase));
// `useUIMeta` can be used safely, without performance impact (`useUI` has a performance impact)
const {widgets, t} = useUIMeta()
const onChange = React.useCallback((actions) => {
setStore(storeUpdater(actions))
}, [setStore])
return <>
{/*
* for `>=0.4.0-alpha.1`:
*/}
{/**}
{/*
* deprecated since `0.4.0-alpha.1`:
*/}
isInvalid(store.getValidity()) ?
setShowValidity(true) :
console.log('doingSomeAction:', store.valuesToJS())
}
>send!
>
};
export default function App() {
return {/* add translations */}}
>
{/*
* somewhere in `YourRouterAndStuff` are your custom forms,
* it's possible to nest `UIMetaProvider` if you need to have different widgets,
* e.g. depending on some lazy loaded component tree
*/}
}
```
## Example Simple Text Widget
Easily create new widgets, this is all for a simple text (`type=string`) widget:
```typescript jsx
import React from 'react';
import { TransTitle, WidgetProps, WithScalarValue } from '@ui-schema/ui-schema';
const Widget = (
{
value, storeKeys, onChange,
required, schema,
errors, valid,
...props
}: WidgetProps & WithScalarValue,
) => {
return <>
{
onChange({
storeKeys,
scopes: ['value'],
// or use another StoreAction like `update`
type: 'set',
data: {
value: e.target.value,
//internalValue: undefined
//valid: undefined
},
schema,
required,
})
}}
/>
>
}
```
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md).
## License
This project is free software distributed under the **MIT License**.
See: [LICENSE](LICENSE).
© 2024 bemit UG (haftungsbeschränkt)
### License Icons
The icons in the badges of the readme's are either from [simpleicons](https://simpleicons.org) or are licensed otherwise:
- [Play Icon © Chanut is Industries, CC BY 3.0](https://www.iconfinder.com/icons/928430/go_media_music_play_playing_start_icon)
- [Experiment Icon © Ardiansyah Ardi, CC BY 3.0](https://www.iconfinder.com/icons/4951169/chemical_experiment_glass_lab_medical_icon)
- [Doc Icons © PICOL, CC BY 3.0](https://www.iconfinder.com/iconsets/picol-vector)
***
Created by [Michael Becker](https://mlbr.xyz)