uiconfig.js API

uiconfig.js describes a UI as plain config objects (or TypeScript decorators) bound to your data. A renderer turns the config into a live panel. This is the API reference of the three packages; the search at the top covers all of them, and the switcher next to the name moves between them.

Packages

• uiconfig.js: the config types (UiObjectConfig, ChangeEvent), the decorators (uiSlider, uiColor, uiContainer, …), generateUiFolder to make a config from any object, and the base classes for renderers (UiConfigRenderer, UiConfigMethods). JavaScript code does not need it; TypeScript code imports its types and decorators.
• uiconfig-tweakpane: the renderer on Tweakpane, a compact panel for debug and tweak UIs. Its UI class adds setTheme for the modes of uiconfig-tweakpane/theme.css and typeGenerators for components of your own.
• uiconfig-blueprint: the renderer on Blueprint (React), for app inspectors: folders, panels that open as pages, and editor inputs.

A config, rendered

import {UI} from 'uiconfig-tweakpane' // or 'uiconfig-blueprint'

const light = {intensity: 2, enabled: true}
const ui = new UI()
ui.appendChild({
    type: 'folder',
    label: 'Light',
    children: [
        {type: 'slider', label: 'Intensity', bounds: [0, 10], property: [light, 'intensity']},
        {type: 'checkbox', label: 'Enabled', property: [light, 'enabled']},
    ],
})
Copy

Learn more

• Examples: every feature as a live panel with its code, in Tweakpane and Blueprint.
• Guide: writing configs, the full config reference, binding.
• Website: live panels, a playground and the component list.
• llms.txt: these docs, the guide and the examples as Markdown, for AI agents.
• GitHub: source, issues and the changelogs.