Markup

The second way in: write [data-tw] markup and enhance() upgrades each host into a live control in place. Importing the core module runs enhance(document) automatically on load — every example on this page is plain HTML, no page script at all. Call enhance(root) yourself for DOM added later.

A static panel shell

A .tw-panel shell with [data-tw] hosts inside becomes the real thing — collapsible header, copy + reset toolbar operating over its controls, the works. Each control writes its live value back onto its host's data-value attribute.

Static

<div class="tw-panel" data-mode="inline" style="max-width: 300px">
  <div class="tw-header"><span class="tw-title">Static</span></div>
  <div class="tw-controls">
    <div data-tw="slider" data-label="Blur" data-value="12" data-min="0" data-max="40"></div>
    <div data-tw="checkbox" data-label="Visible" data-checked="true"></div>
    <div data-tw="list" data-label="Blend" data-options="normal, multiply, screen" data-value="normal"></div>
  </div>
</div>

Heavy controls from markup

The lazy controls work declaratively too — their config flattens into data-* attributes, and their modules load on demand exactly as they do from a schema.

Heavy

<div class="tw-panel" data-mode="inline" style="max-width: 300px">
  <div class="tw-header"><span class="tw-title">Heavy</span></div>
  <div class="tw-controls">
    <div data-tw="color" data-label="Tint" data-value="#7C5CFF"></div>
    <div data-tw="spring" data-label="Motion" data-stiffness="220" data-damping="18" data-mass="1"></div>
    <div data-tw="point" data-label="Offset" data-components="X,Y" data-value="0,0" data-min="-50" data-max="50" data-pad="true"></div>
    <div data-tw="interval" data-label="Band" data-value="30,70" data-min="0" data-max="100" data-step="1"></div>
  </div>
</div>

Bare hosts, anywhere

Hosts don't need a panel shell — a [data-tw] div in any layout enhances in place (a data-hint rides along as the ⓘ tooltip). A data-tw="folder" wraps its children in a collapsible group.

<div style="max-width: 300px">
  <div data-tw="folder" data-label="Inline anywhere">
    <div data-tw="slider" data-label="Speed" data-value="1.5" data-min="0" data-max="3" data-step="0.1"
         data-hint="Just a div in the page"></div>
    <div data-tw="radiogrid" data-label="Size" data-options="S, M, L, XL" data-cols="2" data-value="M"></div>
  </div>
</div>

Calling enhance() yourself

Auto-enhance covers the initial document. For markup you inject later — a modal, a CMS block, a partial render — call it on the new root. Hosts that are already live are skipped, so re-running is safe.

import { enhance } from "tweakit/core";

modal.innerHTML = controlsMarkup;
await enhance(modal);   // resolves once any lazy modules have loaded