Getting started

Setting up Tweakpane in only 2 steps.

1. Add Tweakpane to a project

Using CDN is the easiest way to add Tweakpane:

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

.html

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

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

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.