Quick tour
Take a look at the basics of Tweakpane in minutes.
Blades
You can add controls as rows to the pane. Tweakpane calls each row a “blade”.
There are various types of blades: input bindings, folders, etc. It can also be extended with the plugin system.
Input bindings
Use addInput() to modify parameter values.
const PARAMS = {
factor: 123,
title: 'hello',
color: '#ff0055',
};
const pane = new Pane();
pane.addInput(PARAMS, 'factor');
pane.addInput(PARAMS, 'title');
pane.addInput(PARAMS, 'color');
Some kinds of input types accept additional parameters:
const PARAMS = {
percentage: 50,
theme: 'dark',
};
// `min` and `max`: slider
pane.addInput(
PARAMS, 'percentage',
{min: 0, max: 100, step: 10}
);
// `options`: list
pane.addInput(
PARAMS, 'theme',
{options: {Dark: 'dark', Light: 'light'}}
);
See Input bindings section or API reference for details.
Folders
Use addFolder() to organize blades.
const f = pane.addFolder({
title: 'Title',
expanded: true,
});
f.addInput(PARAMS, 'text');
f.addInput(PARAMS, 'size');
If you want to expand/collapse the whole pane, specify title option of the pane:
const pane = new Pane({
title: 'Parameters',
expanded: true,
});
See UI components section for additional useful components.
Events
Use on() of the input to handle change events.
const input = pane.addInput(
PARAMS, 'size',
{min: 8, max: 100, step: 1}
);
input.on('change', function(ev) {
console.log(`change: ${ev.value}`);
});
Global events are also available to handle events of all components at once.
Presets
Use exportPreset() to export the current bound values in JSON format.
btn.on('click', function() {
const preset = pane.exportPreset();
console.log(preset);
});
See Import/Export section for details.
Monitor bindings
Use addMonitor() to monitor value changes.
pane.addMonitor(sketch, 'signal', {
view: 'graph',
interval: 200,
min: -1,
max: +1,
});See Monitor bindings section for full features.