Concepts

Prefix system

The default attribute prefix is ui, but you can rename it to fit your product or avoid collisions.

Why bother?

If you're embedding tiny-engine into someone else's page, a custom prefix gives you a private namespace for capsule markers, options, generated IDs, and data API triggers.

Setting a prefix

import { UI, getPrefix } from "tiny-engine-core";

// Default: ui-tabs, ui-tabs-active, data-ui-toggle
UI.config({ prefix: "shop" });

// Now: shop-tabs, shop-tabs-active, data-shop-toggle
console.log(getPrefix()); // "shop"

Markup follows the new prefix:

html

<div shop-cart shop-cart-currency="USD">
  ...
</div>

<button
  data-shop-toggle="cart"
  data-shop-action="open"
  data-target="[shop-cart]"
>
  Open cart
</button>