# 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](https://docs.digia.tech/studio-workspace/builder-tool/navigation-menu)

The [Navigation Menu](https://docs.digia.tech/studio-workspace/builder-tool/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](https://docs.digia.tech/studio-workspace/builder-tool/tool-bar)

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](https://docs.digia.tech/studio-workspace/builder-tool/pages-and-widgets-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](https://docs.digia.tech/studio-workspace/builder-tool/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](https://docs.digia.tech/studio-workspace/builder-tool/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.