Create the `html` demo below and follow the steps ahead to learn the essentials.
```markup
```
1. Get `Appmixer` constructor from `appmixer.js` file and create a new instance:
```html
```
```javascript
const appmixer = new Appmixer()
```
2\. Set `baseUrl` to connect the API module to the REST API of your engine:
```javascript
appmixer.set('baseUrl', BASE_URL)
```
3\. Create a new user and set `accessToken` to authorize your `appmixer` instance:
```javascript
const auth = await appmixer.api.signupUser(USERNAME, PASSWORD)
appmixer.set('accessToken', auth.token)
```
Change `USERNAME`(e.g. `example@domain.com`) and `PASSWORD`(e.g. `12345678`) parameters to valid credentials for registration of a new user. Or use an authentication method if the user already exists:
```javascript
const auth = await appmixer.api.authenticateUser(USERNAME, PASSWORD)
```
{% hint style="info" %}
`The`token is used by Appmixer to identify the user. Store the token and credentials in a database of your product. This way, you can always associate your users with the (virtual) ones created for Appmixer.
{% endhint %}
4\. Create new instances of **Flow Manager** and **Designer** widgets:
```html
```
```javascript
const flowManager = appmixer.ui.FlowManager({ el: '#flow-manager' })
const designer = appmixer.ui.Designer({ el: '#designer' })
```
5\. Open **Flow Manager** to browse the flows and switch to **Designer** when a flow is selected:
```javascript
flowManager.open()
flowManager.on('flow:open', flowId => {
flowManager.close()
designer.set('flowId', flowId)
designer.open()
})
```
.png?alt=media)
.png?alt=media)