Tweakpane

Compact pane library for fine-tuning parameters and monitoring value changes.

Features

  • Easy to use, user-friendly document
  • Clean and simple interface
  • 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.0.4/dist/tweakpane.min.js"></script>
.html

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

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

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

$ npm install --save tweakpane
const Tweakpane = require('tweakpane');
.js

2. Create a pane

Create an instance of Tweakpane by new Tweakpane().

const pane = new Tweakpane();
.js

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!