Examples

The same panel from a plain object, a class, TypeScript decorators, or generated from the data.

• Plain objects Put the config next to the data in a plain object. TweakpaneBlueprint
• Classes Build the config in a class field: this is the object that the components edit, and methods are the actions of the buttons. TweakpaneBlueprint
• TypeScript decorators Decorators on the fields generate the config. TweakpaneBlueprint
• Generated from data generateUiFolder makes a config from any object: the type of each value picks the component, and nested objects become folders. TweakpaneBlueprint

How a component reads and writes its value: a property of an object, the config itself, functions, or a path.

• Property binding property: [object, key] binds a component to a field. TweakpaneBlueprint
• Value in the config Without a property, the component keeps its value in config.value. TweakpaneBlueprint
• getValue and setValue Functions instead of a field: getValue gives the value to show, setValue gets the edited value. TweakpaneBlueprint
• Paths in nested data A folder gets the data object as its value, and its children pick their fields with a dot path, array indices included. TweakpaneBlueprint

The type of a config picks the component. Both renderers have the common set; Tweakpane adds a few.

• Inputs, numbers and sliders input takes its kind from the value: text, number or boolean. TweakpaneBlueprint
• Dropdowns The options of a dropdown (or select) are its children. TweakpaneBlueprint
• Buttons A button calls onClick, or the function that its property or value points to. TweakpaneBlueprint
• Colors and vectors color edits a hex string, a number or a three.js Color; vec2, vec3 and vec4 edit {x, y, z, w} objects. TweakpaneBlueprint
• Folders and panels A folder groups its children and folds; expanded sets its state and onExpand runs when it opens. TweakpaneBlueprint
• Text areas, tabs and separators Three components of uiconfig-tweakpane: textarea for text on several lines, tabs with a folder on each tab, and separator. Tweakpane

Panels that change with the data: computed properties, children that come and go, change events, undo.

• Hidden, disabled and read-only hidden, disabled, readOnly and label can be functions. TweakpaneBlueprint
• Dynamic children A function in children returns the child configs on each refresh. TweakpaneBlueprint
• Change events onChange gets a change event: the new and old value, the config that changed, and last, which is false while a slider moves. TweakpaneBlueprint
• Live text input Tweakpane sets the value of a text input on Enter or when it loses focus. TweakpaneBlueprint
• Undo and redo Each renderer records the edits in ui.undoManager and binds Ctrl+Z and Ctrl+Shift+Z. TweakpaneBlueprint

Options of one renderer: the themes of uiconfig-tweakpane and components of your own.

• Tweakpane themes uiconfig-tweakpane has an optional stylesheet with five color modes. Tweakpane
• Custom components A new type for uiconfig-tweakpane: add a function to ui.typeGenerators that makes the Tweakpane blade. Tweakpane

Colors and vectors of three.js objects, edited in place, and the panels of threepipe.

• three.js objects With ui.THREE set, color and vector components edit three.js objects in place: the material color, the position and the scale of a mesh. TweakpaneBlueprint
• threepipe viewer threepipe gives its viewer, plugins, objects and materials a uiConfig. TweakpaneBlueprint
• threepipe: edit the picked object Click a part of the model: the panel shows the config of that object and its material. TweakpaneBlueprint