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

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.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.5.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!