> ## 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.

# Arrows Wireframe Variables

> Template variables exposed by the Arrows feature — read them with velt-data, velt-if, and velt-class once wireframe-tag interpolation ships.

> [!WARNING]
>
> **Limited support.** Arrows do **not** currently expose `<velt-...-wireframe>` tags, so `velt-data` / `velt-if` / `velt-class` interpolation is not yet available on this feature. Until wireframe-tag registration ships, customize Arrows through CSS — see [Parts](https://velt.dev/docs/ui-customization/features/async/arrows/parts.md), [Variables](https://velt.dev/docs/ui-customization/features/async/arrows/variables.md), and [Custom Button](https://velt.dev/docs/ui-customization/features/async/arrows/custom-button.md). The variables below are documented for completeness so you know what the runtime model looks like.

> [!NOTE]
>
> New to wireframes? Start with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) and the [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) overview.

## Overview

The **Arrows** feature draws directional arrow annotations on the page. Once wireframe-tag registration ships, the variables below will be available inside any `<velt-arrow-...-wireframe>` tag via three forms:

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

> [!NOTE]
>
> This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.<path>` form. The variables below are documented for completeness; wireframe-tag interpolation is not yet supported (see warning above).

## Component Config

| Variable | Type | Description | Example |
| - | - | - | - |
| `componentConfig.arrowPinAnnotation` | [`ArrowAnnotation`](https://velt.dev/docs/api-reference/sdk/models/data-models#arrowannotation) | The arrow annotation data — includes start / end positions, colour, and author. | `<velt-data field="componentConfig.arrowPinAnnotation.from.name" />` |
| `componentConfig.user` | [`User`](https://velt.dev/docs/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `<velt-data field="componentConfig.user.name" />` |
| `componentConfig.targetElement` | `HTMLElement` | DOM target the arrow is anchored to. | *Internal — DOM reference.* |
| `componentConfig.annotationDragging` | `boolean` | Arrow is currently being dragged. | `velt-class="'is-dragging': {componentConfig.annotationDragging}"` |
| `componentConfig.dragPosition` | `{ top: number; left: number }` \| `null` | Live drag position used to compute inline style. | *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.* |
| `componentConfig.selectedAnnotationsMap` | [`SelectedAnnotationsMap`](https://velt.dev/docs/api-reference/sdk/models/data-models#selectedannotationsmap) | Map keyed by `annotationId` → `CommentAnnotation`. Truthy when that annotation is selected. | `velt-class="'is-selected': {componentConfig.selectedAnnotationsMap[componentConfig.arrowPinAnnotation.annotationId]}"` |

## Type Reference

Types referenced by the variables above:

| Type | Description |
| - | - |
| [`User`](https://velt.dev/docs/api-reference/sdk/models/data-models#user) | Identified end-user object. |
| [`ArrowAnnotation`](https://velt.dev/docs/api-reference/sdk/models/data-models#arrowannotation) | Arrow-annotation data — start / end positions, colour, author, and metadata. |
| [`SelectedAnnotationsMap`](https://velt.dev/docs/api-reference/sdk/models/data-models#selectedannotationsmap) | Selection-state map keyed by `annotationId`. |

## Subcomponents

The four primitives below make up the Arrows feature. None of them currently expose a `<velt-...-wireframe>` registration — see the warning at the top of the page.

### `arrows-tool`

The trigger to draw a new arrow.

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

| Property | Value |
| - | - |
| Wireframe tag | No `<velt-...-wireframe>` registration available — see warning at top of page. |

***

### `arrow-pin`

A placed arrow on the document.

* **Public element:** `<velt-arrow-pin>`

| Property | Value |
| - | - |
| Wireframe tag | No `<velt-...-wireframe>` registration available — see warning at top of page. |

***

### `arrow-pin-portal`

The per-pin overlay portal that renders the arrow visual.

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

| Property | Value |
| - | - |
| Wireframe tag | No `<velt-...-wireframe>` registration available — see warning at top of page. |

***

### `arrows-container`

The per-document orchestrator that hosts every placed arrow.

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

| Property | Value |
| - | - |
| Wireframe tag | No `<velt-...-wireframe>` registration available — see warning at top of page. |

## Related

* [Arrows — Parts](https://velt.dev/docs/ui-customization/features/async/arrows/parts.md) — CSS `::part(...)` hooks for the arrow tool button.
* [Arrows — Variables](https://velt.dev/docs/ui-customization/features/async/arrows/variables.md) — CSS variables for the arrow visual.
* [Arrows — Custom Button](https://velt.dev/docs/ui-customization/features/async/arrows/custom-button.md) — full custom-button overrides.
* [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) — 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.