🎛️ Compact GUI for fine-tuning parameters and monitoring value changes
See the code
Tweakpane is a compact pane library for fine-tuning parameters and monitoring value changes, inspired by dat.GUI.
(dat.GUI user? The migration guide can be helpful)
Refer to the Getting Started section for concrete steps. Remember to install @tweakpane/core if you are developing with TypeScript.
See the official page for details.
Number, String, Boolean, Color, Point 2D/3D/4D
Number, String, Boolean
Folder, Tab, Button, Separator
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.
$ 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.
Includes the basics, styles and components for Tweakpane, providing a practical resource for creating your own plugin.
MIT License. See LICENSE.txt for more information.
Overall
Maintained
Code review
npm
Latest release
Releases this year
(top 24 of 50)
6,260 followers · starred Oct 2023
3,979 followers · starred Mar 2024
275 followers · starred Aug 2023
26 followers · starred Mar 2025
🎛️ Compact GUI for fine-tuning parameters and monitoring value changes
See the code
Tweakpane is a compact pane library for fine-tuning parameters and monitoring value changes, inspired by dat.GUI.
(dat.GUI user? The migration guide can be helpful)
Refer to the Getting Started section for concrete steps. Remember to install @tweakpane/core if you are developing with TypeScript.
See the official page for details.
Number, String, Boolean, Color, Point 2D/3D/4D
Number, String, Boolean
Folder, Tab, Button, Separator
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.
$ 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.
Includes the basics, styles and components for Tweakpane, providing a practical resource for creating your own plugin.
MIT License. See LICENSE.txt for more information.
Overall
Maintained
Code review
npm
Latest release
Releases this year
(top 24 of 50)
6,260 followers · starred Oct 2023
3,979 followers · starred Mar 2024
275 followers · starred Aug 2023
26 followers · starred Mar 2025