Working in the Studio
Let's take a high level look at the sections you can create in
Your workspace in the studio is made up of six panels. From left to right, they are:
  • Elements Panel: Elements are the visible and functional features of your app such as images, text, and units of logic.
  • Layers Panel: The Layers Panel shows the hierarchy of each element in your application.
  • Preview Panel: This section allows you to see what your app will look like even before you build it out.
  • Flow Panel: This is where you will dig into the details and hook up the logic for your apps.
  • Inspector Panel: The inspector is where you determine the styling and look of your application.
These six panels are where you will spend most of your time, so let's take a higher-level approach to find out what each of these panels is used for.

Element Panel

The element panel is on the left side of the screen in the studio workspace. It is organized into functional sections like UI, Data Types, and Logic. The search bar lets you find a component by name.
Once you have selected an element, you can drag it where you need in the preview, flow, or tree panel. Once dropped in your desired location, it will appear in all three and be ready for you to manipulate.

Layers Panel

The Layers Panel shows the hierarchy of each element in your application. If you need to know the context of an element in your application, you can look for it here.
Your location in the Layers Panel determines the view of the flow panel - you can only see direct children in the flow panel. Anytime you select an element, you will automatically navigate to wherever that element is located in the tree panel.
You may drag and drop elements around the tree to change the hierarchy of elements in the tree panel.

Preview Panel

This section allows you to see what your app will look like even before you build it out.
At the top of the Preview Panel, you will see icons for different views you can edit for, Desktop, Tablet, Phone horizontal, and Phone vertical. In addition, there's an input for manual width (in pixels) and Zoom % you can alter. Lastly, The arrow button farthest to the top right (next to the Publish button) will open your, in progress, app in a new window for browser previewing.
If you have multiple routes, the text field at the top will show you which route you are seeing. It will default to your home route, but if you add the router element and fill that with multiple routes you will be able to preview them by clicking the globe icon to the left of the input and choosing from a dropdown of available routes.
To select an element from the preview, you can double-click on it. This will make it the focus in the tree, preview, and flow panels.
In addition, the drop logic in the preview panel for components has been updated. Placing components in your design should feel a lot more natural. You now also get a preview of where your component will be placed before dropping it. See an example of this in action below:

Flow Panel

The flow panel now lives under the Logic workspace (accessed by clicking Logic option on the top left above the Element Panel) and is the area where you place elements and form connections between them to create the logic and functionality of your app. It is driven by an in-house language called FlowLang.
In the flow panel your app is surrounded by a white rectangle that serves a visual container of all of the elements you have added. You can see the location of the component in the app's hierarchy above the white rectangle. You can navigate up through your app by clicking these links.
If your flow panel has a lot of elements and interface nodes, it might be helpful to reorganize them to keep your workspace neat. Left-click and drag an element to move it to another place.

Inspector Panel

The inspector panel can be accessed via the Design workspace (accessed by clicking the Design option on the top left above the Element Panel). Every component has properties that define its appearance and behaviors.
The Styles tab enables you to make each component beautiful with styling. The State tab enables you to organize the information held in this component. While the Actions tab enables you to prepare your component for interactivity by exposing events that it can trigger or respond to.
Additional Note: The 2nd arrow in the screenshot above points to our Smart Menu which allows ease and quicker access to these areas with a more condensed version of highlighted and suggested settings in each of the areas.
Copy link
On this page
Element Panel
Layers Panel
Preview Panel
Flow Panel
Inspector Panel