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

# Live Selection Wireframe Variables

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

<Warning>
  **Limited support.** Live Selection does **not** currently expose a `<velt-...-wireframe>` tag, so `velt-data` / `velt-if` / `velt-class` interpolation is not yet available on this feature. Until wireframe-tag registration ships, customize Live Selection through CSS. 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](/docs/ui-customization/overview) and the [Template Variables](/docs/ui-customization/template-variables) overview.
</Note>

## Overview

The **Live Selection** feature renders the floating "user X is selecting this" indicator anchored to a remote user's current selection range. The variables below describe the runtime model. Once wireframe-tag interpolation ships for this feature, they will be readable via three forms:

| You want to… | Use | Example |
| - | - | - |
| Display a value as text | `<velt-data field="var" />` | `<velt-data field="componentConfig.selections.0.user.name" />` |
| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfig.selections.length} > 0"` |
| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'pos-{componentConfig.userIndicatorPosition}': true"` |

<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.position` | `CursorPosition` \| `null` | The selection's current position (top / left / right / bottom rect). | *Internal — used to compute inline style.* |
| `componentConfig.userIndicatorPosition` | `'start'` \| `'end'` \| ... | Where the indicator is anchored relative to the selection range. | `velt-class="'pos-{componentConfig.userIndicatorPosition}': true"` |
| `componentConfig.userIndicatorType` | `'Avatar'` \| `'Name'` \| ... | What to show — avatar, name label, or both. | `velt-class="'type-{componentConfig.userIndicatorType}': true"` |
| `componentConfig.overlayPosition` | `{ originX, originY, overlayX, overlayY }` | CDK overlay anchoring config. | *Internal — CDK overlay config.* |
| `componentConfig.selections` | `Selection[]` | Active remote selections. Each entry has `user` (who's selecting) plus the selection range data. | `<velt-data field="componentConfig.selections.length" />` |

## Type Reference

Types referenced by the variables above:

| Type | Description |
| - | - |
| [`User`](/docs/api-reference/sdk/models/data-models#user) | Identified end-user (used by `componentConfig.selections.<i>.user`). |
| [`CursorPosition`](/docs/api-reference/sdk/models/data-models#cursorposition) | Selection bounding-rect shape (`top`, `left`, `right`, `bottom`). |
| [`Selection`](/docs/api-reference/sdk/models/data-models#selection) | Remote-selection record — includes `user` and the selection range data. |

## Subcomponents

### `selection-element-portal`

The floating user-indicator (avatar / name / colour bar) anchored to a remote user's current selection range.

* **Public element:** `<velt-selection-element-portal>`
* **Wireframe (HTML):** *No direct wireframe slot — the selection feature has limited wireframe support; per-element visual customization is not currently exposed via a dedicated `*-wireframe` tag.*
* **Wireframe (React):** *No direct wireframe slot.*

| Property | Value |
| - | - |
| Extra variables | None — the portal sees the full `componentConfig` shown above. |
| `shouldShow` | No primitive-level override — render is controlled by whether `componentConfig.selections` has any active entries. |

## Related

* [Live Selection](./live-selection) — wireframe overview and default markup for this primitive.
* [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.