Static Demos
Linked public demos for v0.1 without inline Ardo demos.
The v0.1 docs intentionally do not embed live demos inline. The public demo surface is built as a separate Vite site and linked from Ardo.
| Demo | Link | Proves |
|---|---|---|
| Vite build | Open demos | .wc.tsx modules compile through @naos-ui/vite into native Custom Elements. |
| State and events | Reactive counter | state(), computed(), effect(), and typed native CustomEvent dispatch. |
| Slots and parts | Primitive toggle | part, slot, data-state, ARIA, Show, keyed .map(), on(), and host(). |
| CSS variables | Theming | Host-provided CSS custom properties cross the Shadow DOM boundary. |
| Packaged primitives | Primitive package | @naos-ui/primitives imports compiled .wc.tsx package components. |
| Router package | Custom Element router | @naos-ui/router maps browser URLs to native Custom Element views with loaders and action forms. |
| Static DSD | DSD page | Explicit prerender output with <template shadowrootmode="open">. |
| Hydration behavior | Delayed upgrade | Static DOM is useful before upgrade and hydrates after the client module loads. |
The demos consume generated elements and router-mounted custom elements from regular HTML. There is no React, Vue, Angular, Solid, or Remix host adapter in the v0.1 launch proof.
How It Fits Together
The examples/tasks app in the repository is the composition path: a route
loader resolves an @naos-ui/data resource, components subscribe to shared
resources for their connected lifetime, typed route params flow into element
props, and @naos-ui/motion animates list filtering and detail presence.
Its unit tests mount compiled components through @naos-ui/testing, and the
Playwright suite drives the full loader-to-render flow in CI.
See examples/tasks.