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 type="module">
  import {Pane} from 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.5/dist/tweakpane.min.js';
  // ...
</script>

.html

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

<script type="module">
  import {Pane} from './path/to/tweakpane-4.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

Create an instance of a pane by new Pane().

const pane = new Pane();

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