npm package: @neabyte/schema2ui
Description: Turns a JSON schema into low-level customizable DOM
Author: NeaByteLab
Latest version: 0.2.0

<div align="center">

# Schema2UI

Turns a JSON schema into low-level customizable DOM.

[![Node](https://img.shields.io/badge/node-%3E%3D20-339933?logo=node.js&logoColor=white)](https://nodejs.org) [![Deno](https://img.shields.io/badge/deno-compatible-ffcb00?logo=deno&logoColor=000000)](https://deno.com) [![Bun](https://img.shields.io/badge/bun-compatible-f9f1e1?logo=bun&logoColor=000000)](https://bun.sh) [![Browser](https://img.shields.io/badge/browser-compatible-4285F4?logo=googlechrome&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

[![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)

</div>

## 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
<script type="module">
  import { create, render } from 'https://esm.sh/jsr/@neabyte/schema2ui'
  // or pin version: .../schema2ui@0.2.0
</script>
```

- Latest: `https://esm.sh/jsr/@neabyte/schema2ui`
- Pinned: `https://esm.sh/jsr/@neabyte/schema2ui@<version>`

## 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.