Wireframe variables (per component, with usage)

Source of truth: exhaustive for what it covers. Generated from Velt variable metadata.

If a name isn’t on this page, it doesn’t exist: a {token} not listed for its component resolves to undefined.
Never invent or guess a name; use only identifiers that appear verbatim here or that you verified against ground truth and added here.
Scope: exhaustive per component for comments + notifications + core; out-of-scope component areas (video-editor, single-editor-mode, media-source-settings, audio-waveform, user-avatar) are not catalogued, and a few non-comment/-notification components (Recorder, Huddle, Presence, View) are listed for completeness but only spot-corrected, not re-enumerated.

Every {…} token you can read inside a wireframe, organized by component, with an example usage for each. For the token syntax (operators, nesting) see Wireframe tokens. Buckets: app (per-user) · data (per-annotation) · ui (per-instance) · feature (SDK-config flags) · iteration (loop-scoped). 🔑 = boolean/state flag most useful in velt-if / velt-class. Two access models:

Structured features (Comment Dialog, Comment Bubble, Inline Comments Section, Multi-Thread Dialog, Activity Log, Comments Tool, Sidebar Button, Notifications): short names work ({annotation}, {darkMode}); full paths ({appState.user}, {featureState.enableResolve}, {uiState.…}) also valid.
Flat-config features (Text Comment, Autocomplete, Sidebar, Reactions, Cursor, Presence, Huddle, Recorder, Transcription, View, Area, Arrow, Selection, Rewriter): read as {componentConfig.<x>}; for name collisions (disabled, darkMode, variant, user, annotation) use the full path.

Resolution rule: a name not in the map falls through to componentConfig.<name>; an unknown name resolves to undefined. If a token shows nothing, check (a) spelling, (b) you’re in a slot that receives it, (c) flat vs structured path. React vs. Other Frameworks: every example below works in both; only the spelling differs. The example column uses whichever form is shortest.

Directive	React / Next.js	Other Frameworks
Show/hide	`veltIf` prop / `<VeltIf condition="…">`	`velt-if` attribute / `<velt-if>`
Toggle classes	`veltClass` prop (or literal `velt-class` on your own markup)	`velt-class` / `velt-class-<name>` attributes
Print a value	`<VeltData field="…" />`	`<velt-data field="…"></velt-data>`

Full syntax with tabbed examples: Wireframe tokens.

Generated from the SDK and exhaustive per component. If a name isn’t listed for a component, it isn’t available there. For the nested-access root list and operators, see Wireframe tokens.

Inject your own data: `setUiState()`

Beyond the built-in variables below, you can inject your own app data and read it in any wireframe, velt-if, or velt-data:

React / Next.js
Other Frameworks

// Set custom data
client.setUiState({
  projectName: 'Dashboard 2.0',
  teamSize: 5,
  customFlag: true
});

// Read custom data back
client.getUiState().subscribe((data) => {
  console.log('Custom Data:', data);
});

Velt.setUiState({
  projectName: 'Dashboard 2.0',
  teamSize: 5,
  customFlag: true
});

Velt.getUiState().subscribe((data) => {
  console.log('Custom Data:', data);
});

Then read it in markup like any other variable: {uiState.projectName}, or gate with velt-if="{uiState.customFlag}". For per-annotation app data, use Context instead; setUiState is app-global.

Comment Dialog

