Tutorial 01 · Floating panels, no ZUI

The fastest way to add a movable, resizable panel to an existing webpage. No build step, no dependencies. Just one ES module import.

1. Add the script

Drop this single import into your page (as a module). No bundler required.

<script type="module">
  import panel from 'https://cdn.jsdelivr.net/npm/panel-api/+esm';

  panel.open("", "Hello", { width: 360, height: 220 })
       .setHTML("<p>Hello, world.</p>");
</script>

2. Add content

You can pass HTML strings or DOM nodes. Nodes are preferred — they avoid the innerHTML trust problem.

const settings = document.createElement("div");
settings.innerHTML = `<h2 class="h5">Settings</h2>...`;

const handle = panel.open("", "Settings", { width: 320, height: 280 });
handle.setContent(settings);

3. React to events

handle.element.addEventListener("beforepanelclose", event => {
  if (hasUnsavedChanges) event.preventDefault();
});

handle.element.addEventListener("panelmove", event => {
  console.log("moved to", event.detail);
});

Live example

Click to open a real panel on this page.