> 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/properties-panel.md).

# Properties Panel

## ⚙️ Property Panel

The **Property Panel** is where you configure and customize each widget’s appearance, layout, and behavior. When you select a widget from the Canvas or Widget Tree, its properties are shown here.

***

### 🧱 Panel Structure

The panel is divided into two main sections:

***

#### 1. 🧩 Default Properties

This section appears for almost all widgets and contains three key groups:

**➕ Layout**

* **Visible:** Toggle widget visibility at runtime.
* **Width & Height:** Set dimensions (PX, %,).
* **Padding & Margin:** Control spacing inside and around the widget.
* **Alignment:** Use quick-align buttons to position elements horizontally or vertically.

**🎨 Appearance**

* **Fill Color:** Background color of the widget.
* **Border Radius:** Controls corner roundness.
* **Border:** Set border style, color, and width.

**⚡ Interactions**

* **onClick:** Define event-based actions like navigation, updating state, calling functions, etc.

***

#### 2. 📦 Additional Properties

Below the default properties, each widget shows **its own set of properties** depending on its type.

* For example, a **Text** widget may show font controls, while an **Image** widget will show source and fit options.
* These settings are contextual and may include content, media, data bindings, styling, and logic options.

***

> 📝 **Note:** Some widgets may not include all three default sections, and the additional properties are entirely dependent on the selected widget’s type and capabilities.

The Property Panel gives you full control over how a widget behaves and appears inside your app.