Tweakpane-declarative NPM

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 = [
    { name: 'checkbox', default: false },
    { name: 'quantity', min: 0, max: 100, step: 10,  default: 20 },
    { name: 'debug', label: 'Debug on/off', default: false },
    { name: '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 = [
	{ name: '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 = [
    { name: 'checkbox', default: false },
    SEPARATOR,
    { name: 'debug', label: 'Debug on/off', default: false },
];