Tweakpane

Compact GUI for fine-tuning parameters and monitoring value changes
GitHub
3.76k
Created 9 years ago, last commit a month ago
5 contributors
1.62k commits
Stars added on GitHub, month by month
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
Stars added on GitHub, per day, on average
Yesterday
+4
Last week
+2.7
/day
Last month
+2.0
/day
Last 12 months
+2.0
/day
npmPackage on NPM
Monthly downloads on NPM
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
No dependencies
README

Tweakpane

CI Coverage Status npm version

cover

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

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

Features

See the official page for details.

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

Bindings

Number, String, Boolean

Readonly bindings

Folder, Tab, Button, Separator

UI components

Theming

Plugins

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

Development

CommonJS and ES modules

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

$ npm install
$ 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

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

image

License

MIT License. See LICENSE.txt for more information.