{"id":14070268,"url":"https://github.com/ui-schema/ui-schema","last_synced_at":"2025-05-15T05:07:40.037Z","repository":{"id":40238992,"uuid":"234793257","full_name":"ui-schema/ui-schema","owner":"ui-schema","description":"Use JSON-Schema with React, generate Forms + UIs with any design system, easy creation of complex custom widgets.","archived":false,"fork":false,"pushed_at":"2025-04-29T02:16:29.000Z","size":21574,"stargazers_count":334,"open_issues_count":61,"forks_count":31,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-10T12:40:35.606Z","etag":null,"topics":["form-builder","form-generator","json-schema","material","material-ui","mui","react","ui-generator","ui-schema","widget"],"latest_commit_sha":null,"homepage":"https://ui-schema.bemit.codes","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ui-schema.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-01-18T20:25:20.000Z","updated_at":"2025-05-07T19:23:24.000Z","dependencies_parsed_at":"2024-06-16T22:47:04.272Z","dependency_job_id":"5ea79506-ee35-455b-a60f-8bfd28bd3dde","html_url":"https://github.com/ui-schema/ui-schema","commit_stats":{"total_commits":486,"total_committers":5,"mean_commits":97.2,"dds":"0.034979423868312765","last_synced_commit":"e831a23803bff27a5753d6498c24499ddd944e66"},"previous_names":[],"tags_count":68,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-schema%2Fui-schema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-schema%2Fui-schema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-schema%2Fui-schema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-schema%2Fui-schema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-schema","download_url":"https://codeload.github.com/ui-schema/ui-schema/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-builder","form-generator","json-schema","material","material-ui","mui","react","ui-generator","ui-schema","widget"],"created_at":"2024-08-13T07:07:37.006Z","updated_at":"2025-05-15T05:07:35.028Z","avatar_url":"https://github.com/ui-schema.png","language":"TypeScript","funding_links":[],"categories":["react","TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ui-schema.bemit.codes\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\u003cimg width=\"125\" src=\"https://ui-schema.bemit.codes/logo.svg\" alt=\"UI Schema Logo\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eUI Schema for React\u003c/h1\u003e\n\nJSON 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.\n\nDevelop your next React app faster, with less code duplications - and without wasting time to implement validations.\n\n[![Github actions Build](https://github.com/ui-schema/ui-schema/actions/workflows/blank.yml/badge.svg)](https://github.com/ui-schema/ui-schema/actions)\n[![react compatibility](https://img.shields.io/badge/React-%3E%3D16.8-success?style=flat-square\u0026logo=react)](https://reactjs.org/)\n[![MIT license](https://img.shields.io/npm/l/@ui-schema/ui-schema?style=flat-square)](https://github.com/ui-schema/ui-schema/blob/master/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n[![Coverage Status](https://img.shields.io/codecov/c/github/ui-schema/ui-schema/master.svg?style=flat-square)](https://codecov.io/gh/ui-schema/ui-schema/branch/master)\n![Typed](https://flat.badgen.net/badge/icon/Typed?icon=typescript\u0026label\u0026labelColor=blue\u0026color=555555)\n\n- @ui-schema/ui-schema [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/ui-schema?style=flat-square)](https://www.npmjs.com/package/@ui-schema/ui-schema)\n- @ui-schema/ds-material [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/ds-material?style=flat-square)](https://www.npmjs.com/package/@ui-schema/ds-material)\n- @ui-schema/ds-bootstrap [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/ds-bootstrap?style=flat-square)](https://www.npmjs.com/package/@ui-schema/ds-bootstrap)\n- @ui-schema/pro [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/pro?style=flat-square)](https://www.npmjs.com/package/@ui-schema/pro)\n- @ui-schema/dictionary [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/dictionary?style=flat-square)](https://www.npmjs.com/package/@ui-schema/dictionary)\n\n- Additional Material-UI Widgets:\n    - Date-Time Picker: `@ui-schema/material-pickers` [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/material-pickers?style=flat-square)](https://www.npmjs.com/package/@ui-schema/material-pickers) [![Component Documentation](https://img.shields.io/badge/Docs-green?labelColor=1a237e\u0026color=0d47a1\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=mui)](https://ui-schema.bemit.codes/docs/material-pickers/Overview)\n    - Codemirror as Material Input: `@ui-schema/material-code` [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/material-code?style=flat-square)](https://www.npmjs.com/package/@ui-schema/material-code) [![Component Documentation](https://img.shields.io/badge/Docs-green?labelColor=1a237e\u0026color=0d47a1\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=mui)](https://ui-schema.bemit.codes/docs/material-code/material-code) [![repo](https://img.shields.io/badge/Repo-green?labelColor=000000\u0026color=f4f6f7\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=github)](https://github.com/ui-schema/react-codemirror/tree/main/packages/material-code)\n    - `react-color` picker: `@ui-schema/material-color` [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/material-color?style=flat-square)](https://www.npmjs.com/package/@ui-schema/material-color) [![Component Documentation](https://img.shields.io/badge/Docs-green?labelColor=1a237e\u0026color=0d47a1\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=mui)](https://ui-schema.bemit.codes/docs/material-color/material-color) [![repo](https://img.shields.io/badge/Repo-green?labelColor=000000\u0026color=f4f6f7\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=github)](https://github.com/ui-schema/react-color/tree/main/packages/material-color)\n    - `react-colorful` picker: `@ui-schema/material-colorful` [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/material-colorful?style=flat-square)](https://www.npmjs.com/package/@ui-schema/material-colorful) [![Component Documentation](https://img.shields.io/badge/Docs-green?labelColor=1a237e\u0026color=0d47a1\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=mui)](https://ui-schema.bemit.codes/docs/material-colorful/material-colorful) [![repo](https://img.shields.io/badge/Repo-green?labelColor=000000\u0026color=f4f6f7\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=github)](https://github.com/ui-schema/react-color/tree/main/packages/material-colorful)\n    - 🚧 Drag 'n Drop with `react-dnd`: `@ui-schema/material-dnd` [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/material-dnd?style=flat-square)](https://www.npmjs.com/package/@ui-schema/material-dnd) [![Component Documentation](https://img.shields.io/badge/Docs-green?labelColor=1a237e\u0026color=0d47a1\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=mui)](https://ui-schema.bemit.codes/docs/material-dnd/overview)\n    - 🚧 EditorJS as Material TextField: `@ui-schema/material-editorjs` [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/material-editorjs?style=flat-square)](https://www.npmjs.com/package/@ui-schema/material-editorjs) [![Component Documentation](https://img.shields.io/badge/Docs-green?labelColor=1a237e\u0026color=0d47a1\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=mui)](https://ui-schema.bemit.codes/docs/widgets/EditorJS)\n    - 🚧 SlateJS as Material TextField: `@ui-schema/material-slate` [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/material-slate?style=flat-square)](https://www.npmjs.com/package/@ui-schema/material-slate) [![Component Documentation](https://img.shields.io/badge/Docs-green?labelColor=1a237e\u0026color=0d47a1\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=mui)](https://ui-schema.bemit.codes/docs/widgets/RichText)\n- Additional Packages, not only for UI Schema:\n    - CodeMirror v6 kit: `@ui-schema/kit-codemirror` [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/kit-codemirror?style=flat-square)](https://www.npmjs.com/package/@ui-schema/kit-codemirror) [![Component Documentation](https://img.shields.io/badge/Docs-green?labelColor=0a6e8a\u0026color=61dafb\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=react)](https://ui-schema.bemit.codes/docs/kit-codemirror/kit-codemirror) [![repo](https://img.shields.io/badge/Repo-green?labelColor=000000\u0026color=f4f6f7\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=github)](https://github.com/ui-schema/react-codemirror/tree/main/packages/kit-codemirror)\n    - 🚧 Drag 'n Drop kit: `@ui-schema/kit-dnd` [![npm (scoped)](https://img.shields.io/npm/v/@ui-schema/kit-dnd?style=flat-square)](https://www.npmjs.com/package/@ui-schema/kit-dnd) [![Component Documentation](https://img.shields.io/badge/Docs-green?labelColor=0a6e8a\u0026color=61dafb\u0026logoColor=ffffff\u0026style=flat-square\u0026logo=react)](https://ui-schema.bemit.codes/docs/kit-dnd/kit-dnd)\n\n[![Documentation](https://img.shields.io/badge/Documentation-blue?labelColor=fff\u0026style=for-the-badge\u0026logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIGhlaWdodD0iMzJweCIgaWQ9InN2ZzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9ImJhY2tncm91bmQiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMzIiIHdpZHRoPSIzMi4wMDEiLz48L2c+PGcgaWQ9ImJvb2tfeDVGX3RleHRfeDVGX3NldHRpbmdzIj48cGF0aCBkPSJNMzIsMjMuMDAxYzAtMy45MTctMi41MDYtNy4yNC01Ljk5OC04LjQ3N1Y0aC0yVjEuOTk5aDJWMGgtMjNDMi45MTgsMC4wMDQsMi4yOTQtMC4wMDgsMS41NTYsMC4zNTQgICBDMC44MDgsMC42ODYtMC4wMzQsMS42NDUsMC4wMDEsM2MwLDAuMDA2LDAuMDAxLDAuMDEyLDAuMDAxLDAuMDE4VjMwYzAsMiwyLDIsMiwyaDIxLjA4MWwtMC4wMDctMC4wMDQgICBDMjguMDEzLDMxLjk1NSwzMiwyNy45NDYsMzIsMjMuMDAxeiBNMi44NTMsMy45ODFDMi42NzUsMy45NTUsMi40MTgsMy44NjksMi4yNzQsMy43NDNDMi4xMzYsMy42MDksMi4wMTcsMy41LDIuMDAyLDMgICBjMC4wMzMtMC42NDYsMC4xOTQtMC42ODYsMC40NDctMC44NTZjMC4xMy0wLjA2NSwwLjI4OS0wLjEwNywwLjQwNC0wLjEyNUMyLjk3LDEuOTk3LDMsMi4wMDUsMy4wMDIsMS45OTloMTlWNGgtMTkgICBDMyw0LDIuOTcsNC4wMDIsMi44NTMsMy45ODF6IE00LDMwVjZoMjB2OC4wNkMyMy42NzEsMTQuMDIzLDIzLjMzNywxNCwyMi45OTgsMTRjLTIuMTQyLDAtNC4xMDYsMC43NTEtNS42NTEsMkg2djJoOS41MTYgICBjLTAuNDEzLDAuNjE2LTAuNzQzLDEuMjg5LTAuOTk1LDJINnYyaDguMDU3Yy0wLjAzNiwwLjMyOS0wLjA1OSwwLjY2Mi0wLjA1OSwxLjAwMWMwLDIuODI5LDEuMzA3LDUuMzUsMy4zNDgsNi45OTlINHogTTIzLDMwICAgYy0zLjg2NS0wLjAwOC02Ljk5NC0zLjEzNS03LTYuOTk5YzAuMDA2LTMuODY1LDMuMTM1LTYuOTk1LDctN2MzLjg2NSwwLjAwNiw2Ljk5MiwzLjEzNSw3LDdDMjkuOTkyLDI2Ljg2NSwyNi44NjUsMjkuOTkyLDIzLDMweiAgICBNMjIsMTJINnYyaDE2VjEyeiIvPjxwYXRoIGQ9Ik0yOCwyNHYtMi4wMDFoLTEuNjYzYy0wLjA2My0wLjIxMi0wLjE0NS0wLjQxMy0wLjI0NS0wLjYwNmwxLjE4Ny0xLjE4N2wtMS40MTYtMS40MTVsLTEuMTY1LDEuMTY2ICAgYy0wLjIyLTAuMTIzLTAuNDUyLTAuMjIxLTAuNjk3LTAuMjk0VjE4aC0ydjEuNjYyYy0wLjIyOSwwLjA2OC0wLjQ0NiwwLjE1OC0wLjY1MiwwLjI3bC0xLjE0MS0xLjE0bC0xLjQxNSwxLjQxNWwxLjE0LDEuMTQgICBjLTAuMTEyLDAuMjA3LTAuMjAyLDAuNDI0LTAuMjcxLDAuNjUzSDE4djJoMS42NjJjMC4wNzMsMC4yNDYsMC4xNzIsMC40NzksMC4yOTUsMC42OThsLTEuMTY1LDEuMTYzbDEuNDEzLDEuNDE2bDEuMTg4LTEuMTg3ICAgYzAuMTkyLDAuMTAxLDAuMzk0LDAuMTgyLDAuNjA1LDAuMjQ1VjI4SDI0di0xLjY2NWMwLjIyOS0wLjA2OCwwLjQ0NS0wLjE1OCwwLjY1MS0wLjI3bDEuMjEyLDEuMjEybDEuNDE0LTEuNDE2bC0xLjIxMi0xLjIxICAgYzAuMTExLTAuMjA2LDAuMjAxLTAuNDIzLDAuMjctMC42NTFIMjh6IE0yMi45OTksMjQuNDk5Yy0wLjgyOS0wLjAwMi0xLjQ5OC0wLjY3MS0xLjUwMS0xLjVjMC4wMDMtMC44MjksMC42NzItMS40OTgsMS41MDEtMS41MDEgICBjMC44MjksMC4wMDMsMS40OTgsMC42NzIsMS41LDEuNTAxQzI0LjQ5NywyMy44MjgsMjMuODI4LDI0LjQ5NywyMi45OTksMjQuNDk5eiIvPjwvZz48L3N2Zz4=)](https://ui-schema.bemit.codes)\n\n[![Quick-Start](https://img.shields.io/badge/Quick%20Start-a677ca?labelColor=fff\u0026style=for-the-badge\u0026logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIGhlaWdodD0iMzJweCIgaWQ9InN2ZzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9ImJhY2tncm91bmQiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMzIiIHdpZHRoPSIzMiIvPjwvZz48ZyBpZD0ibm90ZXMiPjxwYXRoIGQ9Ik0yNCwxMkg4djJoMTVoMVYxMnogTTI4LDE1LjUxOFY0SDR2MjRoMTEuNTE4YzEuNjE0LDIuNDExLDQuMzYxLDMuOTk5LDcuNDgyLDRjNC45NzEtMC4wMDIsOC45OTgtNC4wMjksOS05ICAgQzMxLjk5OSwxOS44NzksMzAuNDExLDE3LjEzMiwyOCwxNS41MTh6IE0xNS41MTcsMThjLTAuNDEyLDAuNjE2LTAuNzQzLDEuMjg5LTAuOTk0LDJIOHYyaDYuMDU4QzE0LjAyMiwyMi4zMjksMTQsMjIuNjYxLDE0LDIzICAgYzAsMS4wNTQsMC4xOSwyLjA2MSwwLjUyMywzSDZWNmgyMHY4LjUyM0MyNS4wNjEsMTQuMTksMjQuMDU0LDE0LDIzLDE0Yy0yLjE0MywwLTQuMTA3LDAuNzUxLTUuNjUyLDJIOHYySDE1LjUxN3ogTTIzLDI5Ljg4MyAgIGMtMy44MDEtMC4wMDktNi44NzYtMy4wODQtNi44ODUtNi44ODNjMC4wMDktMy44MDEsMy4wODQtNi44NzYsNi44ODUtNi44ODRjMy43OTksMC4wMDgsNi44NzQsMy4wODMsNi44ODMsNi44ODQgICBDMjkuODc0LDI2Ljc5OSwyNi43OTksMjkuODc0LDIzLDI5Ljg4M3oiLz48cG9seWdvbiBwb2ludHM9IjE4LDIzIDIwLDIxIDIyLDIzIDI2LDE5IDI4LDIxIDIyLDI3ICAiLz48L2c+PC9zdmc+)](https://ui-schema.bemit.codes/quick-start)\n\n[![Schema Examples + Live Editor](https://img.shields.io/badge/Schema%20Examples%20+%20Live%20Editor-green?labelColor=fff\u0026color=1e970c\u0026style=for-the-badge\u0026logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAE3ElEQVR4nO2bX0xbVRzHz9TExKc9mBjjn+gLgcEA2wL33ra3pV0pf/uX3t6yMAQKEkahlQkBNavbMG6BYMzG4nxYYZBoycIMfxJ9cL4oI5CYGR7FLAtkeyA+oEHDgJ8PBnLPhULLbXt0nm/yfeltcn7fzzn3nHvOzUWIiooqHQqHw88lYkJlJk++en/kJMNvZ6gYUOK3dMWbvvqmj0jnSUi9fX0vnSjUKgoudS5r2CKdKSH1Dg6+nEwAeZzpvwUAIYTO+N/5Mpc1KL4F8rXG7ZrGpk9I5zmSotHos9lFOizQj7OzMD8/H9P52mLs/4Guy6+SzqFIcgCz9+7BwsJCTMsBhEKXXiGdQZEoAAqAAqAAKAAKgAKgACgACoACoAAoAAqAAqAAKID/HQDZ6bCJNYCZ5WM6U80+PQCi3d2vZ8kCJeqPAwE96RxH1qWa0z8rCZ+hYqDL7fmVdI4jaSIcPs4X6RWFz1AxoC7QwhdtbW+SzpOw+n21P0iDnFSzsOhwwgOX+0AvOV3AFHAYhA88vkXSeRLSTCDw/CkOfyt0vtgC4PXG5SFLKQaAKdRCfzj8IulccevTuoYZaYAsFQPLLnfcANY8HlBp8FEQ9p2eI50rLgFCx+xa0xY2kRnNcYffcb/ZigEwMPrtz5ubXyCd71BdrfePSQvPVLOw5HTFDLoSCsHkyAhMRSLwOBDY/X3VXQ25siW0r6b2W9L5DpVQXLIpLbqNNx3Y01+PjkI0GoVoNArTN29i1y6YLBgAC2fYRgg9QzpjTN1oavpMvowtOpyxAYgiTEgATEUi+OhwV8MJ2Si4XNfwFemcMVVnKtmQFtugKz70Xn947hxMjI7CnVu3YCUY3HO922DGANh48ybpnPsq0tr+vrz352yO+CY9UYx5bcnp2rM/GGj0D5HOu0ctJZXr0iJFzpDwzB/LAd6EAfAaT22QzotprL29Wd5LdyurkgZg0eHc84g82NwSJp17V8FK+xp2n7J80sLvuEFnxACcMZf+STo3Qgih8WCnK1vW+9PllbuFL0vW+Uft7UcGMGdz7BkFQ/7ms6Tzoy67axVbqxk9bAnCbuF3pMvc8LCiUSByBgxAk7Xqd6Lhb3d08HmyZ/bx0oqY6/zkyIgiAN9X2bC2MtUsXG05KxAD8KFTWMGe1wt18ETS++D1wsPOzgPX+URtY3kMQmuF7Tci4afC4RyNbN8+bC3bv3BRPHCtl3o5FILJ4eF/9gb7zBnT5ZVYm9lqFq77W0xpB3BREH/B9uwFHKzLej9hiyI2Z8j3BuD1wpYggIXBT5rerXI/Smv4bwYGXuMK8ePuIUup8uXukL3BjqNlFVjbeRoObrS25qcNwBVf7X1pASoNB2sej3IA3sP3BuD1woYgAC9739CbrsPTu4ODx42yIdhvtiYlfCJzRsRajtWgKeDgejD4RsoBXKtr/E7acK6ahVV3dXIBxOF1QYCiAvyly3mP737KAdSZrE+kjV4wxX/YmWxfkx2e2nXm1H9XID+s/MnugL8EgYgfuNxYLVkqBhBCx1IKgE3ilyDJdo6GTT2Angr7H6SDxvLblrLU7xBv9/TYrLLH0X+DDYwexjo6PCkHgBBCM+/1GK54fY+tLA/ZahZy1AwRZ6tZMDB6uOisXh3v7CxLS3gqKqqnSn8D0EwMpE6f7XEAAAAASUVORK5CYII=)](https://ui-schema.bemit.codes/examples)\n\n[![Get Help on Slack](https://img.shields.io/badge/Get%20Help%20on%20Slack-blue?labelColor=fff\u0026logoColor=505050\u0026color=7B16FF\u0026style=for-the-badge\u0026logo=slack)](https://join.slack.com/t/ui-schema/shared_invite/zt-smbsybk5-dFIRLEPCJerzDwtycaA71w)\n\n**🚀 Demo: UI Schema + Material Design + Create React App**: *[Demo Source](https://github.com/ui-schema/demo-cra)*\n\n[![Run on CodeSandbox](https://img.shields.io/badge/run%20on%20CodeSandbox-blue?labelColor=fff\u0026logoColor=505050\u0026style=for-the-badge\u0026logo=codesandbox)](https://codesandbox.io/s/github/ui-schema/demo-cra/tree/master/?autoresize=1\u0026fontsize=12\u0026hidenavigation=1\u0026module=%2Fsrc%2FSchema%2FDemoEditor.js)\n\n[![Run on StackBlitz](https://img.shields.io/badge/run%20on%20StackBlitz-blue?labelColor=fff\u0026logoColor=505050\u0026style=for-the-badge\u0026logo=stackblitz)](https://stackblitz.com/github/ui-schema/demo-cra)\n\n[![Fullscreen Demo](https://img.shields.io/badge/Fullscreen%20Demo-39c4d5?labelColor=fff\u0026color=29a9b7\u0026style=for-the-badge\u0026logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACRUlEQVR4nO3aTYiNUQDG8Z/xWRSFBRZYYSGSZCdFiZ0sFSuTjbJUdqMslGIhlmI3shGRJnZYkQVWZjNZmPIRNfIxr8Xt1JivO/ed95zzXvf917N/nn/3drvnHBoaGhoaGjphIU7iJq7jYNY2iVmCIRST8hDbMvZKxllTx4f8whWsytYuAY/NLCBkFKe1vir/Hc+1FxDyGvvz1IxHJwJC7mJzjrIxKCOgwA9cxIr0laulrICQDziBBamLV8V8BYS8wN7E3SuhKgEFxnEL65MumCdVCgj5jvNYlnBHaWIICBnGsXRTyhFTQMgT7Eg1qFNSCCjwBzewJs2suZNKQMhnrf8fi1OMmwupBYS8xaEE+9qSS0DIfWyJvnIWcgso8BOXsTLy1mmpg4CQjziFvqiLJ1EnASEvsS/m6InUUUDIIDbGm96izgIKjGEAy3tVQMgIDvSygPBp2NrLAgpc7XUB93pdwKVeFvBVhJ/FbhHwBrurHt8NAj7hDBbFGF9nAb9xDatjDQ/UUcAQtsccPZE6CXiPo3HnTqUOAr7hHJZG3jotOQWMa71KWRd95SzkEvAMexLsa0tqASM4rkaXqakEjOGCiP/ry5JCwCA2JdrTMTEFvJLwbK8sMQSMol/i092yVCkgnO931bO6qgQ8kPmGpyzzFfAOh5O3rpCyAr6o2S1vWToVEO751+YoG4NOBDzFziwtI/JI++HDuuCtT1n6zTy8q157laUPd/w7fBy3sSFjr+Qc0TpzH8CuzF0aGhoaGhoayvEXCYka61umCF0AAAAASUVORK5CYII=)](https://ui-schema-cra.netlify.app)\n\n---\n\n## Schema\n\nUse 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!\n\n*[Schema Documentation](https://ui-schema.bemit.codes/docs/schema)*\n\n## Features\n\n- add any design-system or custom widget\n    - easily create isolated and atomic widgets, with autowired data and validations\n    - customize design system behaviour with e.g. widget compositions\n    - easy binding of own design systems and custom widgets\n    - easily add advanced features like [read-or-write mode](https://ui-schema.bemit.codes/docs/core-meta#read-context)\n- [auto-rendering by data \u0026 schema](https://ui-schema.bemit.codes/quick-start) or [full-custom forms](https://ui-schema.bemit.codes/quick-start?render=custom) with autowired widgets\n- flexible translation of widgets\n    - 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))\n    - in-schema translations ([`t` keyword](https://ui-schema.bemit.codes/docs/localization#translation-in-schema))\n    - label text transforms ([`tt`/`ttEnum` keyword](https://ui-schema.bemit.codes/docs/localization#text-transform))\n    - single or multi-language\n    - for labels, titles, errors, icons...\n    - (optional) [tiny integrated translation library](https://ui-schema.bemit.codes/docs/localization#immutable-as-dictionary)\n    - (optional) [translation dictionaries](./packages/dictionary)\n- modular, extensible and slim core\n    - add own [plugins](https://ui-schema.bemit.codes/docs/core-pluginstack)\n    - add own validators\n    - add own base renderers\n    - add own widget matchers \u0026 render strategies\n    - use what you need\n- [performance optimized](https://ui-schema.bemit.codes/docs/performance), only updates HTML which must re-render, perfect for big schemas\n- code-splitting, with custom widget mappings / lazy-loading widgets\n- includes helper functions for store and immutable handling\n- easy nesting for custom object/array widgets with [`PluginStack`](https://ui-schema.bemit.codes/docs/core-pluginstack)\n- validate hidden/auto-generated values, virtualize schema levels ([`hidden` keyword](https://ui-schema.bemit.codes/docs/schema#hidden-keyword--virtualization))\n- handle store update from anywhere and however you want\n- extensive documentations of core, widgets\n- typed components and definitions for JSON Schema and UI Schema\n- complex conditionals schemas\n- loading / referencing schemas by URL, connect any API or e.g. babel dynamic loading instead\n- definitions and JSON-Pointer references in schemas\n- JSON Schema extension: UI Schema, change design and even behaviour of widgets\n- **JSON Schema versions** supported: Draft 2019-09 / Draft-08, Draft-07, Draft-06, Draft-04\n\n\u003e 🔥 **Professional service \u0026 support available, [reach out now](https://bemit.codes/get-quote)!**\n\n*[Design-System and Widgets Overview](https://ui-schema.bemit.codes/docs/overview)*\n\n## Versions\n\nThis 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.\n\n**Get the latest version - or [help build it](CONTRIBUTING.md):**\n\n- [latest releases](https://github.com/ui-schema/ui-schema/releases) (GitHub release notes)\n- [update and migration notes](https://ui-schema.bemit.codes/updates) (docs page)\n- [current roadmap](https://github.com/ui-schema/ui-schema/discussions/184) (GitHub discussion)\n\n## Example UI Schema\n\nFirst time? [Take the quick-start](https://ui-schema.bemit.codes/quick-start) or take a look into the MUI demo repos: [create-react-app \u0026 JS (simple)](https://github.com/ui-schema/demo-cra) or [create-react-app \u0026 Typescript (advanced)](https://github.com/ui-schema/demo-cra-ts).\n\nExample setup of a renderer, followed by a [simple text widget](#example-simple-text-widget).\n\nInstead 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).\n\n```js\nimport React from 'react';\n\n// Import Schema UI Provider and Render engine\nimport {isInvalid} from '@ui-schema/ui-schema/ValidityReporter';\nimport {createOrderedMap} from '@ui-schema/ui-schema/Utils/createMap';\nimport {UIStoreProvider, createStore} from '@ui-schema/ui-schema/UIStore';\nimport {storeUpdater} from '@ui-schema/ui-schema/storeUpdater';\nimport {UIMetaProvider, useUIMeta} from '@ui-schema/ui-schema/UIMeta';\n// new in `0.4.0-alpha.1`:\n// import {injectPluginStack} from '@ui-schema/ui-schema/applyPluginStack';\n// deprecated since `0.4.0-alpha.1`:\nimport {UIRootRenderer} from '@ui-schema/ui-schema/UIRootRenderer';\n// basic in-schema translator / `t` keyword support\nimport {relTranslator} from '@ui-schema/ui-schema/Translate/relT';\n// Get the widgets binding for your design-system\nimport {widgets} from '@ui-schema/ds-material/widgetsBinding';\n// new in `0.4.0-alpha.1`:\n// import {GridContainer} from '@ui-schema/ds-material/GridContainer';\n\n// could be fetched from some API or bundled with the app\nconst schemaBase = {\n    type: 'object',\n    properties: {\n        country: {\n            type: 'string',\n            widget: 'Select',\n            enum: [\n                'usa',\n                'canada',\n                'eu'\n            ],\n            default: 'eu',\n            tt: 'upper'\n        },\n        name: {\n            type: 'string',\n            maxLength: 20,\n        }\n    },\n    required: [\n        'country',\n        'name',\n    ],\n};\n\n// or fetch from API\nconst data = {};\n\n// for `\u003e=0.4.0-alpha.1`:\n// const GridStack = injectPluginStack(GridContainer)\n\nexport const DemoForm = () =\u003e {\n    // optional state for display errors/validity\n    const [showValidity, setShowValidity] = React.useState(false);\n\n    // needed variables and setters for the render engine, create wherever you like\n    const [store, setStore] = React.useState(() =\u003e createStore(createOrderedMap(data)));\n    const [schema/*, setSchema*/] = React.useState(() =\u003e createOrderedMap(schemaBase));\n\n    // `useUIMeta` can be used safely, without performance impact (`useUI` has a performance impact)\n    const {widgets, t} = useUIMeta()\n\n    const onChange = React.useCallback((actions) =\u003e {\n        setStore(storeUpdater(actions))\n    }, [setStore])\n\n    return \u003c\u003e\n        \u003cUIStoreProvider\n            store={store}\n            onChange={onChange}\n            showValidity={showValidity}\n        \u003e\n            {/*\n              * for `\u003e=0.4.0-alpha.1`:\n              */}\n            {/*\u003cGridStack isRoot schema={schema}/\u003e*}\n\n            {/*\n              * deprecated since `0.4.0-alpha.1`:\n              */}\n            \u003cUIRootRenderer schema={schema}/\u003e\n        \u003c/UIStoreProvider\u003e\n\n        \u003cbutton\n            /* show the validity only at submit (or pass `true` to `showValidity`) */\n            onClick={() =\u003e\n                isInvalid(store.getValidity()) ?\n                    setShowValidity(true) :\n                    console.log('doingSomeAction:', store.valuesToJS())\n            }\n        \u003esend!\n        \u003c/button\u003e\n    \u003c/\u003e\n};\n\nexport default function App() {\n    return \u003cUIMetaProvider\n        widgets={widgets}\n        t={relTranslator}\n        // never pass down functions like this - always use e.g. `React.useCallback`, check performance docs for more\n        //t={(text, context, schema) =\u003e {/* add translations */}}\n    \u003e\n        {/*\n          * somewhere in `YourRouterAndStuff` are your custom forms,\n          * it's possible to nest `UIMetaProvider` if you need to have different widgets,\n          * e.g. depending on some lazy loaded component tree\n          */}\n        \u003cYourRouterAndStuff/\u003e\n    \u003c/UIMetaProvider\u003e\n}\n```\n\n## Example Simple Text Widget\n\nEasily create new widgets, this is all for a simple text (`type=string`) widget:\n\n```typescript jsx\nimport React from 'react';\nimport { TransTitle, WidgetProps, WithScalarValue } from '@ui-schema/ui-schema';\n\nconst Widget = (\n    {\n        value, storeKeys, onChange,\n        required, schema,\n        errors, valid,\n        ...props\n    }: WidgetProps \u0026 WithScalarValue,\n) =\u003e {\n    return \u003c\u003e\n        \u003clabel\u003e\u003cTransTitle schema={schema} storeKeys={storeKeys}/\u003e\u003c/label\u003e\n\n        \u003cinput\n            type={'text'}\n            required={required}\n            value={value || ''}\n            onChange={(e) =\u003e {\n                onChange({\n                    storeKeys,\n                    scopes: ['value'],\n                    // or use another StoreAction like `update`\n                    type: 'set',\n                    data: {\n                        value: e.target.value,\n                        //internalValue: undefined\n                        //valid: undefined\n                    },\n                    schema,\n                    required,\n                })\n            }}\n        /\u003e\n    \u003c/\u003e\n}\n```\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## License\n\nThis project is free software distributed under the **MIT License**.\n\nSee: [LICENSE](LICENSE).\n\n© 2024 bemit UG (haftungsbeschränkt)\n\n### License Icons\n\nThe icons in the badges of the readme's are either from [simpleicons](https://simpleicons.org) or are licensed otherwise:\n\n- [Play Icon © Chanut is Industries, CC BY 3.0](https://www.iconfinder.com/icons/928430/go_media_music_play_playing_start_icon)\n- [Experiment Icon © Ardiansyah Ardi, CC BY 3.0](https://www.iconfinder.com/icons/4951169/chemical_experiment_glass_lab_medical_icon)\n- [Doc Icons © PICOL, CC BY 3.0](https://www.iconfinder.com/iconsets/picol-vector)\n\n***\n\nCreated by [Michael Becker](https://mlbr.xyz)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-schema%2Fui-schema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-schema%2Fui-schema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-schema%2Fui-schema/lists"}