pibbl

Read as Markdown

import { pibbl, Rectangle } from "@pibbl/core";

pibbl(canvas, root, config?) mounts a PibblNode on a Canvas host and returns a stable PibblController. A later call for the same canvas queues the latest root and returns the same controller. The first mount owns the surface configuration; call dispose() when the mount is no longer needed.

const canvas = document.querySelector("canvas")!;
const controller = pibbl(
  canvas,
  <Rectangle style={{ width: 160, height: 80, fill: "#2563eb" }} />,
);
// Later: controller.dispose();

The optional PibblConfig selects the surface policy. Fixed surfaces capture the initial canvas viewport; { viewport: "responsive" } uses the CSS content box. See the Getting started guide.

API details from source

Mounts or updates a canvas render component on a given HTMLCanvasElement. The first mount captures the surface configuration; later calls update only the root element until that controller is disposed.

pibbl: (canvas: HTMLCanvasElement, element: PibblNode, config?: PibblConfig) => PibblController

Related API: pibbl, PibblNode, PibblConfig, PibblController.

Parameters

canvas — The canvas to render on
element — The Pibbl element to render
config — The mount lifetime, logical viewport, fit, and pixel density. See PibblConfig .

Returns

The stable PibblController for this canvas; dispose it to release the mount.

Implementation guidance for agents

Read the Authoring, signals, and lifecycle companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

Mount, update, and dispose: Own one Pibbl root for a canvas and replace its content without creating another controller. Plain source

Documentation version

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