Generated from data

generateUiFolder makes a config from any object: the type of each value picks the component, and nested objects become folders.

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'
import {Color, Vector2, Vector3, Vector4} from 'three'

// 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
ui.THREE = {Color, Vector2, Vector3, Vector4} // for the color and vector components

// this page prints the log under the panel
const log = console.log

Setup, Blueprint

import {UI} from 'uiconfig-blueprint'
import {Color, Vector2, Vector3, Vector4} from 'three'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.THREE = {Color, Vector2, Vector3, Vector4} // for the color and vector components

// this page prints the log under the panel
const log = console.log

generated.js

import {generateUiFolder} from 'uiconfig.js'

const settings = {
    quality: 2,
    shadows: true,
    title: 'My scene',
    offset: {x: 0, y: 0.5},
    camera: {fov: 45, near: 0.1, far: 100},
    save: () => log('saved', JSON.stringify(settings)),
}

// number: number input, boolean: checkbox, string: text input,
// {x, y}: vector, function: button, other objects: folders
const config = generateUiFolder('Settings', settings, {expanded: true})

ui.appendChild(config)

Log