name	type	bucket	meaning	example	🔑
`user`	object	app	current end-user (nested OK)	`veltIf="{user.userId} === {annotation.from.userId}"`
`isUserAdmin`	bool	app	admin privileges	`veltIf="{isUserAdmin}"`	🔑
`isKnownUser`	bool	app	identified vs anonymous	`veltIf="!{isKnownUser}"`	🔑
`repliesUniqueUsers`	array	app	distinct reply authors	None
`annotation`	object	data	the dialog’s annotation	`<VeltData field="annotation.annotationNumber"/>`
`annotation.status.id` / `.name`	string	data	status id / label	`veltIf="{annotation.status.id} === 'OPEN'"`	🔑
`annotation.priority.id` / `.name`	string	data	priority id / label	`veltClass="'urgent': {annotation.priority.id} === 'URGENT'"`	🔑
`annotation.from.userId` / `.name`	string	data	author	`<VeltData field="annotation.from.name"/>`
`annotation.comments.length`	number	data	thread size	`<VeltData field="annotation.comments.length"/>`
`annotation.assignedTo`	object	data	assignee (undefined = none)	`veltIf="!{annotation.assignedTo}"`	🔑
`annotation.resolvedByUser.name`	string	data	resolver name	`<VeltData field="annotation.resolvedByUser.name"/>`
`annotation.context.<key>`	object	data	your attached context	`<VeltData field="annotation.context.label"/>`
`annotation.agent`	object	data	AI-agent author (present → agent suggestion card)	`veltIf="{annotation.agent}"`	🔑
`annotation.sourceType`	string	data	`'agent'` when agent-authored	`veltIf="{annotation.sourceType} === 'agent'"`	🔑
`annotation.type` / `annotation.commentType`	string	data	`'suggestion'` discriminator for agent suggestions	`veltIf="{annotation.type} === 'suggestion'"`	🔑
`annotation.suggestion.status`	string	data	resolved state (`'accepted'`/`'rejected'`; absent = pending)	`veltIf="{annotation.suggestion.status} === 'accepted'"`	🔑
`annotation.suggestion.resolvedBy.name`	string	data	who accepted/rejected the suggestion	`<VeltData field="annotation.suggestion.resolvedBy.name"/>`
`annotation.suggestion.resolvedAt`	number	data	resolution timestamp	None
`agentName`	string	data	agent display name (`annotation.agent.agentName`)	`<VeltData field="agentName"/>`
`agentAvatar`	string	data	agent avatar URL (truthiness → has-avatar)	`veltIf="{agentAvatar}"`	🔑
`agentResultTitle`	string	data	agent result title (`annotation.agent.result.title`)	`<VeltData field="agentResultTitle"/>`
`commentAnnotation` / `commentAnnotations`	object/array	data	aliases of annotation(s)	None
`comment` / `commentObj`	object	data	per-comment (thread-card scope)	`<VeltData field="comment.from.name"/>`
`annotations` / `allAnnotations`	array	data	in-scope / unfiltered	None
`ghostComment`	object	data	annotation lost its DOM target	`veltIf="{ghostComment}"`	🔑
`editComment` / `editCommentIndex`	object/number	data	comment being edited / its index	`veltIf="{editCommentIndex} === {i}"`
`assignTo` / `selectedUserContacts`	object/array	data	assign-menu selection	None
`customList` / `taggedUserContacts` / `taggedGroups`	array	data	autocomplete / mentions	None
`selectedFiles` / `invalidSelectedFiles` / `selectedAttachments` / `attachmentsToDelete`	array	data	composer files	None
`localRecordedData`	array	data	staged recordings	None
`sidebarMode` / `dialogMode` / `inboxMode` / `inlineCommentSectionMode` / `focusedThreadMode` / `pageModeComposer`	bool	ui	render-mode flags	`veltIf="!{sidebarMode}"`	🔑
`composerInOpenState` / `isInputFocused`	bool	ui	composer expanded / focused	`veltIf="{composerInOpenState}"`	🔑
`composerContent` / `composerContentHTML` (alias `newComment`/`newCommentHTML`)	string	ui	draft text / html	None
`showReplies` / `collapsedComments`	bool	ui	replies shown / collapsed	None	🔑
`darkMode` / `readOnly`	bool	ui	theme / read-only	None	🔑
`selectedVisibility` / `selectedVisibilityUsers`	string/array	ui	visibility selection	None
`isFocusedThreadEnabled`	bool	ui	focused-thread allowed	`veltIf="{isFocusedThreadEnabled}"`	🔑
`maxReplyAvatars`	number	ui	reply-avatar cap (default 5)	None
`isTruncated` / `isExpanded`	bool	ui	message truncation / expanded	`veltIf="{isTruncated} && !{isExpanded}"`	🔑
`enableResolve` / `canResolveAnnotation` / `canUnresolveAnnotation`	bool	feature	resolve gates	`veltIf="{canResolveAnnotation}"`	🔑
`resolveStatusAccessAdminOnly`	bool	feature	resolve admin-only	`veltIf=”!		”`	🔑
`enableReactions` / `enableEdit` / `enableDelete` / `enableAttachment` / `enableAssignment` / `enableNotifications` / `enablePriority` / `enablePrivateMode`	bool	feature	per-feature gates	`veltIf="{enableReactions}"`	🔑
`replyAvatars`	bool	feature	show reply-avatar strip	`veltIf="{replyAvatars}"`	🔑
`userMentions`	bool	feature	@mentions on	`veltIf="{userMentions}"`	🔑
`visibilityOptions` / `seenByUsers`	bool	feature	visibility selector / seen-by	`veltIf="{seenByUsers}"`	🔑
`customStatusesShown` / `statusOptions` / `statusObj`	bool/array/object	feature/iter	status dropdown / options / per-item	`<velt-data field="statusObj.name">`
`priorityOptions` / `priorityObj`	array/object	feature/iter	priority options / per-item	`<velt-data field="priorityObj.name">`
`enableSignInButton` / `enableUpgradeButton` / `enableGhostCommentsMessage`	bool	feature	conditional buttons/banners	`veltIf="{enableSignInButton}"`	🔑
`suggestionMode` / `moderatorMode` / `enableAutoCategorize` / `isPlanExpired`	bool	feature	modes / plan	None	🔑
`showSuggestionModeActions`	bool	ui	show suggestion accept/reject actions	`veltIf="{showSuggestionModeActions}"`	🔑
`commentAcceptedStatus` / `commentRejectedStatus`	object	feature	suggestion accept/reject status objects (compare `.id`)	`veltClass="'accepted': {annotation.status.id} === {commentAcceptedStatus.id}"`
`allowedFileTypes` / `allowedRecordings` / `screenSharingSupported`	array/bool	feature	attachment / recording limits	None
`recordingSummaryEnabled` / `enterKeyToSubmit` / `deleteOnBackspace` / `deleteThreadWithFirstComment`	bool	feature	misc behavior	None	🔑
`bubbleOnPin` / `dialogOnHover` / `popoverMode`	bool	feature	render comment as bubble-on-pin / open dialog on hover / popover layout	`veltIf="{popoverMode}"`	🔑
`commentBubbleAvailable`	bool	ui	a comment bubble is available to show (gates bubble vs default view)	`veltIf="{commentBubbleAvailable}"`	🔑
`commentPlaceholder` / `replyPlaceholder` / `editCommentPlaceholder` / `editReplyPlaceholder` / `editPlaceholder` / `pageModePlaceholder` / `placeholder`	string	ui	composer/reply/edit placeholder strings (fallback `placeholder`)	`<velt-data field="commentPlaceholder"/>`
`file` (`.uploading`)	object	iteration	per attachment (the invalid-attachments array is `invalidSelectedFiles`, above: there is no per-item `invalidFile` token)	`velt-class="'is-uploading': {file.uploading}"`	🔑
`view` / `userName` / `userEmail` / `viewedAt`	object/string	iteration	per seen-by viewer	`<velt-data field="view.user.name">`
`option` / `item`	object	iteration	per visibility / custom-chip option	`<velt-data field="option.label"/>`
`{i}` / `commentIndex`	number	iteration	loop index (0-based)	`veltIf="{i} === 0"`	🔑

