Ornata

Ornata is a type-safe framework for building distributable interactive UI components for HTML-first applications.

Create encapsulated, protable components that enhance existing HTML instead of replacing it. Ornata combines state, behavior, rendering, lifecycle, and DOM contracts into reusable components that can be integrated into CMSs, server-rendered applications, design systems, and environments where rendering is not fully controlled by the component.

Documentation

The full documentation site lives at:

• https://marksmccann.github.io/ornata/

Use the docs site for:

• getting started guides
• API reference
• examples
• tutorials
• TypeScript usage patterns

Installation

npm install ornata

Browser Build

Ornata also ships a browser-ready global build that you can load directly into a server-rendered HTML page.

Use a pinned version in production so your pages do not change unexpectedly when a new release is published.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.global.js"></script>
<script>
    const { defineComponent, mountAll, isComponent } = window.Ornata;
</script>

If you prefer UNPKG, the same build is also available at:

<script src="https://unpkg.com/[email protected]/dist/index.global.js"></script>

Quick Start

import { defineComponent } from 'ornata';

const Counter = defineComponent({
    name: 'Counter',
    state: {
        count: { default: 0 },
    },
});

Counter.mount('[data-counter]');

For the full component authoring model, typed usage, mountAll(), DOM element safeguards, and richer examples, see the documentation site.

License

MIT