{"id":46698580,"url":"https://github.com/neabytelab/schema2ui","last_synced_at":"2026-03-09T06:01:42.715Z","repository":{"id":343086289,"uuid":"1176188124","full_name":"NeaByteLab/Schema2UI","owner":"NeaByteLab","description":"Turns a JSON schema into low-level customizable DOM.","archived":false,"fork":false,"pushed_at":"2026-03-08T23:25:49.000Z","size":33,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-08T23:46:01.478Z","etag":null,"topics":["browser","create-element","css-mapping","declarative-ui","dom","esm","html","json-schema","layout","no-framework","node-tree","render","schema","svg","template-elements","typescript","ui-from-data","validation","void-elements"],"latest_commit_sha":null,"homepage":"","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/NeaByteLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-08T18:28:43.000Z","updated_at":"2026-03-08T23:25:52.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/NeaByteLab/Schema2UI","commit_stats":null,"previous_names":["neabytelab/schema2ui"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/NeaByteLab/Schema2UI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NeaByteLab%2FSchema2UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NeaByteLab%2FSchema2UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NeaByteLab%2FSchema2UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NeaByteLab%2FSchema2UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NeaByteLab","download_url":"https://codeload.github.com/NeaByteLab/Schema2UI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NeaByteLab%2FSchema2UI/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30284628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:57:19.223Z","status":"ssl_error","status_checked_at":"2026-03-09T02:56:26.373Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["browser","create-element","css-mapping","declarative-ui","dom","esm","html","json-schema","layout","no-framework","node-tree","render","schema","svg","template-elements","typescript","ui-from-data","validation","void-elements"],"created_at":"2026-03-09T06:01:38.767Z","updated_at":"2026-03-09T06:01:42.708Z","avatar_url":"https://github.com/NeaByteLab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Schema2UI\n\nTurns a JSON schema into low-level customizable DOM.\n\n[![Node](https://img.shields.io/badge/node-%3E%3D20-339933?logo=node.js\u0026logoColor=white)](https://nodejs.org) [![Deno](https://img.shields.io/badge/deno-compatible-ffcb00?logo=deno\u0026logoColor=000000)](https://deno.com) [![Bun](https://img.shields.io/badge/bun-compatible-f9f1e1?logo=bun\u0026logoColor=000000)](https://bun.sh) [![Browser](https://img.shields.io/badge/browser-compatible-4285F4?logo=googlechrome\u0026logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n\n[![Module type: Deno/ESM](https://img.shields.io/badge/module%20type-deno%2Fesm-brightgreen)](https://github.com/NeaByteLab/Schema2UI) [![npm version](https://img.shields.io/npm/v/@neabyte/schema2ui.svg)](https://www.npmjs.org/package/@neabyte/schema2ui) [![JSR](https://jsr.io/badges/@neabyte/schema2ui)](https://jsr.io/@neabyte/schema2ui) [![CI](https://github.com/NeaByteLab/Schema2UI/actions/workflows/ci.yaml/badge.svg)](https://github.com/NeaByteLab/Schema2UI/actions/workflows/ci.yaml) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\n\u003c/div\u003e\n\n## Features\n\n- **HTML-native** — Nodes map to real HTML tags and CSS, so you stay close to the platform.\n- **Schema-first** — UI is defined as a tree of nodes (data), so you don’t write imperative DOM code.\n- **Create, then render** — Validate definition to get a schema, then pass schema and container to render.\n- **Platform-aware** — Renderer follows HTML rules (e.g. void elements, template, SVG) so result is valid.\n\n## Installation\n\n\u003e [!NOTE]\n\u003e **Prerequisites:** For **Deno** use [deno.com](https://deno.com/). For **npm** use Node.js (e.g. [nodejs.org](https://nodejs.org/)).\n\n**Deno (JSR):**\n\n```bash\ndeno add jsr:@neabyte/schema2ui\n```\n\n**Node (npm):**\n\n```bash\nnpm install @neabyte/schema2ui\n```\n\n### CDN (browser / any ESM)\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { create, render } from 'https://esm.sh/jsr/@neabyte/schema2ui'\n  // or pin version: .../schema2ui@0.2.0\n\u003c/script\u003e\n```\n\n- Latest: `https://esm.sh/jsr/@neabyte/schema2ui`\n- Pinned: `https://esm.sh/jsr/@neabyte/schema2ui@\u003cversion\u003e`\n\n## Quick Start\n\nDefine a tree with `root` (array of nodes). Each node has `type` (HTML tag name), optional `layout`, `style`, `attrs`, `content`, and `children`. Call `create(definition)` then `render(schema, container)`. For refs and lifecycle (events, dialog, focus), use `render(schema, container, { refs, onNodeMount })` — see [USAGE](USAGE.md#refs-and-lifecycle).\n\n```typescript\nimport { create, render } from '@neabyte/schema2ui'\n\nconst schema = create({\n  root: [{ type: 'h1', content: 'Hello World' }]\n})\n\nrender(schema, document.getElementById('app'))\n```\n\n## Documentation\n\n- **[USAGE.md](USAGE.md)** — API and type reference.\n- **[docs/](docs/)** — Browser demo: build then open `docs/index.html`.\n\n## Build \u0026 Test\n\nFrom the repo root (requires [Deno](https://deno.com/)).\n\n**Check** — format, lint, and typecheck:\n\n```bash\ndeno task check\n```\n\n**Tests** — format/lint tests and run:\n\n```bash\ndeno task test\n```\n\nTests live under `tests/` (Create, Constant, Validator, Render).\n\n## License\n\nThis project is licensed under the MIT license. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneabytelab%2Fschema2ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneabytelab%2Fschema2ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneabytelab%2Fschema2ui/lists"}