back

State Persistence & Snap-to-Edges

The persistable plugin saves panel position, size, and minimized state to localStorage. The snappable plugin snaps panels to viewport edges (and optionally to other panels) while dragging.

Persistence

import panel from "../index.js";

// persist:"key" auto-adds the persistable plugin and saves to localStorage.
const handle = panel.open("", "Settings", {
  persist: "my-settings-panel",   // storage key (namespaced as "panel-api:my-settings-panel")
  width: 360, height: 280
});

// Manual save / restore
handle.saveState();    // write current bounds + minimized to localStorage
handle.restoreState(); // read and apply saved state

Snap-to-Edges

import panel from "../index.js";

// Snap to viewport edges (default: threshold 16px, edges enabled).
panel.open("", "Snappable", {
  plugins: [...panel.defaults.plugins, "snappable"],
  snapThreshold: 20,   // px within which a snap fires (default 16)
  snapEdges: true,     // snap to viewport edges (default)
  snapPanels: false,   // snap to other open panels (default false)
  width: 300, height: 180
});

// Snap to other panels too.
panel.open("", "Snap to panels", {
  plugins: [...panel.defaults.plugins, "snappable"],
  snapEdges: true,
  snapPanels: true,
  width: 260, height: 160
});