# 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](/studio-workspace/builder-tool/navigation-menu.md)

The [Navigation Menu](/studio-workspace/builder-tool/navigation-menu.md) 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](/studio-workspace/builder-tool/tool-bar.md)

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](/studio-workspace/builder-tool/pages-and-widgets-panel.md)

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](/studio-workspace/builder-tool/canvas-area.md)

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](/studio-workspace/builder-tool/properties-panel.md)

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/studio-workspace/builder-tool.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.