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 event object that contains a value.

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

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

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

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

Import/Export

Tweakpane has a feature for importing/exporting bound values in JSON object. Use exportPreset() to export it.

const pane = new Pane();
// 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 Pane();
// 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 Pane();
pane.addInput(PARAMS1, 'speed');
pane.addInput(PARAMS2, 'speed', {
  presetKey: 'speed2',
});

Tips

Custom container

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

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

Custom label

You can set a label of components by label option.

const pane = new Pane();
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 Pane();
// pane.addInput(PARAMS, ...);
// pane.addInput(PARAMS, ...);

pane.refresh();

Visibility

Toggle hidden property to show/hide components.

const pane = new Pane();
const f = pane.addFolder({
  title: 'Advanced',
});

// ...

btn.on('click', () => {
  f.hidden = !f.hidden;
});

Disabled

Use disabled property to disable a view temporarily.

const pane = new Pane();
const i = pane.addInput(PARAMS, 'param', {
  disabled: true,
  title: 'Advanced',
});

// ...

btn.on('click', () => {
  i.disabled = !i.disabled;
});

Disposing

If you want to dispose a pane manually, call dispose() of the pane. You can also dispose each component in the same way.

const pane = new Pane();
const i = pane.addInput(PARAMS, 'count');

// ...

// Dispose the input
i.dispose();

// Dispose the pane
pane.dispose();

Adding input/monitor at a specific position

Use index option to specify an index.

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