Navigating the Studio
Get to know the modes and navigation available to you as you build your app
Screenshot of the studio
The studio is where you will do all of your building. The top menu and left sidebar is where you will handle configurations for your workspace. This section will focus on these two organizational structures. If you want to learn more about the panels you will use that house the components, tree, preview, flow and inspector, read on to the next section.

Top Menu

Let's take a look at the functionality in the top menu from left to right.
Top menu bar in the studio
Left
The left side of the top menu is to navigate and orient yourself
  • The Uiflow logo when clicked will provide a dropdown menu that will allow you to go to 'My Workspace' (a space to view all of your created apps) and an option to 'Create a New Project' (app) and finally an option to 'Logout' of Uiflow.
  • That's followed by the Design, Connect, and Logic workspace tabs:
    • The Design workspace, which is open by default when starting a new project in Studio, allows you to add components to layout and style your application.
    • The Connect workspace allows you to test and configure connections to APIs in a centralized workspace for use in Logic.
    • The Logic workspace allows you to define logic, build interactions, and connect your designs to data.
  • Clicking the dropdown (titled: main) will allow you to find or create a branch to work on.
Middle
In the middle part of the top menu, we see the title of the application you are building.
Right
The right side of the top menu consolidates icons for essential functions.
  • Last Auto-Save Timestamp
  • Save Disc - Manually saves current changes made to your app.
  • Undo / Redo- this allows you to undo changes to the previous state of your app or restore actions previously undone.
  • Play Icon - The button for previewing your app has moved to a new home. To preview your app, press the play icon in the top right header of the studio.
  • Publish button with a Rocket Icon - Clicking this button now presents you with a small pop-up window showing you information about where you'd like to publish your application to (environments).
In the left sidebar, while on the Design and Logic workspaces there are three buttons that can change the mode of your workspace.
  • Add a Component
  • Layers
  • Branching
The Studio defaults to the construction mode where you assemble and preview your app. After the Add A Component Icon, you will see the Layers Icon; with Uiflow you can create applications with multiple pages using our pages framework. You can now find the pages of your application in the Layers tab of the main lefthand panel. With Layers, we support creating new pages and grouping them into folders as well as generating the urls for your pages based on their organization within your folder structure Learn more about studio basics in this mode here.
While in the Connect workspace you'll see two different buttons which include:
In the Connect Catalog you can manage custom connections components and define your data structures in a clear manner.
Auth Config will allow you to integrate a system of authentication for your entire application. There is more information on how to do this here. Currently, Uiflow supports backend authentication integrations from Auth0, Firebase, Xano, Auth02, and Facebook.
Please Note: Branching is currently only available on paid tiers, but you can read more about it here.
Copy link
On this page
Top Menu
Left Sidebar