# uiconfig.js

> uiconfig.js describes a user interface as plain config objects (or TypeScript decorators) bound to your data. A renderer turns a config into a live panel: uiconfig-tweakpane (Tweakpane) or uiconfig-blueprint (Blueprint, React). The config code has no dependency; only the page that shows the panel imports a renderer.

- JavaScript code needs only a renderer: `npm install uiconfig-tweakpane` (or `uiconfig-blueprint`), then `new UI().appendChild(config)`. TypeScript code also installs `uiconfig.js` for the types (`UiObjectConfig`) and the decorators (`experimentalDecorators: true` in tsconfig.json).
- `type` picks the component: folder, panel, input, number, slider, checkbox/toggle, dropdown/select, button, color, vec2/vec3/vec4, monitor; Tweakpane adds textarea, tabs and separator.
- A component reads and writes its value through `property: [object, key]`, `value` (kept in the config), `getValue`/`setValue`, or a `path` into the `value` of its folder.
- After code changes the data, call `config.uiRefresh(true)` to show it. `hidden`, `disabled`, `readOnly`, `label` and `children` entries can be functions; they run on each refresh.
- A renderer keeps its state in the config objects: one config object cannot be shown by two renderers at once. Build one config per renderer from a function.
- Color and vector components create their values with the classes in `ui.THREE`: set it to three.js `{Color, Vector2, Vector3, Vector4}`.

## Docs

- [Guide](https://repalash.com/uiconfig.js/md/uiconfig.js.md): defining configs as objects, classes and decorators, the full config reference, binding, three.js
- [uiconfig-tweakpane](https://repalash.com/uiconfig.js/md/uiconfig-tweakpane.md): install, components, themes, three.js
- [uiconfig-blueprint](https://repalash.com/uiconfig.js/md/uiconfig-blueprint.md): install, components, use as a React library
- [Everything in one file](https://repalash.com/uiconfig.js/llms-full.txt): the guide, the renderer READMEs, every example and the API reference

## API reference

- [uiconfig.js](https://repalash.com/uiconfig.js/md/api/uiconfig.js.md)
- [uiconfig-tweakpane](https://repalash.com/uiconfig.js/md/api/uiconfig-tweakpane.md)
- [uiconfig-blueprint](https://repalash.com/uiconfig.js/md/api/uiconfig-blueprint.md)

## Examples

- [Writing configs: Plain objects](https://repalash.com/uiconfig.js/examples/object-syntax.md): Tweakpane, Blueprint
- [Writing configs: Classes](https://repalash.com/uiconfig.js/examples/class-syntax.md): Tweakpane, Blueprint
- [Writing configs: TypeScript decorators](https://repalash.com/uiconfig.js/examples/decorators.md): Tweakpane, Blueprint
- [Writing configs: Generated from data](https://repalash.com/uiconfig.js/examples/generated.md): Tweakpane, Blueprint
- [Binding to data: Property binding](https://repalash.com/uiconfig.js/examples/property-binding.md): Tweakpane, Blueprint
- [Binding to data: Value in the config](https://repalash.com/uiconfig.js/examples/value-binding.md): Tweakpane, Blueprint
- [Binding to data: getValue and setValue](https://repalash.com/uiconfig.js/examples/getter-setter.md): Tweakpane, Blueprint
- [Binding to data: Paths in nested data](https://repalash.com/uiconfig.js/examples/path-binding.md): Tweakpane, Blueprint
- [Components: Inputs, numbers and sliders](https://repalash.com/uiconfig.js/examples/inputs.md): Tweakpane, Blueprint
- [Components: Dropdowns](https://repalash.com/uiconfig.js/examples/dropdowns.md): Tweakpane, Blueprint
- [Components: Buttons](https://repalash.com/uiconfig.js/examples/buttons.md): Tweakpane, Blueprint
- [Components: Colors and vectors](https://repalash.com/uiconfig.js/examples/colors-vectors.md): Tweakpane, Blueprint
- [Components: Folders and panels](https://repalash.com/uiconfig.js/examples/folders-panels.md): Tweakpane, Blueprint
- [Components: Text areas, tabs and separators](https://repalash.com/uiconfig.js/examples/text-tabs.md): Tweakpane
- [Dynamic panels: Hidden, disabled and read-only](https://repalash.com/uiconfig.js/examples/hidden-disabled.md): Tweakpane, Blueprint
- [Dynamic panels: Dynamic children](https://repalash.com/uiconfig.js/examples/dynamic-children.md): Tweakpane, Blueprint
- [Dynamic panels: Change events](https://repalash.com/uiconfig.js/examples/on-change.md): Tweakpane, Blueprint
- [Dynamic panels: Live text input](https://repalash.com/uiconfig.js/examples/live-update.md): Tweakpane, Blueprint
- [Dynamic panels: Undo and redo](https://repalash.com/uiconfig.js/examples/undo-redo.md): Tweakpane, Blueprint
- [Renderers: Tweakpane themes](https://repalash.com/uiconfig.js/examples/tweakpane-themes.md): Tweakpane
- [Renderers: Custom components](https://repalash.com/uiconfig.js/examples/custom-component.md): Tweakpane
- [three.js and threepipe: three.js objects](https://repalash.com/uiconfig.js/examples/three-objects.md): Tweakpane, Blueprint
- [three.js and threepipe: threepipe viewer](https://repalash.com/uiconfig.js/examples/threepipe.md): Tweakpane, Blueprint
- [three.js and threepipe: threepipe: edit the picked object](https://repalash.com/uiconfig.js/examples/threepipe-picking.md): Tweakpane, Blueprint

## Optional

- [Website](https://repalash.com/uiconfig.js/): live panels, a playground, the component list
- [HTML API docs](https://repalash.com/uiconfig.js/docs/)
- [Changelog of uiconfig.js](https://github.com/repalash/uiconfig.js/blob/master/packages/uiconfig.js/CHANGELOG.md)