cocopon/tweakpane 3.0.0 on GitHub

Summary

Implemented addBlade() 🗡️ : providing a component without binding
Brand-new plugin system: better type annotation, added support for blades
Split core module: now semantic versioning also works properly for plugin developers
Improved consistency of parameters format (see Breaking changes section)
Many other minor improvements / bug fixes

Breaking changes

Named exports

Tweakpane now uses named exports:

// Browser:
// v2
const pane = new Tweakpane();

// v3
const pane = new Tweakpane.Pane();

// import:
// v2
import Tweakpane from 'tweakpane';
const pane = new Tweakpane();

// v3
import {Pane} from 'tweakpane';
const pane = new Pane();

Type definitions

Additional package @tweakpane/core is required for development in TypeScript.

Input options

Color view for number input:

// v2
pane.addInput(params, 'foobar', {input: 'color.rgba'});

// v3
pane.addInput(params, 'foobar', {view: 'color', alpha: true});

Plain text view for color-like string input:

// v2
pane.addInput(params, 'foobar', {input: 'string'});

// v3
pane.addInput(params, 'foobar', {view: 'text'});

Plugin registration

// v2
import 'tweakpane-plugin-foobar';

// v3
import * as FoobarPlugin from 'tweakpane-plugin-foobar';
const pane = new Pane();
pane.registerPlugin(FoobarPlugin);

Theming

--tp-folder-background-color -> --tp-container-background-color
--tp-folder-background-color-* -> --tp-container-background-color-*
--tp-folder-foreground-color -> --tp-container-foreground-color
--tp-separator-color -> --tp-groove-foreground-color

Misc

Tweakpane.version -> VERSION