# Explore the interface

## Workspace dashboard

The left side panel of the workspace dashboard is divided into two sections: **Apps** and **Library**. The Apps section shows all your applications, whereas the Library section displays all your created [modules](https://docs.uibakery.io/concepts/modules) and custom components.\
From the menu, you can quickly navigate between apps, application pages, modules, and custom components. You can hide the menu bar or expand it.

To create a new app, module or custom component, click the **+ button** next to the Apps or Library section and select the necessary item. You can also import items from Git or from an archive.

To open application settings, click on the three dots next to the app's name. From this menu, you can also **edit** (open in the Builder), **duplicate**, [**export**](https://docs.uibakery.io/concepts/export-import-an-app) or **delete** an app. The *Edit* option here allows you to quickly open a new project in the **Edit** mode - not just the one selected right now - as well as open it in a new tab. This way you can easily switch between contexts without disrupting your current workflow.\
In the same way, you can also access modules/custom components' settings as well as edit, duplicate, export, or delete them.

In the upper right corner of the dashboard, you can switch between [environments](https://docs.uibakery.io/concepts/workspace-management/app-environments) - **dev**, **staging** or **prod**. The [**Share** button](https://docs.uibakery.io/build-from-scratch/getting-started/deploy-your-application-and-invite-users#inviting-users-via-share) here allows you to invite users to your app and manage their access. And the **Edit** button will take you to the Builder where you can edit the currently selected application. 

{% @arcade/embed flowId="Dey3vpb412bR3VnzxMjN" url="<https://app.arcade.software/share/Dey3vpb412bR3VnzxMjN>" %}

## Builder interface

Depending on whether you selected a specific template or started from scratch, your working area can be either blank or already include some UI elements.

{% hint style="info" %}
UI Bakery app is **live** in Edit mode. That means that you can edit your app and test it right away.
{% endhint %}

Let's have a look at the **Builder interface**:point\_down:

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FHzBvVzFLTYG1GpEvd5O0%2FCleanShot%202025-08-11%20at%2016.16.28%402x-min.png?alt=media&#x26;token=7ad4f611-ba43-4bd1-845f-3f53b99ca783" alt=""><figcaption></figcaption></figure>

<details>

<summary>1. Header</summary>

The header contains:

* **UI Bakery icon** - access App settings, Release history, or go back to the workspace menu
* **Connect Git** (available in the *Enterprise* plan)
* **Undo/Redo** buttons
* **Screen adaptive controls**
* Time stamp of the **last saved changes**
* **Preview** app link - click to see how your app looks without leaving the Builder&#x20;
* **Release** button
* **Share** button - invite users to your app, manage their access, and make the app public

</details>

<details>

<summary>2. Left side panel</summary>

**a. Components** - displays a list of all UI components that you can drag and drop to the working area. The *Library* subtab here, displays all your created modules and custom components.

**b. App structure** - shows the current page elements structure.

**c. App state** - shows existing state variables (with the option to manage them), components, actions, and other state variables.

**d. Pages** - contains a list of your app pages, and allows you to create or update any page.

**e. Theme** - custom theme builder.

**f.** [**Database Editor**](https://docs.uibakery.io/extras/ui-bakery-postgres/database-editor) - here you can manage all your hosted databases.

**g. Data sources** - here you can connect your databases and APIs.

</details>

{% hint style="success" %}
The left side panel is *resizable* - you can adjust its size to suit your workflow and build more comfortably.
{% endhint %}

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FR3JtE0m780VvbwP4BIHs%2FCleanShot%202025-08-11%20at%2016.32.08%402x-min.png?alt=media&#x26;token=deece866-d41a-43af-a050-120d2223cc11" alt=""><figcaption></figcaption></figure>

<details>

<summary>3. Working area</summary>

It's the part of the interface where you can assemble your application page from UI components.

</details>

<details>

<summary>4. Right side panel</summary>

It shows various settings and triggers of a UI component, if selected, or page settings.

</details>

<details>

<summary>5. Footer</summary>

**g. Additional info** - links to our docs, community, booking a demo, and more.

**h. Actions** - all app actions.

**i. Logs -** the current app logs.

**j. Git -** to activate Git.

**k. Custom code** - to connect custom scripts, libraries, and styles.

**l. Settings** - to set up some additional app interface settings.

**m. Search** - to search for components, actions, data sources, settings.

**n. AI Assistant** - to access our AI-based chatbot that can quickly help you with technical questions and code generation.

</details>

{% hint style="info" %}
Changes made in the UI Bakery app are saved automatically.
{% endhint %}