> ## 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](/ui-customization/overview) and the [Template Variables](/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`](/api-reference/sdk/models/data-models#user)                     | Identified end-user (used by `componentConfig.selections.<i>.user`).    |
| [`CursorPosition`](/api-reference/sdk/models/data-models#cursorposition) | Selection bounding-rect shape (`top`, `left`, `right`, `bottom`).       |
| [`Selection`](/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](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.