1. Add Tweakpane to a project

Using CDN is the easiest way to add Tweakpane:

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

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

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

You can also install, import it as npm package:

$ npm install --save tweakpane

# Additional type definitions for development in TypeScript
$ npm install --save-dev @tweakpane/core
import {Pane} from 'tweakpane';
.js

2. Create a pane

Create an instance of a pane by new.

// CDN
const pane = new Tweakpane.Pane();

// npm
const pane = new Pane();

All set! Take a quick tour to see what you can do with the pane.

What's next