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.


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
  PARAMS, 'percentage',
  {min: 0, max: 100, step: 10}

// `options`: list
  PARAMS, 'theme',
  {options: {Dark: 'dark', Light: 'light'}}

See Bindings section or API reference for details.


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.


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();

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.

What's next