uiconfig.js

Value in the config

Without a property, the component keeps its value in config.value. This suits values that belong to the panel only.

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

// this page prints the log under the panel
const log = console.log
value-binding.js
// no data object: each config keeps its own value in config.value
const name = {type: 'input', label: 'Name', value: 'Untitled'}
const size = {type: 'slider', label: 'Size', value: 12, bounds: [8, 32], stepSize: 1}
const bold = {type: 'checkbox', label: 'Bold', value: false}

ui.appendChild({
    type: 'folder',
    label: 'Label',
    expanded: true,
    children: [
        name,
        size,
        bold,
        {
            type: 'button',
            label: 'Log values',
            onClick: () => log(name.value, size.value, bold.value),
        },
    ],
})

Log