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

# Huddle Wireframe Variables

> Template variables exposed by the Huddle 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 **Huddle** feature powers real-time audio / video / screen-share huddle rooms. Variables below are available inside any `<velt-huddle-...-wireframe>` tag (or the per-attendee tile wireframes) via three forms:

| You want to…              | Use                         | Example                                                        |
| ------------------------- | --------------------------- | -------------------------------------------------------------- |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="componentConfig.huddleAttendees.length" />` |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{componentConfig.meetingJoined}"`                    |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'in-huddle': {componentConfig.meetingJoined}"`    |

<Note>
  This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.<path>` form. Each wireframe primitive carries its own `componentConfigSignal` — the root container, the tool button, and each per-attendee tile expose different variable sets (documented separately below).
</Note>

## Component Config — Huddle (root)

State on the `<velt-huddle>` root container. These variables describe the active huddle room and its attendees.

| Variable                                              | Type                                                           | Description                                     | Example                                                                                          |
| ----------------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| `componentConfig.user`                                | [`User`](/api-reference/sdk/models/data-models#user) \| `null` | Currently identified end-user.                  | `<velt-data field="componentConfig.user.name" />`                                                |
| `componentConfig.meetingJoined`                       | `boolean`                                                      | Local user is currently in a huddle.            | `velt-class="'in-huddle': {componentConfig.meetingJoined}"`                                      |
| `componentConfig.isDragging`                          | `boolean`                                                      | Floating huddle panel is being dragged.         | `velt-class="'dragging': {componentConfig.isDragging}"`                                          |
| `componentConfig.huddleCursorAvailableByAttendeeId`   | `Record<string, boolean>`                                      | Per-attendee cursor stream is available.        | `velt-class="'cursor-on': {componentConfig.huddleCursorAvailableByAttendeeId[attendee.userId]}"` |
| `componentConfig.localStream`                         | `MediaStream` \| `null`                                        | Local user's media stream.                      | `velt-if="{componentConfig.localStream}"`                                                        |
| `componentConfig.localStreamState.audioState`         | `boolean`                                                      | Local microphone is on.                         | `velt-class="'audio-on': {componentConfig.localStreamState.audioState}"`                         |
| `componentConfig.localStreamState.videoState`         | `boolean`                                                      | Local camera is on.                             | `velt-class="'video-on': {componentConfig.localStreamState.videoState}"`                         |
| `componentConfig.localStreamState.screenSharingState` | `boolean`                                                      | Local screen-share is on.                       | `velt-class="'screen-on': {componentConfig.localStreamState.screenSharingState}"`                |
| `componentConfig.huddleAttendees`                     | `Attendee[]`                                                   | Active attendees in the huddle.                 | `<velt-data field="componentConfig.huddleAttendees.length" />`                                   |
| `componentConfig.remoteStreamsByUserId`               | `Record<string, Record<string, MediaStream>>`                  | Remote streams keyed by user id then stream id. | *Internal — not user-addressable.*                                                               |
| `componentConfig.localScreenSharingStream`            | `MediaStream` \| `null`                                        | Local screen-share stream.                      | `velt-if="{componentConfig.localScreenSharingStream}"`                                           |
| `componentConfig.screenSharing`                       | `{ attendee?: Attendee; stream?: MediaStream }` \| `null`      | Active remote screen-share, if any.             | `velt-if="{componentConfig.screenSharing.stream}"`                                               |
| `componentConfig.videoStateEnabledInPastByUserId`     | `Record<string, boolean>`                                      | Whether each user has previously enabled video. | `velt-if="{componentConfig.videoStateEnabledInPastByUserId[attendee.userId]}"`                   |
| `componentConfig.peerConnectionStateMapByUserId`      | `Record<string, string>`                                       | WebRTC peer-connection state per user.          | `velt-class="'peer-{componentConfig.peerConnectionStateMapByUserId[attendee.userId]}': true"`    |

## Component Config — Huddle Tool

State on the `<velt-huddle-tool>` trigger button.

| Variable                                      | Type                                                           | Description                                                 | Example                                                                                                            |
| --------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `componentConfig.type`                        | `'audio'` \| `'video'` \| `'presentation'` \| `'all'`          | Which controls the tool exposes.                            | `velt-class="'tool-{componentConfig.type}': true"`                                                                 |
| `componentConfig.screenSharingSupported`      | `boolean`                                                      | Browser supports screen-sharing.                            | `velt-if="{componentConfig.screenSharingSupported}"`                                                               |
| `componentConfig.disabled`                    | `boolean`                                                      | Tool is disabled by host configuration.                     | `velt-class="'is-disabled': {componentConfig.disabled}"`                                                           |
| `componentConfig.meetingJoined`               | `boolean`                                                      | Local user is currently in a huddle.                        | `velt-class="'in-huddle': {componentConfig.meetingJoined}"`                                                        |
| `componentConfig.joinedHuddleToolComponentId` | `string` \| `null`                                             | Id of the tool that owns the active huddle.                 | `velt-class="'is-active-tool': '{componentConfig.joinedHuddleToolComponentId} === {componentConfig.componentId}'"` |
| `componentConfig.positions`                   | `any`                                                          | Per-attendee floating positions.                            | *Internal — used to compute inline style.*                                                                         |
| `componentConfig.user`                        | [`User`](/api-reference/sdk/models/data-models#user) \| `null` | Currently identified end-user.                              | `<velt-data field="componentConfig.user.name" />`                                                                  |
| `componentConfig.huddleAttendees`             | `Attendee[]`                                                   | Active attendees.                                           | `<velt-data field="componentConfig.huddleAttendees.length" />`                                                     |
| `componentConfig.isFirstComponent`            | `boolean`                                                      | True only on the first instance of the element on the page. | `velt-if="{componentConfig.isFirstComponent}"`                                                                     |
| `componentConfig.bannerRemoved`               | `boolean`                                                      | User dismissed the join banner.                             | `velt-class="'banner-hidden': {componentConfig.bannerRemoved}"`                                                    |

## Context-Specific Variables

The per-attendee tile primitives (`<velt-audio-huddle-user-wireframe>` and `<velt-video-huddle-user-wireframe>`) carry a **per-attendee** `componentConfigSignal`. These variables are only resolvable inside the tile wireframes.

| Variable                     | Type          | Available in                                                               | Example                                               |
| ---------------------------- | ------------- | -------------------------------------------------------------------------- | ----------------------------------------------------- |
| `componentConfig.attendee`   | `Attendee`    | `<velt-audio-huddle-user-wireframe>`, `<velt-video-huddle-user-wireframe>` | `<velt-data field="componentConfig.attendee.name" />` |
| `componentConfig.stream`     | `MediaStream` | Same tiles.                                                                | `velt-if="{componentConfig.stream}"`                  |
| `componentConfig.isLocal`    | `boolean`     | Same tiles.                                                                | `velt-class="'is-local': {componentConfig.isLocal}"`  |
| `componentConfig.color`      | `string`      | Same tiles. Avatar / accent colour for this attendee.                      | *Internal — used to compute inline style.*            |
| `componentConfig.gainVolume` | `number`      | Same tiles. Audio gain level driving the speaking-ring animation.          | `<velt-data field="componentConfig.gainVolume" />`    |

The screen-share viewer (`<velt-screen-sharing-huddle-wireframe>`) reads `componentConfig.screenSharing.stream` and `componentConfig.screenSharing.attendee` from the root config.

## Type Reference

Types referenced by the variables above:

| Type                                                                   | Description                                                                |
| ---------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| [`User`](/api-reference/sdk/models/data-models#user)                   | Identified end-user object.                                                |
| [`Attendee`](/api-reference/sdk/models/data-models#attendee)           | Active huddle attendee record (`userId`, `name`, plus per-attendee state). |
| [`HuddleMessage`](/api-reference/sdk/models/data-models#huddlemessage) | A text message sent within a huddle's in-call chat panel.                  |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `huddle-tool`

The join / leave button + state controls customers place in their toolbar.

* **Public element:** `<velt-huddle-tool>`
* **Wireframe tag:** `<velt-huddle-tool-wireframe>`

| Property        | Value                                                                |
| --------------- | -------------------------------------------------------------------- |
| Extra variables | See [Component Config — Huddle Tool](#component-config-huddle-tool). |

***

### `huddle` (root container)

The huddle room container — renders attendees and the screen-share viewer.

* **Public element:** `<velt-huddle>`
* **Wireframe tag:** `<velt-huddle-wireframe>`

| Property        | Value                                                                  |
| --------------- | ---------------------------------------------------------------------- |
| Extra variables | See [Component Config — Huddle (root)](#component-config-huddle-root). |
| `shouldShow`    | Renders when `componentConfig.meetingJoined === true`.                 |

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltHuddleWireframe velt-if="{componentConfig.meetingJoined}">
      <VeltAudioHuddleUserWireframe />
      <VeltVideoHuddleUserWireframe />
      <VeltScreenSharingHuddleWireframe
        velt-if="{componentConfig.screenSharing.stream}" />
      <VeltHuddleMenuPanelWireframe />
    </VeltHuddleWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-huddle-wireframe velt-if="{componentConfig.meetingJoined}">
      <velt-audio-huddle-user-wireframe></velt-audio-huddle-user-wireframe>
      <velt-video-huddle-user-wireframe></velt-video-huddle-user-wireframe>
      <velt-screen-sharing-huddle-wireframe
        velt-if="{componentConfig.screenSharing.stream}"></velt-screen-sharing-huddle-wireframe>
      <velt-huddle-menu-panel-wireframe></velt-huddle-menu-panel-wireframe>
    </velt-huddle-wireframe>
    ```
  </Tab>
