# Constructor

## Configuration <a href="#configuration" id="configuration"></a>

Set up a new `appmixer` instance with `config` parameters and `set`/`get` methods:

```javascript
const appmixer = new Appmixer({/* [name]: value */})

appmixer.set(name, value)
appmixer.get(name)
```

#### **`config.baseUrl`**

Type: `String` | Default: `null`

Base URL of your Appmixer engine REST API.

#### **`config.accessToken`**

Type: `String` | Default: `null`

Access token of an authorized user.

#### **`config.debug`**

Type: `Boolean` | Default: `false`

Enable debugger for development purposes.

#### **`config.theme`**

Type: `Object` | Default: `DefaultTheme`

#### **`config.l10n`**

Type: `Object` | Default: `DefaultL10N`

Define custom localization texts.

#### **`config.lang`**

Type: `String` | Default: `en`

Specify a language code for the localization of components.

#### **`config.api`**

Type: `Object` | Default: `{}`

Set custom API methods.

## Instance <a href="#instance" id="instance"></a>

#### **`appmixer.ui`**

```javascript
appmixer.ui('Widget', {/* ... */})
appmixer.ui.Widget({/* ... */})
```

Register and create UI Widgets.

#### **`appmixer.api`**

Use methods of built-in API Module.

#### **`appmixer.set`**

```javascript
appmixer.set(key, value)
```

Set configuration property.

#### **`appmixer.get`**

```javascript
appmixer.get(key, value)
```

Get configuration property.

#### **`appmixer.registerCustomComponentShape`**

```javascript
appmixer.registerCustomComponentShape(name, shape)
```

Register a custom **Designer** component shape.

#### **`appmixer.registerInspectorField`**

```javascript
appmixer.registerInspectorField(type, Field, options)
```

Register a custom **Designer** inspector field.

## Basic Usage <a href="#basic-usage" id="basic-usage"></a>

Connect to Appmixer engine REST API and render user interfaces with a built-in widget:

```html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://my.YOURTENANT.appmixer.cloud/appmixer/appmixer.js"></script>
</head>
<body>
  <div id="your-widget"></div>

  <script async type="module">
    const appmixer = new Appmixer({ baseUrl: BASE_URL })

    const auth = await appmixer.api.signupUser(USERNAME, PASSWORD)
    appmixer.set('accessToken', auth.token)

    appmixer.ui.FlowManager({ el: '#your-widget' }).open()
  </script>
</body>
</html>
```

{% hint style="info" %}
Change `USERNAME` and `PASSWORD` parameters to valid credentials for registration of a new user.
{% endhint %}

<figure><img src="https://1411580035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wQccpxu7ZEfAoEgdnOc%2Fuploads%2FMjalXcxSLec5dlMwzZzV%2Fflow-manager-light.png?alt=media&#x26;token=6693d329-e13d-4290-aa68-2501bd06e34b" alt=""><figcaption><p>Flow Manager</p></figcaption></figure>

Learn more about the basic usage with the **Quick Start** example.
