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: bindings, folders, etc. It can also be extended with the plugin system.
Bindings
Use addBinding() to modify parameter values.
const PARAMS = {
factor: 123,
title: 'hello',
color: '#ff0055',
};
const pane = new Pane();
pane.addBinding(PARAMS, 'factor');
pane.addBinding(PARAMS, 'title');
pane.addBinding(PARAMS, 'color');
Some kinds of input types accept additional parameters:
const PARAMS = {
percentage: 50,
theme: 'dark',
};
// `min` and `max`: slider
pane.addBinding(
PARAMS, 'percentage',
{min: 0, max: 100, step: 10}
);
// `options`: list
pane.addBinding(
PARAMS, 'theme',
{options: {Dark: 'dark', Light: 'light'}}
);
See Bindings section or API reference for details.
Folders
Use addFolder() to organize blades.
const f = pane.addFolder({
title: 'Title',
expanded: true,
});
f.addBinding(PARAMS, 'text');
f.addBinding(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 binding to handle change events.
const b = pane.addBinding(
PARAMS, 'size',
{min: 8, max: 100, step: 1}
);
b.on('change', function(ev) {
console.log(`change: ${ev.value}`);
});
Global events are also available to handle events of all components at once.
State objects
Use exportState() to export a state of the pane.
btn.on('click', function() {
const state = pane.exportState();
console.log(state);
});
See Import/Export section for details.
Monitor bindings
Use addBinding() with the option {readonly: true} to monitor value changes.
pane.addBinding(sketch, 'signal', {
readonly: true,
view: 'graph',
interval: 200,
min: -1,
max: +1,
});See Monitor bindings section for full features.