# tweakpane

> A compact pane for fine-tuning parameters and monitoring value changes

Latest version **4.0.5** (published 2024-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install tweakpane
pnpm add tweakpane
yarn add tweakpane
bun add tweakpane
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.0.5 |
| Published | 2024-11-03 |
| First published | 2016-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 437 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4596 |
| Author | cocopon |
| Maintainers | cocopon |

## Links

- npm: https://www.npmjs.com/package/tweakpane
- Repository: https://github.com/cocopon/tweakpane
- Homepage: https://tweakpane.github.io/docs/
- Issues: https://github.com/cocopon/tweakpane/issues
- Funding: https://github.com/sponsors/cocopon
- npm.io page: https://npm.io/package/tweakpane

## Recent versions

- 4.0.5 (latest) — 2024-11-03
- 4.0.0-beta.2 (beta) — 2023-08-06
- 4.0.0-alpha.0 (alpha) — 2023-04-27
- 4.0.4 — 2024-06-30
- 4.0.3 — 2023-12-22
- 4.0.2 — 2023-12-15
- 4.0.1 — 2023-09-05
- 4.0.0 — 2023-08-06
- 4.0.0-beta.1 — 2023-06-20
- 4.0.0-beta.0 — 2023-06-20
- 3.1.10 — 2023-06-15
- 3.1.9 — 2023-04-22
- 3.1.8 — 2023-04-18
- 3.1.7 — 2023-03-17
- 3.1.6 — 2023-03-02
- … 67 more at https://npm.io/package/tweakpane/versions

## README

# Tweakpane
![CI](https://github.com/cocopon/tweakpane/workflows/CI/badge.svg)
[![Coverage Status](https://coveralls.io/repos/github/cocopon/tweakpane/badge.svg)](https://coveralls.io/github/cocopon/tweakpane)
[![npm version](https://badge.fury.io/js/tweakpane.svg)](https://badge.fury.io/js/tweakpane)

![cover](https://user-images.githubusercontent.com/602961/146529897-38829c6f-56df-46f6-81fe-d65fb2027eaa.png)

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

![Bindings](https://user-images.githubusercontent.com/602961/184479032-38f50be3-e235-4914-85c0-dce316b33ed2.png)


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

![Readonly bindings](https://user-images.githubusercontent.com/602961/184479060-44fda993-9f40-4ef1-b363-18e9f9deff7f.png)


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

![UI components](https://user-images.githubusercontent.com/602961/184479079-84ee5436-b5f6-4c35-92eb-94cc8709ff12.png)


### [Theming](https://tweakpane.github.io/docs/theming/)
![Theming](https://user-images.githubusercontent.com/602961/115102105-e6676500-9f83-11eb-8a74-ae4f76122000.png)


### [Plugins](https://tweakpane.github.io/docs/plugins/)
![Plugins](https://user-images.githubusercontent.com/602961/184479086-cc8c72c2-c958-4e4e-8ae4-2690f721c544.png)


### [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 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


### [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.

[![image](https://github.com/cocopon/tweakpane/assets/602961/78cfd81f-d950-48e3-a0f1-6b6a14caaca4)](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/

---
_Source: https://npm.io/package/tweakpane · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._