Input

For fine-tuning parameters, use addInput() of the pane to add components. Tweakpane checks specified parameter types and provides suitable components.

Number

By default, Tweakpane provides a text field component for number parameters.

const PARAMS = {
  speed: 0.5,
};

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

Range

You can specify a range of parameters by min and max options. If you specify at least one of them, slider component will be created.

const PARAMS = {
  speed: 0.5,
};

const pane = new Tweakpane();
pane.addInput(PARAMS, 'speed', {
  min: 0,
  max: 100,
});

Step

step option constraints step of changes. You can also use this option with min and max option.

const PARAMS = {
  speed: 0.5,
  count: 10,
};

const pane = new Tweakpane();
pane.addInput(PARAMS, 'speed', {
  step: 0.1,
});
pane.addInput(PARAMS, 'count', {
  step: 10,
  min: 0,
  max: 100,
});

Number list

If you want to choose a value from presets, use options option.

const PARAMS = {
  quality: 0,
};

const pane = new Tweakpane();
pane.addInput(PARAMS, 'quality', {
  options: {
    low: 0,
    medium: 50,
    high: 100,
  },
});

String

For string parameters, text field component will be provided by default.

const PARAMS = {
  message: 'hello, world',
};

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

String list

Same as for number properties, options option provides a list component.

const PARAMS = {
  theme: '',
};

const pane = new Tweakpane();
pane.addInput(PARAMS, 'theme', {
  options: {
    none: '',
    dark: 'path/to/dark.json',
    light: 'path/to/Light.json',
  },
});

Boolean

For boolean parameters, checkbox field component will be provided.

const PARAMS = {
  hidden: true,
};

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

Color

For object parameters that have components key r, g, and b (and optional a), text field with a color swatch will be provided. You can choose a color from a color picker by clicking the swatch.

const PARAMS = {
  background: {r: 255, g: 127, b: 0},
  tint: {r: 255, g: 255, b: 0, a: 0.5},
};

const pane = new Tweakpane();
pane.addInput(PARAMS, 'background');
pane.addInput(PARAMS, 'tint');

This field will also be provided for string parameters that can be parsed as a color.

const PARAMS = {
  primary: '#8df',
  secondary: 'rgb(255, 136, 221)',
};

const pane = new Tweakpane();
pane.addInput(PARAMS, 'primary');
pane.addInput(PARAMS, 'secondary');

If you want to regard a hex number (like 0x0088ff) as a color, specify {input: 'color'} option. Or, 'color.rgba' to add an alpha component.

const PARAMS = {
  background: 0x0088ff,
  tint: 0x00ff0044,
};

const pane = new Tweakpane();
pane.addInput(PARAMS, 'background', {
  input: 'color',
});
pane.addInput(PARAMS, 'tint', {
  input: 'color.rgba',
});

Point 2D

For object parameters that have number properties x and y, text fields with a X-Y pad will be provided.

const PARAMS = {
  offset: {x: 50, y: 25},
};

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

As same as number input, you can constrain each dimension by step, min and max parameters.

const PARAMS = {
  offset: {x: 20, y: 30},
};

const pane = new Tweakpane();
pane.addInput(PARAMS, 'offset', {
  x: {step: 20},
  y: {min: 0, max: 100},
});

If you want to invert Y-axis, add inverted to Y parameters.

const PARAMS = {
  offset: {x: 50, y: 50},
};

const pane = new Tweakpane();
pane.addInput(PARAMS, 'offset', {
  y: {inverted: true},
});