</Tabs>

***

### `audio-huddle-user`

Per-attendee tile for audio-only huddles. Renders a small avatar with a speaking ring.

* **Public element:** `<velt-audio-huddle-user>`
* **Wireframe tag:** `<velt-audio-huddle-user-wireframe>`

| Property        | Value                                                                                                                                                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | Per-attendee `componentConfig.attendee`, `stream`, `isLocal`, `color`, `gainVolume` — see [Context-Specific Variables](#context-specific-variables). |

***

### `video-huddle-user`

Per-attendee tile for video huddles. Shows the live video feed.

* **Public element:** `<velt-video-huddle-user>`
* **Wireframe tag:** `<velt-video-huddle-user-wireframe>`

| Property        | Value                                             |
| --------------- | ------------------------------------------------- |
| Extra variables | Same per-attendee context as `audio-huddle-user`. |

***

### `screen-sharing-huddle`

The screen-share viewer.

* **Public element:** `<velt-screen-sharing-huddle>`
* **Wireframe tag:** `<velt-screen-sharing-huddle-wireframe>`

| Property        | Value                                                                                                                               |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | None at this level — read `componentConfig.screenSharing.stream` and `componentConfig.screenSharing.attendee` from the root config. |
| `shouldShow`    | Renders when `componentConfig.screenSharing.stream` is truthy.                                                                      |

***

### `huddle-menu-panel`

In-huddle controls drawer (mute / unmute / video / screen / leave / settings).

* **Public element:** `<velt-huddle-menu-panel>`
* **Wireframe tag:** `<velt-huddle-menu-panel-wireframe>`

| Property        | Value                                                                                                      |
| --------------- | ---------------------------------------------------------------------------------------------------------- |
| Extra variables | None beyond the root `componentConfig` (mute / video state read via `componentConfig.localStreamState.*`). |

***

### `huddle-messages-panel`

The text-chat panel inside the huddle.

* **Public element:** `<velt-huddle-messages-panel>`
* **Wireframe tag:** `<velt-huddle-messages-panel-wireframe>`

| Property        | Value                                   |
| --------------- | --------------------------------------- |
| Extra variables | None beyond the root `componentConfig`. |

## Putting it together

A typical huddle room that swaps between the join trigger and the active room, shows a per-attendee video tile, and surfaces the screen-share viewer when one is active:

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltHuddleToolWireframe>
      <button
        className="my-huddle-trigger"
        velt-class="'is-disabled': {componentConfig.disabled}, 'is-active': {componentConfig.meetingJoined}">
        <span velt-if="!{componentConfig.meetingJoined}">Join huddle</span>
        <span velt-if="{componentConfig.meetingJoined}">Leave huddle</span>
      </button>
    </VeltHuddleToolWireframe>

    <VeltHuddleWireframe velt-if="{componentConfig.meetingJoined}">
      <div className="my-huddle-grid">
        <VeltVideoHuddleUserWireframe>
          <div className="my-tile" velt-class="'is-local': {componentConfig.isLocal}">
            <video />
            <span><velt-data field="componentConfig.attendee.name" /></span>
          </div>
        </VeltVideoHuddleUserWireframe>
      </div>

      <VeltScreenSharingHuddleWireframe
        velt-if="{componentConfig.screenSharing.stream}">
        <video />
        <span>
          <velt-data field="componentConfig.screenSharing.attendee.name" /> is sharing their screen
        </span>
      </VeltScreenSharingHuddleWireframe>

      <VeltHuddleMenuPanelWireframe />
    </VeltHuddleWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-huddle-tool-wireframe>
      <button class="my-huddle-trigger"
              velt-class="'is-disabled': {componentConfig.disabled}, 'is-active': {componentConfig.meetingJoined}">
        <span velt-if="!{componentConfig.meetingJoined}">Join huddle</span>
        <span velt-if="{componentConfig.meetingJoined}">Leave huddle</span>
      </button>
    </velt-huddle-tool-wireframe>

    <velt-huddle-wireframe velt-if="{componentConfig.meetingJoined}">
      <div class="my-huddle-grid">
        <velt-video-huddle-user-wireframe>
          <div class="my-tile" velt-class="'is-local': {componentConfig.isLocal}">
            <video></video>
            <span><velt-data field="componentConfig.attendee.name"></velt-data></span>
          </div>
        </velt-video-huddle-user-wireframe>
      </div>

      <velt-screen-sharing-huddle-wireframe
        velt-if="{componentConfig.screenSharing.stream}">
        <video></video>
        <span>
          <velt-data field="componentConfig.screenSharing.attendee.name"></velt-data> is sharing their screen
        </span>
      </velt-screen-sharing-huddle-wireframe>

      <velt-huddle-menu-panel-wireframe></velt-huddle-menu-panel-wireframe>
    </velt-huddle-wireframe>
    ```
  </Tab>
</Tabs>

## Related

* [Huddle — Parts](./parts) — CSS `::part(...)` hooks for the huddle primitives.
* [Huddle — Variables](./variables) — CSS variables for the huddle visual.
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.