Skip to content

Latest commit

 

History

History

docs

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
assets
assets
 
 
README.md
README.md
 
 
index.html
index.html
 
 

README.md

Schema2UI Demo

Interactive browser demo for Schema2UI: create → render with shared layout, components, and sections from assets/. Uses refs and onNodeMount for dialog, form submit, counter, and output sync.

Run locally

From the repo root:

  1. Serve the repo (e.g. npx serve .):

    npx serve .

  2. Open http://localhost:3000/docs/ (or the port shown).

The demo imports Schema2UI from https://esm.sh/jsr/@neabyte/schema2ui, so no build is required.

Opening docs/index.html via file:// can block ES module loading; use a local server.

What the demo does

Single-page app built from el.root() with these sections (in order):

Section Description
Header Sticky bar: logo (Icon), nav links (#features, #form, #more, #docs), “Open Modal” button.
Hero Title, paragraph, figure (img + figcaption with lazy load), “Get Started” + “View GitHub” links.
Features 3-column grid of Cards (title, description, badge).
Form Two columns: left = form (InputGroup name/email, select+optgroup, textarea, fieldset+checkbox, disabled/readonly examples, Submit); right = Icon gallery, scroll area, counter button + label. Submit shows an alert with field values.
More Grid: details/summary, ul/ol, dl/dt/dd, blockquote, code, progress, meter, void tags, download link.
Table Table with caption, thead, tbody, tfoot.
Showcase One-page demo of many Schema2UI features: template, picture+source, hr, pre, datalist, output (synced to input), ARIA, search, article/aside, cite/q/mark/abbr, custom element (el.node), layout x/y, iframe, required/inputmode, select multiple, hidden, popover, audio, video.
Footer Copyright + Privacy/Terms links.
Dialog Modal (id main-modal); opened from header “Open Modal”, closed via “Close” button.

refs and onNodeMount are used for:

  • Dialog — refs.get('main-modal')?.showModal() / .close() from header and close button.
  • Counter — refs.get('btn-counter') and refs.get('count-label') to update click count text.
  • Form submit — refs.get('user-name'), user-email, user-role, user-bio, newsletter to read values and show alert.
  • Focus — focus user-name input on mount.
  • Output — sync showcase-num input value to showcase-output on input and on mount.

Assets structure

File / folder Description
index.html Entry HTML: #app + <script type="module" src="./assets/demo.js">.
assets/style.css Global styles (e.g. reset, body).
assets/demo.js Imports create, render, el from https://esm.sh/jsr/@neabyte/schema2ui; builds definition from sections; calls create() and render() with refs, signal, onNodeMount.
assets/constants.js Exports borderColor, icons (SVG path strings).
assets/layout.js Exports Layout (container, flexCenter, flexBetween, grid, section), Theme, merge().
assets/components.js Exports Card, InputGroup, Button, Icon (schema nodes built with el).
assets/sections/*.js One function per section (e.g. headerSection, heroSection); each receives ctx (el, Layout, merge, Components, icons, borderColor) and returns a single node.
assets/sections/index.js Barrel: re-exports all section functions.

The demo composes the definition in code (no JSON templates). Sections and components use Schema2UI layout and style (and attrs where needed, e.g. for grid or attrs.style).