Comment Bubble

Access model: structured; some need full globalConfigSignal.* / parentLocalUIState.*.

name	type	bucket	meaning	example	🔑
`user` / `isUserAdmin` / `isKnownUser`	object/bool	app	user state	`veltIf="{isUserAdmin}"`	🔑
`annotation.status.id` / `.name`	string	data	status	`veltIf="{annotation.status.id} === 'OPEN'"`	🔑
`annotation.from.name` / `.priority.name` / `.assignedTo.name`	string	data	author / priority / assignee	`<VeltData field="annotation.from.name"/>`
`annotation.comments.length`	number	data	reply count (→ CommentsCount slot)	`<VeltData field="annotation.comments.length"/>`
`annotation.unreadCount` / `annotation.unread`	number/bool	data	unread (→ UnreadIcon)	`velt-class="'is-unread': {annotation.unread}"`	🔑
`annotation.iam.accessMode`	string	data	`'public'`/`'private'`	`veltIf="{annotation.iam.accessMode} === 'private'"`
`annotation.ghostComment`	bool	data	lost target	`veltIf="{annotation.ghostComment}"`	🔑
`annotation.context.<key>`	object	data	context	`<VeltData field="annotation.context.label"/>`
`annotations` / `unresolvedAnnotationsCount` / `unreadCount`	array/number	data	page totals	None
`commentPinSelected` / `commentBubbleTargetPinHover` / `commentBubbleHover` / `openDialog`	bool	ui	selected / target-pin hover / bubble hover / open	`velt-class="'hover': {commentBubbleTargetPinHover}"`	🔑
`selectedAnnotationsMap`	object	ui	selection map	`velt-class="'selected': {selectedAnnotationsMap[annotation.annotationId]}"`
`showAvatar` / `readOnly` / `darkMode`	bool	ui	avatar / read-only / theme	`veltIf="{showAvatar}"`	🔑
`commentCountType` / `variant`	string	ui	`'total'`/`'unread'` / variant	None
`globalConfigSignal.featureState.customStatusesShown` / `.groupMatchedComments` / `.resolvedCommentsOnDom` / `.readOnly`	bool	feature	global feature flags	None	🔑

Comment Pin

name	type	bucket	meaning	example	🔑
`user` / `isUserAdmin`	object/bool	app	user	`veltIf="{isUserAdmin}"`	🔑
`annotation.status.id`	string	data	status (→ marker color)	`veltIf="{annotation.status.id} === 'OPEN'"`	🔑
`annotation.priority.name`	string	data	priority label	`<VeltData field="annotation.priority.name"/>`
`annotation.comments.length`	number	data	reply count (→ Number badge)	`<VeltData field="annotation.comments.length"/>`
`annotation.unreadCount`	number	data	unread (→ UnreadCommentIndicator)	`veltIf="{annotation.unreadCount} > 0"`
`annotation.visibility`	string	data	`'public'`/`'private'` (→ PrivateCommentIndicator)	`veltIf="{annotation.visibility} === 'private'"`	🔑
`annotation.context.<key>`	object	data	context	`<VeltData field="annotation.context.label"/>`

