The Topbar
Here you can find all the most important tools for creating and editing your application. From left to right, there are several different elements:
Flowrabbit Icon
When you click on the Flowrabbit Icon in the left corner, you will be taken back to your Flowrabbit Dashboard, where you can see all your Flowrabbit Projects.
Topbar Burger-Menu
Clicking on the Burger-Menu (three horizontal Bars) in the left corner opens a menu with a few options:
| Duplicate | Creates a copy of the project you are currently working on. |
| Change Screen Size | Lets you change the standard screen size (Smartphone or Desktop) in the current project. |
| Secret Vars | Open a menu with all secret variables in the current project, for example here you can find you OpenAI Key. |
| Delete App | Delete the Project you are currently working on. |
| Change Light & Dark mode | This lets you change the Flowrabbit Editor Theme to light or dark mode. |
| Keyboard Shortcuts | Opens an overview of all shortcuts. |
| Back to App Dashboard | This takes you back to the dashboard with all your Flowrabbit Projects. |
Design and Flow-Buttons
Next to the Flowrabbit Icon, you can find the 'Design' and 'Flow' Buttons.
The 'Design' Button switches your view to the 'Design' View, allowing you to edit the look of your application. Learn more about it here: Views The 'Flow' Button switches your view to the 'Flow' View, allowing you to add and edit logic and functionality to your application. Learn more about it here: Views
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 or a group of elements. From left to right they are:
Create a Reusable Component:
This will create a new component from your selection; you can then find this custom component in the Widget selection under "My Widgets."
Clone Selection:
This will create a duplicate of all currently selected elements. You can also use the C-Key as a shortcut.
Layer Management:
This opens a menu for bringing your selected item all the way forward or backward or sending it one layer to the front or back. You can open an overview of the layers in your project using the buttons near the panel on the left side.
Create Group:
This creates a group containing all the elements you have currently selected. (This becomes visible when you select multiple elements)
Remove Group:
Ungroups the elements in the selected group. (This becomes visible when selecting a group)
Distribute Selection:
Creates equal spacing between all elements currently selected. (This becomes visible when you select multiple elements)
The right side of the topbar also holds some important buttons:
Zoom and Grid:
Clicking on the current zoom setting (e.g., 100%) opens some options for zooming and showing different elements in the editor. You can choose whether to show a grid on your screens, whether elements should snap to this grid, and you can click "configure grid" to customize the size of the grid. You can choose whether distances should be specifically labeled and whether rulers and comments should be shown.
Bugs and Feeback Reporting:
Click the bug icon to open Flowrabbit's built-in feedback tool. Here you can choose to report issues, request features, or send a message to our team. Please feel free to report any issues you come across and never hesitate to reach out to us!
Help Center / Flowrabbit Wiki:
Click the book icon to open the Flowrabbit Help Center. Here you can search for Wiki entries or use the 'Ask AI' Feature to get answers tailored to your question.
Preview:
This lets you run your application within the Editor to use and test it. Learn more about running your applications here: Using Flowrabbit Applications.
Publish:
Next to the 'Preview' Button, you can find the 'Publish' Button. This is where you can create links to share your App. Learn more here: Publishing your Flowrabbit App