Add Pibbl to your site
An HTML application can own its navigation, layout, forms, text, and accessibility while Pibbl draws one selected region. No application rewrite is needed. Start with a native button with a living background.
Decorative Canvas behind HTML
Section titled “Decorative Canvas behind HTML”Use a positioned wrapper, a canvas with aria-hidden="true" and pointer-events: none, and native content above it. The host owns hover, focus, pressed, and disabled state. A small application bridge passes those changes to Pibbl. Keep the native control usable if the canvas is absent.
Interactive Canvas beside HTML
Section titled “Interactive Canvas beside HTML”For a chart or image comparison, explicitly choose which region receives Canvas input. Keep surrounding labels and equivalent controls in HTML. State the coordinate mapping and communicate selection through a small application-owned interface.
HTML inside a Pibbl application
Section titled “HTML inside a Pibbl application”If Pibbl should place native controls inside its layout, use HtmlBox with the required overlay. This is the opposite ownership direction. HTML remains above all Canvas paint, cannot join a Canvas filter, and does not automatically determine intrinsic Pibbl size.
First implementation
Section titled “First implementation”The button recipe includes the full host, CSS, Pibbl component, state bridge, and teardown. Its agent companion explains adaptation and verification. Plasma forms, image reveals, and a store hero rotator remain unimplemented roadmap concepts in the design kit, awaiting feedback on the button.
Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision c321a83. ALPHA — NOT FOR PRODUCTION USE.