> ## 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](/ui-customization/overview) and the [Template Variables](/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`](/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`](/api-reference/sdk/models/data-models#areaannotation)       | Mid-resize snapshot of the annotation.                             | *Internal — set during resize.*                                              |
| `componentConfig.commentPinAnnotation`      | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | Optional linked comment annotation.                                | `<velt-data field="componentConfig.commentPinAnnotation.comments.length" />` |
| `componentConfig.user`                      | [`User`](/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`](/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`](/api-reference/sdk/models/data-models#user)                           | Identified end-user object.                                                                       |
| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | Linked comment-annotation thread (when the area is paired with a comment).                        |
| [`AreaAnnotation`](/api-reference/sdk/models/data-models#areaannotation)       | Area-annotation data — geometry (`top`, `left`, `width`, `height`), colour, author, and metadata. |
| [`AreaProperty`](/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](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.