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.

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

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

Other Frameworks

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

---

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:

React / Next.js

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

Other Frameworks

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

Related

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