# Technical Documentation: cocopon/tweakpane

> ℹ️ **Provenance:** Hybrid Fusion: `cocopon/tweakpane` (README + 1 In-Tree Chapters) · [CodeWiki Reference](https://codewiki.google/github.com/cocopon/tweakpane) · Recency: Active (< 180 days)

## 1. Project Overview & Quickstart (cocopon/tweakpane)

# Tweakpane

[](https://coveralls.io/github/cocopon/tweakpane)
[](https://badge.fury.io/js/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](https://tweakpane.github.io/docs/migration/#datgui) can be helpful)


## Installation
Refer to the [Getting Started](https://tweakpane.github.io/docs/getting-started/) section for concrete steps. Remember to install `@tweakpane/core` if you are developing with TypeScript.


## Features
See the [official page][documents] for details.


### [Bindings](https://tweakpane.github.io/docs/input-bindings/)
Number, String, Boolean, Color, Point 2D/3D/4D




### [Readonly bindings](https://tweakpane.github.io/docs/monitor-bindings/)
Number, String, Boolean




### [UI components](https://tweakpane.github.io/docs/ui-components/)
Folder, Tab, Button, Separator




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



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



### [Misc](https://tweakpane.github.io/docs/misc/)
- 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 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


### [Design Kit](https://www.figma.com/community/file/1324202557355874089)
Includes the basics, styles and components for Tweakpane, providing a practical resource for creating your own plugin.

[](https://www.figma.com/community/file/1324202557355874089)


## License
MIT License. See `LICENSE.txt` for more information.


[dat.GUI]: https://github.com/dataarts/dat.gui
[documents]: https://tweakpane.github.io/docs/

## 2. In-Tree Documentation Chapters (cocopon/tweakpane)

# Tweakpane

[](https://coveralls.io/github/cocopon/tweakpane)
[](https://badge.fury.io/js/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](https://tweakpane.github.io/docs/migration/#datgui) can be helpful)


## Installation
Refer to the [Getting Started](https://tweakpane.github.io/docs/getting-started/) section for concrete steps. Remember to install `@tweakpane/core` if you are developing with TypeScript.


## Features
See the [official page][documents] for details.


### [Bindings](https://tweakpane.github.io/docs/input-bindings/)
Number, String, Boolean, Color, Point 2D/3D/4D




### [Readonly bindings](https://tweakpane.github.io/docs/monitor-bindings/)
Number, String, Boolean




### [UI components](https://tweakpane.github.io/docs/ui-components/)
Folder, Tab, Button, Separator




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



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



### [Misc](https://tweakpane.github.io/docs/misc/)
- 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 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


### [Design Kit](https://www.figma.com/community/file/1324202557355874089)
Includes the basics, styles and components for Tweakpane, providing a practical resource for creating your own plugin.

[](https://www.figma.com/community/file/1324202557355874089)


## License
MIT License. See `LICENSE.txt` for more information.


[dat.GUI]: https://github.com/dataarts/dat.gui
[documents]: https://tweakpane.github.io/docs/

--- METRICS ---
- Files Extracted: 2
- Estimated Token Budget: ~1078 tokens
- Recency Window: Active (< 180 days)
- Canonical Reference: https://codewiki.google/github.com/cocopon/tweakpane