> ## 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](./parts), [Variables](./variables), and [Custom Button](./custom-button). The variables below are documented for completeness so you know what the runtime model looks like.
</Warning>

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

## 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).
</Note>

## Component Config

| Variable                                 | Type                                                                                     | Description                                                                                 | Example                                                                                                                 |
| ---------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `componentConfig.arrowPinAnnotation`     | [`ArrowAnnotation`](/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`](/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`](/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`](/api-reference/sdk/models/data-models#user)                                     | Identified end-user object.                                                  |
| [`ArrowAnnotation`](/api-reference/sdk/models/data-models#arrowannotation)               | Arrow-annotation data — start / end positions, colour, author, and metadata. |
| [`SelectedAnnotationsMap`](/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](./parts) — CSS `::part(...)` hooks for the arrow tool button.
* [Arrows — Variables](./variables) — CSS variables for the arrow visual.
* [Arrows — Custom Button](./custom-button) — full custom-button overrides.
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.