Schema2UI

Turns a JSON schema into low-level customizable DOM.

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. For npm use Node.js (e.g. nodejs.org).

Deno (JSR):

deno add jsr:@neabyte/schema2ui

Node (npm):

npm install @neabyte/schema2ui

CDN (browser / any ESM)

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

import { create, render } from '@neabyte/schema2ui'

const schema = create({
  root: [{ type: 'h1', content: 'Hello World' }]
})

render(schema, document.getElementById('app'))

Documentation

• USAGE.md — API and type reference.
• docs/ — Browser demo: build then open docs/index.html.

Build & Test

From the repo root (requires Deno).

Check — format, lint, and typecheck:

deno task check

Tests — format/lint tests and run:

deno task test

Tests live under tests/ (Create, Constant, Validator, Render).

License

This project is licensed under the MIT license. See the LICENSE file for details.