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 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 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 - dev, staging or prod. The Share button 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.

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.

UI Bakery app is live in Edit mode. That means that you can edit your app and test it right away.

Let's have a look at the Builder interface👇

1. Header

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

• Release button

• Share button - invite users to your app, manage their access, and make the app public

2. Left side panel

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 - here you can manage all your hosted databases.

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

The left side panel is resizable - you can adjust its size to suit your workflow and build more comfortably.

3. Working area

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

4. Right side panel

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

5. Footer

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.

Changes made in the UI Bakery app are saved automatically.