tweakpane-declarative

A declarative interface for Tweakpane.

Quick start

First, run npm install tweakpane-declarative for your app. Then, in your code:

import { declarePane } from 'tweakpane-declarative';

...
const PARAMS = [
    { button: 'reset', events: [ resetCallback ] },
    { input: 'checkbox', default: false },
    { input: 'quantity', min: 0, max: 100, step: 10,  default: 20 },
    { input: 'point2d', default: { x: 50, y: 25 }, picker: 'inline', expanded: true },
    { input: 'debug', label: 'Debug on/off', default: false },
    { input: 'theme', label: 'Theme', default: 'light', options: { Dark: 'dark', Light: 'light' } },
];

pane = declarePane(PARAMS);

Change events

To declare change events (callbacks) for an input use the events attribute, which must be an array of one or more functions:

const myCallback = function(ev) {
	console.log(`change: ${ev.value}`);
}

const PARAMS = [
	{ input: 'debug', default: false, events: [ myCallback ]},
];

Add a separator between components

Add the SEPARATOR object in the desired position after importing it in the module namespace:

import { declarePane, SEPARATOR } from 'tweakpane-declarative';

const PARAMS = [
    { input: 'checkbox', default: false },
    SEPARATOR,
    { input: 'debug', label: 'Debug on/off', default: false },
];

License

MIT License. See LICENSE.txt for more information.

Authors

• Roberto Pesando [e-mail]
• Alberto Re [e-mail]