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.

What's next