Misc

In addition, Tweakpane has various useful features: Grouping components, buttons, event handling, importing/exporting a preset, etc.

Other components

Folder

Use addFolder() to add folders. You can add all types of components (except folders) to returned folder just like adding them to the pane.

const pane = new Tweakpane();

const f1 = pane.addFolder({
  title: 'Basic',
});
f1.addInput(PARAMS, 'speed');

const f2 = pane.addFolder({
  expanded: false,
  title: 'Advanced',
});
f2.addInput(PARAMS, 'acceleration');
f2.addInput(PARAMS, 'randomness');

Button

addButton() adds a button component. Use on() to handle click events.

const pane = new Tweakpane();
let count = 0;

const btn = pane.addButton({
  title: 'Increment',
});
btn.on('click', () => {
  count += 1;
  console.log(count);
});

Separator

addSeparator() is for adding a separator between components.

const pane = new Tweakpane();
pane.addButton({title: 'Previous'});
pane.addButton({title: 'Next'});
pane.addSeparator();
pane.addButton({title: 'Reset'});

Events

Use on() of specific components to listen its changes. Input components will emit change events. The first argument of the event handler is the input value.

const pane = new Tweakpane();
pane.addInput(PARAMS, 'value')
  .on('change', (value) => {
    console.log(value.toFixed(2));
  });

If you want to handle global events (for all of components), on() of the pane is for it.

const pane = new Tweakpane();
pane.addInput(PARAMS, 'boolean');
pane.addInput(PARAMS, 'color');
pane.addInput(PARAMS, 'number');
pane.addInput(PARAMS, 'string');

pane.on('change', (value) => {
  console.log('changed: ' + String(value));
});

Import/Export

Tweakpane has a feature for importing/exporting the current state in JSON object. Use exportPreset() to export it.

const pane = new Tweakpane();
// pane.addInput(PARAMS, ...);
// pane.addInput(PARAMS, ...);

const preset = pane.exportPreset();
console.log(preset);

			

To import an exported JSON object, pass it to importPreset().

const pane = new Tweakpane();
// pane.addInput(PARAMS, ...);
// pane.addInput(PARAMS, ...);

pane.importPreset(preset);

			

If your pane contains parameters with the same name, specify presetKey to avoid the confliction.

const pane = new Tweakpane();
pane.addInput(PARAMS1, 'speed');
pane.addInput(PARAMS2, 'speed', {
  presetKey: 'speed2',
});

			

Theming

Tweakpane now can be themed easily with CSS variable.

Add --tp-* variables to the container element to change pane colors. All themeable variables are listed below:

.html

Tips

Root title

title option of the pane creates a pane title. It can expand/collapse overall components including folders.

const pane = new Tweakpane({
  title: 'Parameters',
});

Custom container

If you want to put a pane into the specific element, pass it as container option of the pane.

const pane = new Tweakpane({
  container: document.getElementById('someContainer'),
});

Custom label

You can set a label of components by label option.

const pane = new Tweakpane();
pane.addInput(PARAMS, 'initSpd', {
  label: 'Initial speed',
});
pane.addInput(PARAMS, 'size', {
  label: 'Force field\nradius',
});

Refresh manually

By default, Tweakpane doesn't detect changes of bound parameters. Use refresh() to force-update all input/monitor components.

const pane = new Tweakpane();
// pane.addInput(PARAMS, ...);
// pane.addInput(PARAMS, ...);

pane.refresh();

Component visibility

Toggle hidden property to show/hide components.

const pane = new Tweakpane();
const f = pane.addFolder({
  title: 'Advanced',
});
// f.addInput(PARAMS, ...);

pane.addButton({title: 'Toggle'})
  .on('click', () => {
    f.hidden = !f.hidden;
  });

Disposing

If you want to dispose a pane manually, call dispose() of the pane.

Adding input/monitor at a specific position

Use index option to specify an index.

const pane = new Tweakpane();
pane.addButton({title: 'Run'});
pane.addButton({title: 'Stop'});
pane.addButton({
  index: 1,
  title: '**Reset**',
});