> For the complete documentation index, see [llms.txt](https://docs.appmixer.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.appmixer.com/6.0/5.1/appmixer-sdk/ui-and-widgets.md).
# UI & Widgets
Appmixer UI is a tool for building user interfaces with component-based widgets.
## Configuration
Widgets are included in `appmixer.ui` instances made with **Appmixer** constructor:
```javascript
const appmixer = new Appmixer(/* ... */)
const widget = appmixer.ui.FlowManager(config)
```
#### `config.el`
Type: `String|Element` | Default: `null`
HTML DOM element to serve as a container of the widget.
#### `config.theme`
Type: `Object` | Default: `DefaultTheme`
Custom theme definition.
#### `config.l10n`
Type: `Object` | Default: `DefaultL10N`
Custom localization texts.
#### `config.lang`
Type: `String` | Default: `en`
Language code for localization of components.
#### `config.api`
Type: `Object` | Default: `DefaultAPI`
Custom API methods.
## Instance
#### `widget.open`
```javascript
widget.open()
```
Mount the `widget` instance and render it inside the `el` container.
#### `widget.close`
```javascript
widget.close()
```
Unmount the `widget` instance and hide the `el` container.
#### `widget.reload`
```javascript
widget.reload()
```
Reload the entire `widget`.
#### `widget.reset`
```javascript
widget.reset()
```
Reset the state of the widget to defaults.
#### `widget.state`
Use `state` for properties that may change at any time when the `widget` is active.
```javascript
widget.state(path, value) // setter
widget.state(path) // getter
```
Example
```json
{
"foo": false,
"bar": { "counter": 1 }
}
```
```javascript
// set properties by key or path
widget.state('foo', true)
widget.state('bar', { counter: 2 })
widget.state('bar/counter', 3)
// get properties by key or path
widget.state('foo') // true
widget.state('bar') // { counter: 3 }
widget.state('bar/counter') // 3
// get the entire state
widget.state() // { foo: true, bar: { counter: 3 } }
// reset the state to defaults
widget.reset() // { foo: false, bar: { counter: 1 } }
```
#### `widget.set`
```javascript
widget.set(key, value)
```
Set `config` property.
#### `widget.get`
```javascript
widget.get(key, value)
```
Get `config` property.
#### `widget.on`
```javascript
widget.on(name, handler)
```
Add a new event listener and disable the default handler of the event.
#### `widget.off`
```javascript
widget.off(name)
```
Remove an event listener and enable the default handler of the event.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.appmixer.com/6.0/5.1/appmixer-sdk/ui-and-widgets.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `build a script that syncs our docs to a CMS` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.