Text Comment

Access model: flat-config: {componentConfig.<x>}.

name	type	bucket	meaning	example	🔑
`user` / `user.name` / `isUserAdmin` / `isKnownUser`	object/bool	app	user	`<VeltData field="user.name"/>`	🔑
`annotation.status.id` / `.name` / `.from.name` / `.priority.name`	string	data	annotation fields	`veltIf="{annotation.status.id} === 'RESOLVED'"`	🔑
(no `totalComments`)	None		Text Comment exposes no comment-count token; document-wide counts live on the sidebar (`commentAnnotationsCountByFilters` / `commentAnnotationsCountByStatus`)	None
`position.top` / `position.left`	number	data	toolbar position	`<velt-data field="position.top">`
`selectedWordsCount` / `selectedCharactersCount`	number	data	selection size	`velt-class="'has-words': {selectedWordsCount} > 0"`
`showAdder` / `commentToolEnabled` / `isUserAllowed` / `enableTextComments`	bool	ui	adder / tool / permission / feature	`veltIf="{showAdder}"`	🔑
`rewriterEnabled` / `rewriterDefaultUIEnabled`	bool	ui	AI rewriter	`veltIf="{rewriterEnabled}"`	🔑
`uiState.disabled` / `uiState.isPlanExpired`	bool	ui	disabled / plan	`veltIf="{uiState.isPlanExpired}"`	🔑
`MIN_ALLOWED_WORDS_COUNT` / `MIN_`/`MAX_ALLOWED_CHARACTERS_COUNT`	number	ui	selection thresholds	None
`darkMode` / `variant` / `parentLocalUIState.shadowDom`	bool/string	ui	theme / variant / shadow	None	🔑

Inline Comments Section

Access model: structured.

name	type	bucket	meaning	example	🔑
`user`	object	app	current user	`<velt-data field="user.name">`
`featureState.readOnly` / `.anonymousEmail` / `.messageTruncation` / `.messageTruncationLines`	bool/number	feature	feature gates	`veltIf="{featureState.anonymousEmail}"`	🔑
`annotations` / `allAnnotations` / `composerCommentAnnotation` / `statuses`	array/object	data	data	`veltIf="{composerCommentAnnotation}"`	🔑
`skeletonLoading` / `darkMode`	bool	ui	loading / theme	`veltIf="{skeletonLoading}"`	🔑
`filterState.filters` / `.filterDropdownOpen`	array/bool	ui	filter state	`velt-class="'open': {filterState.filterDropdownOpen}"`	🔑
`sortState.sortBy` / `.sortOrder` / `.sortingDropdownOpen`	string/bool	ui	sort state	`velt-class="'sort-{sortState.sortOrder}': true"`	🔑
`isResolvedCommentsOnDomFilterSelected` / `resolvedCommentsOnDom`	bool	ui	resolved filter	None	🔑
`multiThread` / `fullExpanded` / `readOnly` / `composerPosition`	bool/string	ui	layout	`velt-class="'multi-thread': {multiThread}"`	🔑
`*Placeholder` (comment/reply/composer/edit…)	string	ui	placeholder strings	`<velt-data field="commentPlaceholder">`
`targetElementId` / `folderId` / `documentId` / `locationId` / `context` / `contextOptions`	string/object	ui	scope / context	`<velt-data field="context.something">`
`filter` (`.id`/`.isSelected`/`.metadata`)	object	iteration	per filter item	`velt-class="'selected': {filter.isSelected}"`	🔑
`sortOption` / `sortOptionText` / `isActive` / `isAscending`	mixed	iteration	per sort option	`velt-class="'active': {isActive}"`	🔑

Multi-Thread Comment Dialog

Access model: structured, per-instance.

name	type	bucket	meaning	example	🔑
`annotation` / `annotations` / `filteredAnnotations`	object/array	data	annotations	`<velt-data field="filteredAnnotations.length">`
`multiThreadAnnotationId` / `multiThreadCommentAnnotation` / `nonDraftCommentsCount`	string/object/number	data	thread data	None
`data.user` / `context` / `data.contextId` / `containerComponentId`	object/string	data	user / context	`<velt-data field="context.foo">`
`commentPinSelected` / `commentPinType`	bool/string	ui	pin selected / type	`velt-class="'pin-selected': {commentPinSelected}"`	🔑
`inboxMode` / `readOnly` / `hideMultiThreadAnnotationComposer`	bool	ui	modes	`veltIf="!{hideMultiThreadAnnotationComposer}"`	🔑
`minimalFilter` (`all`/`read`/`unread`/`resolved`)	string	ui	minimal filter	`velt-class="'filter-{minimalFilter}': true"`
`minimalFilterDropdownOpen` / `minimalActionsDropdownOpen`	bool	ui	dropdowns open	`velt-class="'open': {minimalFilterDropdownOpen}"`	🔑
`noCommentsFound` / `noCommentsFoundForAppliedFilters`	bool	ui	empty states	`veltIf="{noCommentsFound}"`	🔑
`darkMode` / `dialogVariant` / `variant` / `uiState.shadowDom`	bool/string	ui	theme / variants / shadow	None	🔑
`isSelected`	bool	iteration	minimal filter/sort item selected	`velt-class="'is-selected': {isSelected}"`	🔑

