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


  • 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=""></script>

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

<script src="path/to/tweakpane-1.5.4.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!