Tweakit

A dependency-free, code-split, real-time parameter panel. Hand it a plain schema; it builds a live control for each value — sliders, color, curves, springs, and more.

No framework ~19 KB gzip code-split TypeScript types included

Schema in, panel out

The panel below is built from the one schema object under it — nothing else. Shorthands infer controls from a value's shape ([value, min, max, step] → slider, [[lo, hi], …] → interval, true → checkbox, a hex string → the wide-gamut color picker, a nested object → a collapsible folder); the { type } forms opt into everything the shorthands can't say. Scrub the sliders, open the popovers, expand the folders, drag it around by the header.

const panel = tweaks("Demo", {
  intensity: [0.65, 0, 1, 0.01],
  accent: "#7C5CFF",
  shape: {                       // each nested object → a collapsible folder
    range: [[20, 80], 0, 100, 1],
    quality: { type: "segmented", options: ["Low", "Med", "High"], value: "Med" },
    origin: { type: "point", pad: true, components: [
      { key: "x", label: "X", value: 0, min: -1, max: 1, step: 0.01 },
      { key: "y", label: "Y", value: 0, min: -1, max: 1, step: 0.01 },
    ] },
  },
  motion: {
    spring: { type: "spring", stiffness: 220, damping: 18, mass: 1 },
  },
  monitor: {
    live: true,
    fps: { type: "fpsgraph", label: "FPS" },
  },
});
mount.append(panel.el);

Where next

Getting started — install, import, build your first panel.
Quick tour — the schema shorthands in two minutes.
Every control, live: numbers, text & choices, color & gradient, motion & curves, monitors, structure.
The panel API, theming, markup-driven panels and the two builds.

Inspired by Tweakpane and dialkit. Source on GitHub (MIT).