npm install panel-api

Floating panels
for the web

Draggable, resizable, stackable panels as a plain ESM library. No build step. No dependencies. Optional ZUI integration.

drag & resize z-stacking pin to world plugin system plain ESM zero deps
npm install panel-api
Browse demos GitHub npm

Live — drag it, resize it, close it.

Quick start

import panel from "panel-api";

// open a panel
const h = panel.open("", "Hello", {
  width: 360, height: 200
});

h.setHTML("<p>Hello world!</p>");

Import once, call panel.open(). The returned handle lets you set content, move, resize, minimize, and close the panel programmatically. Every behaviour — dragging, stacking, the close button — is a plugin you can replace or extend.

Full API reference

Core demos

01

Hello panel

The minimum viable example — one panel, a handful of lines.
02

Styling

Theming via CSS variables and ::part() selectors.
03

Multiple panels

Stacking, focus management, dragging, and resizing side by side.
04

Toolbox

Borderless, vertical panel of icon tools — no title bar.
05

Live clock

A panel that ticks over time and cleans up after itself.
06

Declarative

paneltarget / <section panel> HTML attributes.

ZUI — zooming user interface

07

ZUI viewport

Panel layer alongside a zooming and panning world surface.
08

Pinned panels

Panels that follow ZUI world coordinates as you pan and zoom.
09

Framing a page

framePage() wraps any webpage so panels float on top.

Tutorials — CDN / no bundler

T1

Panels only

Add a floating panel to any page with a single script tag.
T2

With ZUI

Panels alongside a zoomable world — straight from the CDN.
T3

ZUI framing

Wrap existing page content in a ZUI surface with one call.

Documentation

API

Plugins

ZUI

Styling