Introduction

ParamPanel is a small, framework-independent TypeScript library for adding interactive parameter panels to browser applications. It gives you sliders, checkboxes, selects, color pickers, buttons, live monitors, and custom canvas visualizations — all driven by a reactive, type-safe API.

It is built for the kind of app where you constantly tweak numbers and watch what happens: Three.js demos, WebGPU experiments, canvas visualizations, webcam and image-processing tools, simulations, creative coding, audio experiments, procedural generation, and internal developer tools.

A first taste

import { createPanel } from "param-panel";

const pp = createPanel({
  title: "Edge Detector",
});

const threshold = pp.slider({
  label: "Threshold",
  value: 128,
  min: 0,
  max: 255,
  step: 1,
});

threshold.subscribe((value, details) => {
  renderer.threshold = value;

  // Cheap work runs on every intermediate change; expensive work
  // only when the interaction completes.
  if (details.final) {
    saveExpensiveState();
  }
});

Every builder — pp.slider, pp.checkbox, pp.select, and so on — returns a control handle. You read it with get(), write it with set(), react to it with subscribe(), and reconfigure it atomically with configure().

Why ParamPanel

ParamPanel is designed to feel:

• Smaller and simpler than Tweakpane
• More modern and extensible than lil-gui
• Framework-independent, unlike Leva
• More structured and TypeScript-friendly than dat.GUI
• Especially good at custom monitors and visualizations

The guiding principles behind the API:

Where to next

• Installation — install the package and choose between the convenience and modular import styles.
• Panels — create a panel, mount it, and drive it at runtime.
• Reactive Values — the subscription model shared by every value control.
• Controls — the full catalog of built-in controls.
• Examples — complete, end-to-end programs.