Builder Tool
🛠️ Builder Interface Overview
When you open a project, the builder is divided into five main sections that work together to help you visually design and configure your app:
1. 📚 Navigation Menu
The Navigation Menu is located on the far left of the screen. It allows you to switch between different functional areas of the project:
Builder – Design your app visually.
Global State – Manage shared app state and variables.
API – Configure external data connections.
Theme – Set colors, typography, and styles.
Functions – Write reusable custom logic.
Versioning & Release – Create and manage release versions.
Members – Invite and manage team access.
Settings – Project-level configuration.
2. 🧰 Toolbar
Located at the top of the canvas area, the Toolbar provides quick access to project-level actions:
Notifications – View system updates and alerts.
Bug Reports – Monitor known issues or system errors.
Connect to GitHub – Link your project to a GitHub repository for version control.
Create Version – Take a snapshot of the current project state for release or rollback.
3. 📄 Pages & Widget Panel
Positioned on the left side of the canvas:
Shows the current page name, which can be clicked to switch between pages and components.
The ➕ button allows you to add new pages or reusable components.
The Widget Tree shows the hierarchical structure of the current screen's UI.
You can reorder, nest, delete, duplicate, or wrap widgets directly in this panel.
4. 🎨 Canvas Area
The central workspace where you visually build your app UI:
Displays a live frame of the selected page as it would appear on a mobile device.
Includes controls at the top to:
Undo/Redo changes
Change canvas background color
Toggle preview mode
A widget list toggle on the top-left corner allows you to access and drag new widgets onto the canvas.
5. ⚙️ Properties Panel
Located on the right side of the canvas, this panel updates based on the selected widget:
Includes default properties for layout, appearance, and interactions.
Below those, it displays widget-specific properties depending on the selected component (e.g., text, image, button).
Allows binding values, adding logic, and customizing styles in a structured manner.
Each of these sections plays a key role in making the builder intuitive, flexible, and powerful for visual app development.
Last updated