Autocomplete (@mentions)

Access model: flat-config.

name	type	bucket	meaning	example	🔑
`componentConfig.flattenedItems`	array	data	visible options (empty-state: `length === 0`)	`<velt-data field="componentConfig.flattenedItems.length">`
`componentConfig.contactsWithoutGroup` / `.groups`	array	data	ungrouped contacts / groups	None
`componentConfig.newUserContact` / `.newUserContactError`	object/string	data	new contact / error	`veltIf="{componentConfig.newUserContactError}"`	🔑
`componentConfig.customAutocompleteSearch` / `.expandMentionGroups` / `.showMentionGroupsFirst` / `.showMentionGroupsOnly` / `.customGroupsEnabled`	bool	ui	search / group modes	None	🔑
`option` (`.user`/`.group`/`.name`/`.email`/`.description`)	object	iteration	one option	`<velt-data field="option.name">`
`chip` (`.label`)	object	iteration	inline mention chip	`<velt-data field="chip.label">`

Comments Sidebar

Access model: flat-config: {componentConfig.<x>}.

name	type	bucket	meaning	example	🔑
`componentConfig.sidebarVisible` / `.darkMode` / `.fullScreen` / `.fullExpanded`	bool	ui	visibility / theme / size	`velt-if="{componentConfig.sidebarVisible}"`	🔑
`componentConfig.embedMode` / `.floatingMode` / `.pageMode` / `.readOnly` / `.sidebarReadMode`	string/bool	ui	layout/mode	`velt-class="'page-mode': {componentConfig.pageMode}"`	🔑
`componentConfig.skeletonLoading` / `.noCommentsFound` / `.noCommentsFoundForAppliedFilters`	bool	ui	loading / empty	`velt-if="{componentConfig.skeletonLoading}"`	🔑
`componentConfig.moreFiltersVisible`	bool	ui	filter panel open	None	🔑
`componentConfig.filterPanelLayout`	string	ui	filter-panel layout class (controls panel arrangement)	`velt-class="'{componentConfig.filterPanelLayout}': true"`
`componentConfig.groupBy` / `.groupByOptions`	string/array	ui	current group-by key / available group-by options	`velt-if="{componentConfig.groupBy} === 'status'"`
`componentConfig.documentFilterDropdownOpen` / `.minimalFilterDropdownOpen` / `.locationFilterDropdownOpen` / `.minimalActionsDropdownOpen`	bool	ui	per-dropdown open flags	`velt-class="'open': {componentConfig.minimalFilterDropdownOpen}"`	🔑
`componentConfig.searchPlaceholder` / `.commentPlaceholder` / `.replyPlaceholder` / `.editPlaceholder` / `.editCommentPlaceholder` / `.editReplyPlaceholder` / `.pageModePlaceholder`	string	ui	placeholder strings	`<velt-data field="componentConfig.searchPlaceholder"/>`
`componentConfig.filterConfig` / `.filters` / `.systemFiltersOperator`	object/string	ui/data	filter config / values / AND-OR	`<velt-data field="componentConfig.filters.statuses.length">`
`componentConfig.virtualScrollData` / `.commentAnnotationsCountByFilters` / `.searchQuery` / `.taggedFilters`	array/object/string	data	data (people/tag filters are `taggedFilters`: there is no `selectedFilterTags`)	None
`focusedAnnotation`	object	data	focused thread	`<velt-data field="focusedAnnotation.from.name">`
`appliedFiltersCount` / `filteredCommentAnnotationsCount` / `unreadCommentAnnotationCount`	number	ui/data	counts/badges	`<velt-data field="appliedFiltersCount">`
`annotation` / `group` (`.expanded`/`.name`/`.count`) / `filter` / `item` / `tag`	object	iteration	loop-scoped	`velt-class="'expanded': {group.expanded}"`	🔑

Notifications Panel & Tool

Access model: structured; short names.

