Plain objects

Put the config next to the data in a plain object. property binds each component to a field, and uiRefresh shows values that the code changed.

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

Setup, Blueprint

import {UI} from 'uiconfig-blueprint'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))

object-syntax.js

const person = {
    name: 'Ada',
    age: 36,
    city: 'London',
}

// the config sits next to the data; property binds a component to a field
person.uiConfig = {
    type: 'folder',
    label: 'Person',
    expanded: true,
    children: [
        {type: 'input', label: 'Name', property: [person, 'name']},
        {
            type: 'slider',
            label: 'Age',
            bounds: [0, 120],
            stepSize: 1,
            property: [person, 'age'],
        },
        {
            type: 'dropdown',
            label: 'City',
            property: [person, 'city'],
            children: ['London', 'Paris', 'New York'].map((label) => ({label})),
        },
        {
            type: 'button',
            label: 'Reset',
            onClick: () => {
                Object.assign(person, {name: 'Ada', age: 36, city: 'London'})
                // the code changed the data: render the panel again
                person.uiConfig.uiRefresh(true)
            },
        },
    ],
}

ui.appendChild(person.uiConfig)