> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Area Wireframe Variables

> Template variables exposed by the Area wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

<Note>
  New to wireframes? Start with [UI Customization Concepts](/docs/ui-customization/overview) and the [Template Variables](/docs/ui-customization/template-variables) overview.
</Note>

## Overview

The **Area** feature draws rectangle "area annotations" used to highlight regions of the page (often paired with a comment). The Area feature has limited wireframe support — no dedicated `*-wireframe` tag is registered for its primitives. The variables below describe the `componentConfig` exposed by `<velt-area-pin-portal>`:

| You want to… | Use | Example |
| - | - | - |
| Display a value as text | `<velt-data field="var" />` | `<velt-data field="componentConfig.areaPinAnnotation.from.name" />` |
| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfig.selected}"` |
| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-resizing': {componentConfig.isResizing}"` |

<Note>
  This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.<path>` form.
</Note>

## Component Config

| Variable | Type | Description | Example |
| - | - | - | - |
| `componentConfig.areaPinAnnotation` | [`AreaAnnotation`](/docs/api-reference/sdk/models/data-models#areaannotation) | The area annotation data — geometry, colour, author, and metadata. | `<velt-data field="componentConfig.areaPinAnnotation.from.name" />` |
| `componentConfig.areaPinAnnotationOnResize` | [`AreaAnnotation`](/docs/api-reference/sdk/models/data-models#areaannotation) | Mid-resize snapshot of the annotation. | *Internal — set during resize.* |
| `componentConfig.commentPinAnnotation` | [`CommentAnnotation`](/docs/api-reference/sdk/models/data-models#commentannotation) | Optional linked comment annotation. | `<velt-data field="componentConfig.commentPinAnnotation.comments.length" />` |
| `componentConfig.user` | [`User`](/docs/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `<velt-data field="componentConfig.user.name" />` |
| `componentConfig.selected` | `boolean` | Pin is currently selected. | `velt-class="'is-selected': {componentConfig.selected}"` |
| `componentConfig.hideAreaAnnotation` | `boolean` | Hide the area visual. | `velt-class="'is-hidden': {componentConfig.hideAreaAnnotation}"` |
| `componentConfig.areaAnnotationColor` | `string` | Border / overlay colour (default `'#625DF5'`). | *Internal — used to compute inline style.* |
| `componentConfig.areaProperties` | [`AreaProperty`](/docs/api-reference/sdk/models/data-models#areaproperty) | Geometry data — `top` / `left` / `width` / `height`. | *Internal — used to compute inline style.* |
| `componentConfig.isResizing` | `boolean` | User is currently resizing this pin. | `velt-class="'is-resizing': {componentConfig.isResizing}"` |
| `componentConfig.resizingOffset.top` | `number` | Vertical resize-handle offset. | *Internal — used to compute inline style.* |
| `componentConfig.resizingOffset.left` | `number` | Horizontal resize-handle offset. | *Internal — used to compute inline style.* |
| `componentConfig.offsetTop` | `number` | Vertical position offset. | *Internal — used to compute inline style.* |
| `componentConfig.offsetLeft` | `number` | Horizontal position offset. | *Internal — used to compute inline style.* |

## Type Reference

Types referenced by the variables above:

| Type | Description |
| - | - |
| [`User`](/docs/api-reference/sdk/models/data-models#user) | Identified end-user object. |
| [`CommentAnnotation`](/docs/api-reference/sdk/models/data-models#commentannotation) | Linked comment-annotation thread (when the area is paired with a comment). |
| [`AreaAnnotation`](/docs/api-reference/sdk/models/data-models#areaannotation) | Area-annotation data — geometry (`top`, `left`, `width`, `height`), colour, author, and metadata. |
| [`AreaProperty`](/docs/api-reference/sdk/models/data-models#areaproperty) | Geometry shape used by `componentConfig.areaProperties`. |

## Subcomponents

The Area feature has three customer-facing primitives. Only `area-pin-portal` registers a wireframe tag.

### `area-pin-portal`

The rendered area-pin overlay — the only Area primitive with a wireframe tag.

* **Public element:** `<velt-area-pin-portal>`

| Property | Value |
| - | - |
| Wireframe tag | No direct wireframe slot — the area-pin renders through its portal. Per-pin visual customization is not currently exposed via a dedicated `*-wireframe` tag. |

***

### `area-tool`

The trigger to draw a new area.

* **Public element:** `<velt-area-tool>`

| Property | Value |
| - | - |
| Wireframe tag | No `<velt-...-wireframe>` registration available on this primitive. |

***

### `area-container`

The per-document container that orchestrates all area pins.

* **Public element:** `<velt-area-container>`

| Property | Value |
| - | - |
| Wireframe tag | No `<velt-...-wireframe>` registration available on this primitive. |

## Related

* [Template Variables](/docs/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.