Essentials

Essential components.

const PARAMS = {
  interval: {min: 16, max: 48},
};

// Interval
pane.addInput(PARAMS, 'interval', {
  min: 0,
  max: 100,
  step: 1,
});

// ...

// FPS graph
const fpsGraph = pane.addBlade({
  view: 'fpsgraph',
  label: 'fpsgraph',
});

function render() {
  fpsGraph.begin();

  // Rendering

  fpsGraph.end();
}

// ...

Camerakit

Enjoyable camera flavored controls.

const PARAMS = {
  flen: 55,
  fnum: 1.8,
  iso: 100,
};

// ...

pane.addInput(PARAMS, 'fnum', {
  // Use a ring view of Camerakit
  view: 'cameraring',
  // Appearance of the ring
  series: 1,
  // Configuration of the scale unit
  unit: {ticks: 10, pixels: 40, value: 0.2},
  // Hide a text input and widen the ring
  wide: true,
  // Number constraints
  min: 1.4,
  step: 0.02,
});

// ...

Find 3rd party plugins

#tweakpane topic on GitHub may be useful to search 3rd party plugins.

Create your own plugin

From version 2.0.0, you can provide custom components with the plugin system.

pane.registerPlugin({
  plugin: {
    ...
  },
});
.js

See the template repository for details.