Explore the interface

Workspace dashboard

The left side panel of the workspace dashboard shows all your applications and modules, as well as recently opened ones. From there, you can quickly navigate between apps, modules, and application pages. You can hide the menu bar or expand it.

To open application settings, click on the three dots next to the app's name. From this menu, you can also duplicate, export or delete an app.

In the upper right corner of the dashboard, you can switch between environments - dev, staging or prod. The Edit app button will take you to the Builder where you can edit your 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 list of Apps

• Connect Git (available in the Enterprise plan)

• Undo/Redo buttons

• Screen adaptive controls

• Time stamp of the last saved changes

• Release button

• Finish editing button

1. Left side panel.

It includes the following elements:

a. Components - displays a list of all UI components that you can drag and drop to the working area

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. Data sources - a place where you can connect your databases and APIs

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

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

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

3. Footer.

The footer contains:

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 UI Bakery app are saved automatically.