tweakpane

Tweakpane is a small JavaScript/TypeScript library that creates a compact control panel inside a web browser. Developers use it during creative coding projects or interactive visualizations when they want to adjust values in real time without editing code and reloading the page. If you are building an animation and want to try different speeds or colors, Tweakpane lets you add sliders and color pickers directly on the page that feed their values into your running code.

The library works by binding to variables in your JavaScript code. You point it at a variable, and it creates a matching control: a slider for numbers, a checkbox for true/false values, a text field for strings, a color picker for colors, and point controls for 2D, 3D, or 4D coordinates. You can also set up read-only monitors that display a value as it changes over time without allowing user edits, which is useful for watching a counter or a sensor output update live.

Beyond individual controls, the library includes structural elements: folders to group related controls and collapse them, tabs to switch between sections, buttons to trigger actions, and separators to organize the layout visually. A theming option lets you adjust the pane's appearance, and a plugin system allows adding custom control types that the core library does not include. All current values can be exported and imported as JSON, which makes it easy to save a set of parameters and restore them later.

The library has no external dependencies, meaning no other packages are required. It supports mobile browsers and includes TypeScript type definitions. From version 4 onward, the package uses ES modules rather than the older CommonJS format. If you previously used a similar tool called dat.GUI, the README links to a migration guide.