URL State & Sharing

The URL adapter syncs panel state to the page URL, so a specific set of parameters can be bookmarked or shared. Like persistence, it is an optional module.

Usage

import { syncPanelToURL } from "param-panel/url";

const urlState = syncPanelToURL(pp, {
  parameter: "params",
});

Configuration & Interface

interface URLStateConfig {
  parameter?: string;
  hash?: boolean;
}

interface PanelURLState {
  read(): void;
  write(): void;
  getURL(): string;
  destroy(): void;
}

• parameter — the query parameter (or hash key) that holds the encoded state.
• hash — store state in the URL hash instead of the query string.

Share-link example

Pair it with a button to copy a shareable link:

const copyLink = pp.button({
  label: "Copy share link",
});

copyLink.onPress(async () => {
  await navigator.clipboard.writeText(urlState.getURL());
});

Behavior

• Encodes serializable control values into the URL.
• Prefers final changes over intermediate ones, so dragging doesn't spam history.
• Uses history.replaceState during active editing and avoids excessive pushState.
• Restores state from the URL on startup, so a shared link opens in the right configuration.
• Preserves unrelated query parameters.
• Allows excluding large or sensitive values from the URL.

read() re-applies state from the current URL, and write() forces an immediate encode. Call destroy() to detach the adapter.