HtmlBox

Read as Markdown

HtmlBox comes from @pibbl/core. It gives a Pibbl-centered application an explicitly sized native HTML region. HTML owns editing, semantics, and native events; Pibbl owns the host placement, transforms, supported clipping, and lifetime.

import { createElement, HtmlBox } from "@pibbl/core";
const editor = createElement(HtmlBox, {
  data: "Name",
  style: { width: 240, height: 80 },
  mount(element, label, signal) {
    const input = document.createElement("input");
    input.setAttribute("aria-label", label);
    element.append(input);
    input.addEventListener("input", () => console.log(input.value), { signal });
    return (nextLabel) => input.setAttribute("aria-label", nextLabel);
  },
});

The initial pibbl configuration must include htmlOverlay: an empty HTML sibling immediately after the canvas inside a shared positioned wrapper. Canvas and overlay occupy the same content rectangle, with no border, padding, or independent transform. The complete existing HTML Box example includes this host setup and cleanup.

Mount and update callbacks are synchronous. The returned function receives subsequent rendered data. The supplied AbortSignal aborts before removal; use it to remove listeners or disconnect observers. Lifecycle callbacks cannot write signals, though native event handlers can.

All HTML hosts remain above Canvas paint. They do not participate in Canvas filters or non-default composition, and HTML content does not determine Pibbl intrinsic size. Related types: HtmlBoxProps, HtmlBoxStyle, and HtmlMountCallback.

For an existing HTML button, use the simpler HTML-owned integration instead.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.