Folder

A collapsible group that is itself a control container — nest controls and other folders to any depth.

A folder groups related controls under a collapsible header. It is both a control and a control container, so every builder method is available on it — including folder(), which lets you nest to any depth.

Try it

Usage

const advanced = pp.folder({
  label: "Advanced",
  expanded: false,
});

Configuration

interface FolderConfig extends BaseControlConfig {
  expanded?: boolean;
}

interface FolderControl extends Control<FolderConfig>, ControlContainer {
  expand(): this;
  collapse(): this;
  setExpanded(expanded: boolean): this;
  isExpanded(): boolean;
}

Nesting controls

Call builders on the folder to place controls inside it:

const advanced = pp.folder({
  id: "advanced",
  label: "Advanced",
});

const gain = advanced.slider({
  id: "gain",
  label: "Gain",
  value: 2,
  min: 0,
  max: 10,
});

const diagnostics = advanced.folder({
  id: "diagnostics",
  label: "Diagnostics",
  expanded: false,
});

Assigning ids produces stable, path-based keys such as advanced.gain for serialization.

Expansion

advanced.expand();
advanced.collapse();
advanced.setExpanded(window.innerWidth > 900);

if (advanced.isExpanded()) {
  // ...
}

At the panel level, pp.expandAll() and pp.collapseAll() operate on every folder at once.

Lifecycle

Destroying a folder recursively destroys everything it contains — direct children, nested folders, nested monitors, and all associated subscriptions and animation frames:

advanced.destroy(); // gain, diagnostics, and their contents are gone too

Collapsed folders pause work

Continuous canvas rendering, graph drawing, and monitor polling pause while a containing folder is collapsed — you get performance for free by organizing controls into folders.