Panel API
Floating, draggable, resizable panels for the web — plain ESM, no build, no dependencies.
Core demos
Hello panel
The minimum viable example — one panel, one line of code.
Styling
Change color, font, and button look via CSS variables and parts.
Multiple panels
Stacking, focus, dragging, resizing.
Toolbox
Borderless, vertical panel of icon tools.
Live clock
A panel that updates over time and cleans up after itself.
Declarative
paneltarget / <section panel> HTML attributes.
IFrame panels
URL-backed panels — navigate(), reload(), sandbox, events.
Element-anchored panels
coordinateSpace:"element" — placement, offset, collision avoidance.
Document-space panels
coordinateSpace:"document" — panels that scroll with the page.
Persistence & Snap
persistable plugin saves to localStorage; snappable plugin snaps to edges.
ZUI demos
ZUI viewport
A panel layer next to a zooming/panning world surface.
Pinned panels
Panels that follow ZUI world coordinates.
Framing a page
framePage() wraps a normal webpage and panels float on top.
ZUI pointer events
wireZuiPointerEvents() re-emits pointer events with world-space coordinates — correct at any zoom level.
Viewport lock
createViewportLock() suspends pan/zoom and resets to identity — enables precise drag-and-drop on the surface.