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/[email protected]/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

2. Create a pane

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.

What's next

Quick tour

learn the basics of Tweakpane

arrow_forward

API reference

open_in_new