> For the complete documentation index, see [llms.txt](https://docs.digia.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digia.tech/studio-workspace/builder-tool/pages-and-widgets-panel.md).

# Pages and Widgets Panel

## 🧱 Page Selection & Widget Tree

This panel gives you full control over your app’s pages and UI structure. It’s divided into two main sections — **Page Selector** and **Widget Tree** — which help you manage and build your app's interface efficiently.

***

### 📄 Page Selector

At the top, you’ll see the **currently selected page name** (e.g., `HomePage`) with a dropdown indicator.

#### Features:

* **Clicking the page name** opens a dropdown to view and switch between different pages and components.
* **➕ Plus button** on the top right:
  * Add a new page
  * Add a reusable component
* Helps you organize your app’s structure by grouping screens and reusable UI elements.

***

### 🌲 Widget Tree

Below the page selector is the **Widget Tree**, a visual hierarchy of all the widgets present on the selected page.

#### Features:

* Displays the **structure of the UI** in a tree format.
* Each widget (e.g., `image1`, `text1`, `button1`) is shown as a node under parent widgets (e.g., `column1`, `body`, `HomePage`).
* Sections like `appBar`, `body`, and `bottomNavigationBar` are automatically detected where applicable.

#### What You Can Do:

* **Add Widgets**: Click the ➕ icon beside any widget to add a child widget inside it.
* **Reorder Widgets**: Drag and drop widgets to reorganize layout or nesting.
* **Edit Widget Names**: Rename widgets for better readability and maintenance.
* **Right-click Options**:
  * Delete
  * Copy / Paste
  * Duplicate
  * Wrap with container or column
  * Move up/down

> 📝 Tip: Use the **search** icon to quickly locate widgets in large trees, and the **sort** icon to organize or collapse sections.

***

This panel is your central workspace for defining and managing how your app looks and behaves.