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

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. 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. 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.

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

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.