Tiny·Engine (Core)

Recipe

Astro integration

Render HTML on the server, then hydrate behavior with tiny-engine on the client.

SSR + init pattern

src/pages/index.astro
---
import { UI } from "tiny-engine-core";
import Dropdown from "../capsules/dropdown";

UI.register("dropdown", Dropdown);
---

<div ui-dropdown ui-dropdown-open="false">
  <button ref="trigger">Open</button>
  <div ref="menu" hidden>SSR markup hydrated by UI.init()</div>
</div>

<script type="module">
  import { UI } from "tiny-engine-core";
  UI.init();
</script>

Island host pattern

src/components/DropdownIsland.astro
---
---

<div ui-dropdown ui-dropdown-open="false">
  <button ref="trigger">Toggle</button>
  <div ref="menu" hidden>Astro island + tiny-engine capsule</div>
</div>

<script type="module">
  import { UI } from "tiny-engine-core";
  UI.scan(document.currentScript?.parentElement ?? document);
</script>