name	type	bucket	meaning	example	🔑
`notification` (`.type`/`.from.name`/`.read`/`.createdAt`/`.documentName`/`.count`)	object	data	per notification	`veltIf="{notification.type} === 'comment'"`	🔑(read)
`notifications` / `notificationsForYouInSession` / `notificationsInSession`	array	data	feeds	`<velt-data field="notifications.length">`
`notificationsByUserMap` / `notificationsByDocumentId` / `notificationsByDate`	object/array	data	grouped feeds	None
`unreadNotificationsForYou` / `currentDocumentName`	number/string	data	unread badge / doc name	None
`settingsConfig` / `settingsSelectedOption`	array/object	data	settings tree / selection	None
`selectedTab` (`forYou`/`all`/`documents`/`people`) / `TABS` / `tabConfig` / `tabPage` / `tabCount`	string/object	ui	tab state	`veltIf="{tabConfig.forYou}"`
`panelOpenMode` / `settingsLayout` / `pageSize`	string/number	ui	layout	None
`settingsOpen` / `settingsMutedAll` / `notificationsPanelVisible`	bool	ui	settings / mute / open	`velt-class="'settings-open': {settingsOpen}"`	🔑
`settingsAccordionExpanded` / `usersExpanded` / `documentExpanded`	object	ui	per-key expanded maps	`velt-class="'expanded': {usersExpanded[notification.from.email]}"`
`settingsEnabled`	bool	feature	settings available	`veltIf="{settingsEnabled}"`	🔑
`isLoadMoreVisible` / `isAllRead`	bool	ui	load-more / all read	`veltIf="{isLoadMoreVisible}"`	🔑
(Tool) `considerAllNotifications` / `panelShadowDom`	bool	feature/ui	count all / panel shadow	None	🔑

Reactions

Access model: flat-config.

name	type	bucket	meaning	example	🔑
`componentConfig.annotation` (`.emoji`/`.reactions`/`.users`) / `.annotations`	object/array	data	reaction data	`<velt-data field="componentConfig.annotation.emoji">`
`componentConfig.isReactionSelectedByCurrentUser`	bool	app	local user reacted	`velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}"`	🔑
`componentConfig.type`	string	ui	pin type (`comment`/`inline`/`timeline`/`standalone`)	`velt-class="'pin-{componentConfig.type}': true"`
`componentConfig.disableTooltip` / `.tooltipVisible`	bool	ui	tooltip suppress / open	`velt-if="!{componentConfig.disableTooltip}"`	🔑
`componentConfig.skeletonLoading` / `.darkMode` / `.shadowDom` / `.variant` / `.excludeReactionIds`	bool/string/array	ui	loading/theme/shadow/exclusions	None	🔑
`emoji.key` / `.value` / `.name`	string	iteration	picker emoji	`<velt-data field="emoji.value">`
`isSelected`	bool	iteration	emoji selected	`velt-class="'is-selected': {isSelected}"`	🔑

Presence

Access model: flat-config.

name	type	bucket	meaning	example	🔑
`componentConfig.filteredPresenceUsers`	array	data	active users (gate: `length > 0`)	`<velt-data field="componentConfig.filteredPresenceUsers.length">`
`componentConfig.user`	object	data	local user (hover user in tooltip)	None
`componentConfig.maxUsers`	number	ui	avatar cap (default 5)	None
`componentConfig.isActive` (tooltip)	bool	app	active state (no `lastActiveAt` token: away state comes from `presenceUser.onlineStatus`)	None	🔑
`componentConfig.shadowDom` / `.variant`	bool/string	ui	shadow / variant	None	🔑
`presenceUser` (`.name`/`.email`/`.onlineStatus`/`.color`) / `index`	object/number	iteration	per avatar	`velt-class="'away': {presenceUser.onlineStatus} === 'away'"`	🔑

Cursor

Access model: flat-config.

name	type	bucket	meaning	example	🔑
`componentConfig.user` / `.cursorUsers` / `.currentCursorUser` / `.cursorUser`	object/array	data	local / remote pointers / per-pointer	`<velt-data field="componentConfig.cursorUser.name">`
`componentConfig.selfCursorPointer`	bool	app	pointer is local user	`velt-class="'is-self': {componentConfig.selfCursorPointer}"`	🔑
`componentConfig.showDefault` / `.showAvatar` / `.showAudio` / `.showVideo`	bool	ui	render-mode toggles	`veltIf="{componentConfig.showAvatar}"`	🔑
`componentConfig.huddleJoined` / `.huddleOnCursorMode` / `.isFirstComponent`	bool	app	huddle / first instance	`veltIf="{componentConfig.huddleJoined}"`	🔑
`componentConfig.gainVolume` / `.lightenedColor` / `.variant` / `.stream`	number/string/Stream	ui/feature	ring level / color / variant / media	`veltIf="{componentConfig.stream}"`

Huddle

Access model: flat-config.

