Overview
The main elements of Flowrabbit's editor are: the infinity canvas, the top bar, the left panel, and the right panel.
This article will summarize their most important functions. If you want to learn more about each element (e.g., specific buttons or settings), take a look at the Editor Chapter, click on the element's name for a detailed article, or use the search function in our Wiki!
The Infinity Canvas
The infinity canvas is just what it sounds like: your canvas to build any application! This is where you will place screens and widgets, assembling your application and adding connections between screens and widgets to add logic and functionality. When you start creating a new application, this main part of the screen will be empty, waiting for you to start adding screens!
You can navigate around the canvas by scrolling, swiping, and zooming. Some options for zooming can be found in the top bar; read the next paragraph to learn more.
The Topbar
Here you can find all the most important tools for creating and editing your application.
Flowrabbit Icon
The Flowrabbit Icon in the left corner is where you can find settings to adjust your editor's look and behavior, the theme (e.g., default colors) of your application, the option to save a duplicate of your application, and return to your app settings.
Main Tools
Next to the Flowrabbit Icon, you can find your main tools for creating screens, adding components and widget and opening the Flowrabbit AI companion.
Context-Sensitive Tools
In the middle of the top bar, you can find some context-sensitive tools. They become visible as soon as you have selected an element (component or widget) or a group of elements. You can create reusable components, bring elements forwards or backwards, inspect the code associated with the element you selected, and create or remove groups.
Views, Preview, Zoom and Help Buttons
On the right side of the top bar are some important buttons. The "Design" and "Data & Logic" buttons let you switch between the two different views. The "Preview" button lets you run your application to test it. The current zoom setting is shown next to the "Run" button; here you can adjust your view of the editor and turn grids, the ruler, and the layer panel on the left on and off. All the way on the right, you can find a Questionmark button; this opens the Flowrabbit Wiki.
Left Panel
The panel on the left side of the screen shows all the layers of your application. Here you can see all the elements and the order in which they are placed on top of each other. You can see any groups you have created and which elements are part of which screen. You can select elements here, and you can toggle their visibility by clicking on the eye icon that appears next to their name in the panel.
Right Panel
This panel appears as soon as you have selected any element (screen, component, or widget). This is where you can find all the settings that you need to customize the element. On top of the panel, you can find alignment settings for your elements. You can change the appearance of components and screens in the "Design" View, and you can add Data Binding (Variables) and Actions in the "Data & Logic" View. When you have a Widget selected, you can open the configuration of the widget in the right panel.