uiconfig.js

Classes

Build the config in a class field: this is the object that the components edit, and methods are the actions of the buttons.

Setup, Tweakpane
import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.setTheme('light') // a mode of theme.css
class-syntax.js
class Person {
    name = 'Ada'
    age = 36
    city = 'London'

    // `this` is the object that the components edit
    uiConfig = {
        type: 'folder',
        label: 'Person',
        expanded: true,
        children: [
            {type: 'input', label: 'Name', property: [this, 'name']},
            {
                type: 'slider',
                label: 'Age',
                bounds: [0, 120],
                stepSize: 1,
                property: [this, 'age'],
            },
            {
                type: 'dropdown',
                label: 'City',
                property: [this, 'city'],
                children: ['London', 'Paris', 'New York'].map((label) => ({
                    label,
                })),
            },
            {type: 'button', label: 'Birthday', onClick: () => this.birthday()},
            {type: 'button', label: 'Reset', onClick: () => this.reset()},
        ],
    }

    birthday() {
        this.age++
        this.uiConfig.uiRefresh(true)
    }

    reset() {
        this.name = 'Ada'
        this.age = 36
        this.city = 'London'
        this.uiConfig.uiRefresh(true)
    }
}

const person = new Person()
ui.appendChild(person.uiConfig)