As you open UI Bakery, you see a list of all your applications on the left sidebar and the last application that you have opened. From the left sidebar, you can quickly navigate between your applications and application pages. The sidebar can be either hidden or expanded.
To open an application's settings, duplicate or delete a project, click on a three-dots button near an app's name.
In the upper right corner of the page, you can switch between the environments to see what the app looks like. Also, to start editing the app by clicking the Edit app button.
Depending on the chosen template, your working area can be either blank or already include some UI elements.
The UI Bakery app is live in edit mode. That means that you can edit your app and test it right away. By click, you can execute triggers and load data.
Header contains an App state modal button, an indicator of Actions execution, Undo and Redo buttons, Publish button, and Preview button that hides all the sidebars.
Left sidebar includes the menu with the following elements:
App Structure showing the current page element structure.
Components including the list of all the UI components that you can drag and drop to the working area.
Pages containing the list of your app pages, and allowing you to create or update any page.
Data sources – a place where you can connect your databases and APIs to your UI.
The left sidebar also has a Pin button allowing you to pin the sidebar or unpin it. When unpinned, it will hide automatically once you click on the working area.
Workingarea is a part of the interface where you can assemble your application page from UI components.
Right sidebar displays the settings of the currently selected UI component. It includes 2 tabs:
Main settings & Structure
Appearance & Style
Bottom area contains the Actions panel with all the application Actions. There, you can create and edit Actions, run them, debug the result, and check the action results and errors.