Tweakpane

Concept

• Clean and simple interface
• Easy to use, user-friendly document
• Mobile support

Getting started

1. Add Tweakpane to your project

Using CDN is the easiest way to add the library:

<script src="https://cdn.jsdelivr.net/npm/tweakpane@1.5.5/dist/tweakpane.min.js"></script>

Or, download the latest Tweakpane and import it to your web page:

<script src="path/to/tweakpane-1.5.5.min.js"></script>

You can also install, require/import it as npm package:

$ npm install --save tweakpane

const Tweakpane = require('tweakpane');

2. Create a pane

Create an instance of Tweakpane by new Tweakpane().

const pane = new Tweakpane();

3. Ready to go!

Create a parameter object, pass itself and its key to fine-tune/monitor values.

// Parameter object
const PARAMS = {
  speed: 0.5,
};

// Pass the object and its key to pane
const pane = new Tweakpane();
pane.addInput(PARAMS, 'speed');

You can add various components to pane. Inputs for fine-tuning parameters, Monitors for checking values, and more!