name	type	bucket	meaning	example	🔑
`componentConfig.meetingJoined`	bool	app	local user in huddle	`velt-class="'in-huddle': {componentConfig.meetingJoined}"`	🔑
`componentConfig.localStreamState.audioState` / `.videoState` / `.screenSharingState`	bool	app	mic / cam / screen	`velt-class="'audio-on': {componentConfig.localStreamState.audioState}"`	🔑
`componentConfig.huddleAttendees`	array	data	attendees	`<velt-data field="componentConfig.huddleAttendees.length">`
`componentConfig.attendee` / `.color` / `.gainVolume`	object/string/number	data/ui	per tile (no `attendee.isLocal`; local-vs-remote is `!componentConfig.isRemoteStream`)	None
`componentConfig.type`	string	ui	tool type (audio/video/presentation/all)	`velt-class="'tool-{componentConfig.type}': true"`
`componentConfig.screenSharingSupported` / `.disabled` / `.isDragging` / `.bannerRemoved`	bool	ui/app	support / state	`velt-class="'dragging': {componentConfig.isDragging}"`	🔑
`componentConfig.isFirstComponent`	bool	app	first instance	`veltIf="{componentConfig.isFirstComponent}"`	🔑

Recorder

Access model: flat-config: use full componentConfigSignal. for collisions.

name	type	bucket	meaning	example	🔑
`recordingInProgress` / `isRecording` / `isPlaying`	bool	state	recording / running / playback	`velt-class="'recording': {componentConfigSignal.recordingInProgress}"`	🔑
`recordingType` / `types` / `recorderModes`	string/array/object	data	active type / permitted / id map	None
`screenSharingSupported` / `recordingCountdown` / `recordingTranscriptionEnabled`	bool	feature	support / countdown / transcript	`velt-if="{componentConfigSignal.screenSharingSupported}"`	🔑
`recorderPinAnnotation` / `recorderPinSelected` / `multipleRecorderPinsSelected` / `dragging`	object/bool	data/state	pin + selection	`velt-class="'selected': {componentConfigSignal.recorderPinSelected}"`	🔑
`attachment` / `annotation` / `user` / `recorderInitData`	object	data	media / annotation / author	`<velt-data field="componentConfigSignal.attachment.url">`
`totalTimeValue` / `currentTimeValue` / `recordedTime`	number	data/state	durations (the elapsed value is `recordedTime`: there is no `elapsedTime` token)	None
`mode` / `sourceFeature` / `videoContainerHovered`	string/bool	ui/state	floating-vs-thread / origin / hover	`velt-class="'mode-{componentConfigSignal.mode}': true"`	🔑(hover)
`buttonLabel` / `darkMode` / `disabled` / `variant` / `shadowDom`	string/bool	ui	label / theme / state	None	🔑(bools)

Transcription

Access model: flat-config.

name	type	bucket	meaning	example	🔑
`mode`	string	ui	floating / sidebar / summaryMode	`velt-if="{componentConfig.mode} === 'floating'"`
`transcription` / `vttFileTextArray`	object/array	data	transcript / segments	`<velt-data field="componentConfig.transcription">`
`transcriptionVisible` / `sidebarVisible` / `subtitlesVisible` / `dialogVisible`	bool	state	visibility flags	`velt-class="'visible': {componentConfig.transcriptionVisible}"`	🔑
`highlightedTextIndex`	number	state	active segment	None
`showMoreSummary` / `darkMode` / `showDefaultBtn`	bool	state/ui/feature	summary expand / theme / default btn	`veltIf="{componentConfig.showDefaultBtn}"`	🔑

Activity Log

Access model: structured.

name	type	bucket	meaning	example	🔑
`user` / `darkMode` / `isEnabled`	object/bool	app/feature	user / theme / enabled	`velt-if="{isEnabled}"`	🔑
`allActivities` / `filteredActivities` / `groupedActivities` / `virtualScrollItems`	array	data	activity records	`velt-if="{allActivities.length} > 0"`
`activeFilter` / `availableFilters`	string/array	state/data	active filter / options	`velt-class="'filter-active': {activeFilter} !== 'all'"`
`isOpen` / `filterDropdownOpen` / `expandedGroups`	bool/Set	state	panel / dropdown / expanded	`velt-class="'is-open': {isOpen}"`	🔑
`defaultVisibleCount` / `variant`	number/string	ui	per-group count (5) / variant	None
`dateGroup` (`.displayLabel`/`.totalCount`) / `activity` (`.user`/`.action`/`.target`/`.detail`) / `filter`	object	iteration	per row	`<velt-data field="activity.user.name">`
`isActive` / `isExpanded` / `remainingCount`	bool/number	iteration	per-item state	`velt-class="'expanded': {isExpanded}"`	🔑

View Analytics

Access model: flat-config.

name	type	bucket	meaning	example	🔑
`componentConfig.todayViewsCount` / `.totalUniqueViewsCount`	number	data	counts	`<velt-data field="componentConfig.todayViewsCount">`
`componentConfig.views` / `.usersMap` / `.userViews`	object/array	data	views / viewers	`<velt-data field="componentConfig.userViews.length">`
`componentConfig.treadsVisible`	bool	state	dialog open (SDK spelling: “treads”)	`velt-class="'dialog-open': {componentConfig.treadsVisible}"`	🔑
`componentConfig.bottomSheetMode` / `.customButtonAdded` / `.isPhone`	bool	state/feature	bottom-sheet / custom btn / mobile	`velt-if="!{componentConfig.customButtonAdded}"`	🔑

