Huddle Wireframe Variables

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

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}"`

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

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` \| `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` \| `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`	Identified end-user object.
`Attendee`	Active huddle attendee record (`userId`, `name`, plus per-attendee state).
`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.

`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).
`shouldShow`	Renders when `componentConfig.meetingJoined === true`.

React / Next.js
Other Frameworks

<VeltHuddleWireframe velt-if="{componentConfig.meetingJoined}">
  <VeltAudioHuddleUserWireframe />
  <VeltVideoHuddleUserWireframe />
  <VeltScreenSharingHuddleWireframe
    velt-if="{componentConfig.screenSharing.stream}" />
  <VeltHuddleMenuPanelWireframe />
</VeltHuddleWireframe>

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

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

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

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.

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:

React / Next.js
Other Frameworks

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

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

Huddle — Parts — CSS ::part(...) hooks for the huddle primitives.
Huddle — Variables — CSS variables for the huddle visual.
Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Huddle Wireframe Variables

Overview

Component Config — Huddle (root)

Component Config — Huddle Tool

Context-Specific Variables

Type Reference

Subcomponents

`huddle-tool`

`huddle` (root container)

`audio-huddle-user`

`video-huddle-user`

`huddle-menu-panel`

`huddle-messages-panel`

Putting it together

Concepts

Async Collaboration

Realtime Collaboration

Documentation Index

​Overview

​Component Config — Huddle (root)

​Component Config — Huddle Tool

​Context-Specific Variables

​Type Reference

​Subcomponents

​huddle-tool

​huddle (root container)

​audio-huddle-user

​video-huddle-user

​screen-sharing-huddle

​huddle-menu-panel

​huddle-messages-panel

​Putting it together

​Related

Overview

Component Config — Huddle (root)

Component Config — Huddle Tool

Context-Specific Variables

Type Reference

Subcomponents

`huddle-tool`

`huddle` (root container)

`audio-huddle-user`

`video-huddle-user`

`screen-sharing-huddle`

`huddle-menu-panel`

`huddle-messages-panel`

Putting it together

Related