https://github.com/neabytelab/schema2ui
Turns a JSON schema into low-level customizable DOM.
https://github.com/neabytelab/schema2ui
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
Last synced: 16 days ago
JSON representation
Turns a JSON schema into low-level customizable DOM.
- Host: GitHub
- URL: https://github.com/neabytelab/schema2ui
- Owner: NeaByteLab
- License: mit
- Created: 2026-03-08T18:28:43.000Z (17 days ago)
- Default Branch: main
- Last Pushed: 2026-03-08T23:25:49.000Z (17 days ago)
- Last Synced: 2026-03-08T23:46:01.478Z (17 days ago)
- 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
- Language: TypeScript
- Homepage:
- Size: 32.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Schema2UI
Turns a JSON schema into low-level customizable DOM.
[](https://nodejs.org) [](https://deno.com) [](https://bun.sh) [](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[](https://github.com/NeaByteLab/Schema2UI) [](https://www.npmjs.org/package/@neabyte/schema2ui) [](https://jsr.io/@neabyte/schema2ui) [](https://github.com/NeaByteLab/Schema2UI/actions/workflows/ci.yaml) [](LICENSE)
## Features
- **HTML-native** — Nodes map to real HTML tags and CSS, so you stay close to the platform.
- **Schema-first** — UI is defined as a tree of nodes (data), so you don’t write imperative DOM code.
- **Create, then render** — Validate definition to get a schema, then pass schema and container to render.
- **Platform-aware** — Renderer follows HTML rules (e.g. void elements, template, SVG) so result is valid.
## Installation
> [!NOTE]
> **Prerequisites:** For **Deno** use [deno.com](https://deno.com/). For **npm** use Node.js (e.g. [nodejs.org](https://nodejs.org/)).
**Deno (JSR):**
```bash
deno add jsr:@neabyte/schema2ui
```
**Node (npm):**
```bash
npm install @neabyte/schema2ui
```
### CDN (browser / any ESM)
```html
import { create, render } from 'https://esm.sh/jsr/@neabyte/schema2ui'
// or pin version: .../schema2ui@0.2.0
```
- Latest: `https://esm.sh/jsr/@neabyte/schema2ui`
- Pinned: `https://esm.sh/jsr/@neabyte/schema2ui@`
## Quick Start
Define 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).
```typescript
import { create, render } from '@neabyte/schema2ui'
const schema = create({
root: [{ type: 'h1', content: 'Hello World' }]
})
render(schema, document.getElementById('app'))
```
## Documentation
- **[USAGE.md](USAGE.md)** — API and type reference.
- **[docs/](docs/)** — Browser demo: build then open `docs/index.html`.
## Build & Test
From the repo root (requires [Deno](https://deno.com/)).
**Check** — format, lint, and typecheck:
```bash
deno task check
```
**Tests** — format/lint tests and run:
```bash
deno task test
```
Tests live under `tests/` (Create, Constant, Validator, Render).
## License
This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for details.