Comments Tool

Access model: structured; componentConfig.data.* / .uiState.*.

name	type	bucket	meaning	example	🔑
`commentToolEnabled` / `addCommentMode` / `popoverMode` / `groupMatchedComments`	bool	feature/state	enabled / add-mode / popover / grouping	`velt-class="'add-mode': {addCommentMode}"`	🔑
`componentConfig.data.commentAnnotationAvailable`	bool	feature	comments placeable here	`velt-if="{componentConfig.data.commentAnnotationAvailable}"`	🔑
`componentConfig.data.context` / `.targetElementId` / `.documentId` / `.locationId` / `.disabled`	object/string/bool	data	context / scope / disabled	`<velt-data field="componentConfig.data.context.foo">`	🔑(disabled)
`componentConfig.uiState.showDefaultBtn` / `.shadowDom` / `.darkMode` / `.contextInPageModeComposer`	bool	ui	default btn / shadow / theme / page-mode context	`velt-if="{componentConfig.uiState.showDefaultBtn}"`	🔑

Access model: structured.

name	type	bucket	meaning	example	🔑
`globalConfig.featureState.sidebarVisible`	bool	feature	sidebar open	`velt-class="'sidebar-open': {globalConfig.featureState.sidebarVisible}"`	🔑
`componentConfig.data.annotations` / `.unreadCount`	array/number	data	annotations / unread	`<velt-data field="componentConfig.data.unreadCount">`
`componentConfig.uiState.showDefaultBtn` / `.floatingMode` / `.floatingModeSidebarVisible` / `.darkMode` / `.commentCountType` / `.variant`	bool/string	ui	button / floating / theme / count type	`velt-if="{componentConfig.uiState.showDefaultBtn}"`	🔑(bools)

Area · Arrow · Selection · Rewriter

Access model: flat-config.

feature	key variables
Area	`componentConfig.areaPinAnnotation`, `.commentPinAnnotation`, `.selected` 🔑, `.hideAreaAnnotation` 🔑, `.isResizing` 🔑, `.areaAnnotationColor` (default `#625DF5`), `.areaProperties`
Arrow (no wireframe slots yet: CSS/`[template]` only)	`componentConfig.arrowPinAnnotation`, `.annotationDragging` 🔑, `.selectedAnnotationsMap`
Selection	`componentConfig.position`, `.userIndicatorPosition` (`start`/`end`), `.userIndicatorType` (`Avatar`/`Name`), `.selections`
Rewriter	`componentConfig.options`, `.first` 🔑 / `.last` 🔑, `.loading` 🔑, `.bottomSheetMode` 🔑, `.isPhone` 🔑, `.selectedOptionIndex`

Notes

Iteration {i} (aliases commentIndex) is available inside list/Threads slots, 0-based. Loop slots also inject objects (option, filter, emoji, activity, dateGroup, chip, view, file, …) + per-item booleans (isSelected, isActive, isExpanded, isAscending).
Function-typed variables (onClick…, initRecording, toggleSidebar, handleEmojiSelected, …) are call-handlers you bind to events, not display values.
For deep fields of a compound object not listed, console.log it from a hook (e.g. useCommentAnnotations()) to see the exact shape.

Concepts

AI Agent Workflow

Approaches

Feature Guides

Components: Async Collaboration

Components: Realtime Collaboration

Guidance

Reference

Wireframe variables (per component, with usage)

Inject your own data: `setUiState()`

Comment Dialog

Comment Bubble

Comment Pin

Text Comment

Inline Comments Section

Multi-Thread Comment Dialog

Autocomplete (@mentions)

Comments Sidebar

Notifications Panel & Tool

Reactions

Presence

Cursor

Huddle

Recorder

Transcription

Activity Log

View Analytics

Comments Tool

Sidebar Button

Area · Arrow · Selection · Rewriter

Tags

Notes

​Inject your own data: setUiState()

​Comment Dialog

​Comment Bubble

​Comment Pin

​Text Comment

​Inline Comments Section

​Multi-Thread Comment Dialog

​Autocomplete (@mentions)

​Comments Sidebar

​Notifications Panel & Tool

​Reactions

​Presence

​Cursor

​Huddle

​Recorder

​Transcription

​Activity Log

​View Analytics

​Comments Tool

​Sidebar Button

​Area · Arrow · Selection · Rewriter

​Tags

​Notes

Inject your own data: `setUiState()`

Comment Dialog

Comment Bubble

Comment Pin

Text Comment

Inline Comments Section

Multi-Thread Comment Dialog

Autocomplete (@mentions)

Comments Sidebar

Notifications Panel & Tool

Reactions

Presence

Cursor

Huddle

Recorder

Transcription

Activity Log

View Analytics

Comments Tool

Sidebar Button

Area · Arrow · Selection · Rewriter

Tags

Notes