> ## 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](/docs/ui-customization/overview) and the [Template Variables](/docs/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`](/docs/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`](/docs/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`](/docs/api-reference/sdk/models/data-models#user) | Identified end-user object. |
| [`Attendee`](/docs/api-reference/sdk/models/data-models#attendee) | Active huddle attendee record (`userId`, `name`, plus per-attendee state). |
| [`HuddleMessage`](/docs/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](/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.