> 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/canvas-area.md).

# Canvas Area

## 🎨 Canvas Area

The **Canvas Area** is your visual playground where you build, arrange, and preview your app's user interface. It gives you a real-time preview of your current screen, lets you interact with widgets directly, and provides controls to customize the design experience.

***

### 🧱 Canvas Layout

The canvas is divided into three key parts:

#### 1. 📂 Widget List Toggle (Top-Left Button)

* Located in the upper-left corner.
* Clicking this button opens or collapses the **widget list panel**, allowing you to browse and drag widgets into the canvas.
* Use it to quickly access your available components and design elements.

***

#### 2. 🖼️ Page Frame (Center)

* This is the **actual visual layout** of your app screen.
* The selected page (e.g., `HomePage`) is rendered here as it would appear in the final app.
* You can:
  * **Select widgets** directly by clicking them
  * **Drag to reposition** (if layout allows)
  * See widget outlines, labels (e.g., `text1`), and selection states for active elements

***

#### 3. 🛠️ Top Bar Controls (Above the Page Frame)

These tools enhance your editing workflow:

* **Undo / Redo Buttons**: Quickly reverse or reapply your recent changes.
* **Canvas Background Color**: Select a background color for the canvas (does not affect app UI).
* **Light/Dark Toggle**: Preview your screen in light or dark theme if supported.
* **Preview Mode Button**: Switch from editing mode to live preview — test interactions, navigation, and animations.

***

### 🔍 Zoom Controls (Top-Right Corner)

* Allows zooming in/out of the canvas.
* Useful for working on large layouts or closely inspecting spacing and alignment.
* You can also zoom in and out on
  * Mac using Trackpad pinch in/out and pan using 2 fingers
  * Linux and Windows using Ctrl + 2 finger

***

> 💡 Tip: Selecting a widget from the canvas will auto-highlight it in the Widget Tree, making it easier to modify properties or manage nesting.

The canvas gives you full control over how your app looks and feels — instantly.