Tweakpane

Tweakpane is a compact pane library for fine-tuning parameters and monitoring
value changes, inspired by dat.GUI.

• Clean and simple design
• Dependency-free
• Extensible

(dat.GUI user? The migration guide can be helpful)

Installation Copy Chapter

Refer to the Getting Started section for concrete steps. Remember to install @tweakpane/core if you are developing with TypeScript.

Features Copy Chapter

See the official page for details.

[Bindings](https://tweakpane.github.io/docs/input-bindings/) Copy Section

Number, String, Boolean, Color, Point 2D/3D/4D

[Readonly bindings](https://tweakpane.github.io/docs/monitor-bindings/) Copy Section

Number, String, Boolean

[UI components](https://tweakpane.github.io/docs/ui-components/) Copy Section

Folder, Tab, Button, Separator

[Theming](https://tweakpane.github.io/docs/theming/) Copy Section

[Plugins](https://tweakpane.github.io/docs/plugins/) Copy Section

[Misc](https://tweakpane.github.io/docs/misc/) Copy Section

• Mobile support
• TypeScript type definitions
• JSON import / export

Development Copy Chapter

CommonJS and ES modules Copy Section

From version 4, Tweakpane has been migrated to ES modules. If you are looking for a CommonJS version of the package, use version 3.x.

Build your own Tweakpane Copy Section

$ npm ci
$ npm run setup
$ cd packages/tweakpane
$ npm start

The above commands start a web server for the document, build source files, and
watch for changes. Open http://localhost:8080/ to browse the document.

Other resources Copy Chapter

[Design Kit](https://www.figma.com/community/file/1324202557355874089) Copy Section

Includes the basics, styles and components for Tweakpane, providing a practical resource for creating your own plugin.

License Copy Chapter

MIT License. See LICENSE.txt for more information.