Inline Comments Section Wireframe Variables

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

Overview

The Inline Comments Section wireframe exposes the variables below. Use them inside any <velt-inline-comments-section-...-wireframe> tag via three forms:

You want to…	Use	Example
Display a value as text	`<velt-data field="var" />`	`<velt-data field="annotations.length" />`
Hide / show conditionally	`velt-if="{var}"`	`velt-if="{skeletonLoading}"`
Toggle a CSS class	`velt-class="'cls': {var}"`	`velt-class="'sort-{sortState.sortOrder}': true"`

All variables are mapped — reference them by their short name. You do not need the componentConfig. prefix.

Naming conflicts — use full path. A few names collide with mappings used elsewhere. Inside an Inline Comments Section wireframe, prefer the explicit path on the right when reading these values:

Conflicting name	Use this in Inline Comments Section
`readOnly`	`featureState.readOnly`
`messageTruncation`	`featureState.messageTruncation`
`messageTruncationLines`	`featureState.messageTruncationLines`
`componentId`	`uiState.componentId`

The list iterates through the standard Comment Dialog primitives — see Comment Dialog Wireframe Variables for variables that resolve inside nested dialog tags.

App State

App-wide values resolved from the shared signal.

Variable	Type	Description	Example
`user`	`User`	Currently identified end-user.	`<velt-data field="user.name" />`

Data State

Per-section data: the live annotation list, the in-flight composer annotation, and available statuses.

Variable	Type	Description	Example
`annotations`	`CommentAnnotation[]`	Annotations rendered in this section after filter / sort.	`<velt-data field="annotations.length" />`
`allAnnotations`	`CommentAnnotation[]`	Unfiltered list scoped to the section’s target element.	`<velt-data field="allAnnotations.length" />`
`composerCommentAnnotation`	`CommentAnnotation` \| `undefined`	Draft annotation being composed in this section.	`velt-if="{composerCommentAnnotation}"`
`statuses`	`CustomStatus[]`	Available status options for the filter dropdown.	`<velt-data field="statuses.0.name" />`

UI State

Per-instance UI flags driven by the section itself.

Variable	Type	Description	Example
`skeletonLoading`	`boolean`	Skeleton loader is active while annotations load.	`velt-if="{skeletonLoading}"`
`darkMode`	`boolean`	Dark mode is active.	`velt-class="'dark': {darkMode}"`
`variant`	`string`	Per-instance variant tag set on the host element.	`<velt-data field="variant" />`
`uiState.componentId`	`string`	Unique id of this section instance.	`<velt-data field="uiState.componentId" />`
`filterState`	`InlineSectionFilterState`	Combined filter state (filters + dropdown open).	`<velt-data field="filterState.filters.length" />`
`filterState.filters`	`InlineSectionFilterItem[]`	Per-status filter rows.	`<velt-data field="filterState.filters.length" />`
`filterState.filterDropdownOpen`	`boolean`	Filter dropdown menu is open.	`velt-class="'open': {filterState.filterDropdownOpen}"`
`sortState`	`InlineSectionSortState`	Combined sort state.	`<velt-data field="sortState.sortBy" />`
`sortState.sortBy`	`'createdAt'` \| `'lastUpdated'`	Current sort field.	`<velt-data field="sortState.sortBy" />`
`sortState.sortOrder`	`'asc'` \| `'desc'`	Current sort direction.	`velt-class="'sort-{sortState.sortOrder}': true"`
`sortState.activeSortOption`	`InlineSortingCriteria`	Currently selected sort option.	`<velt-data field="sortState.activeSortOption" />`
`sortState.sortingDropdownOpen`	`boolean`	Sort dropdown menu is open.	`velt-class="'open': {sortState.sortingDropdownOpen}"`
`isResolvedCommentsOnDomFilterSelected`	`boolean`	”Show resolved” filter is currently selected.	`velt-class="'show-resolved': {isResolvedCommentsOnDomFilterSelected}"`
`resolvedCommentsOnDom`	`boolean`	Resolved annotations are rendered.	`velt-if="{resolvedCommentsOnDom}"`
`selectedAnnotationsMap`	`SelectedAnnotationsMap`	Map keyed by `annotationId` → selected flag.	`velt-class="'selected': {selectedAnnotationsMap[annotation.annotationId]}"`
`selectedAnnotationsLocationMap`	`SelectedAnnotationsLocationMap`	Internal selection bookkeeping by location.	Internal — read entries via bracket notation if needed.
`parentLocalUIState.shadowDom`	`boolean`	Shadow-DOM rendering is enabled.	Host config — set via element attribute.
`dialogVariant`	`string`	Variant forwarded to nested comment-dialogs.	`<velt-data field="dialogVariant" />`
`composerVariant`	`string`	Variant forwarded to the composer.	`<velt-data field="composerVariant" />`
`composerPosition`	`ComposerPosition`	Composer placement (`'top'` or `'bottom'`).	`velt-class="'composer-{composerPosition}': true"`
`multiThread`	`boolean`	Multi-thread layout is active.	`velt-class="'multi-thread': {multiThread}"`
`fullExpanded`	`boolean`	Section is fully expanded.	`velt-class="'expanded': {fullExpanded}"`
`commentPlaceholder`	`string`	Placeholder for the new-comment composer.	`<velt-data field="commentPlaceholder" />`
`replyPlaceholder`	`string`	Placeholder for the reply composer.	`<velt-data field="replyPlaceholder" />`
`composerPlaceholder`	`string`	Generic composer placeholder.	`<velt-data field="composerPlaceholder" />`
`editPlaceholder`	`string`	Placeholder for the generic edit composer.	`<velt-data field="editPlaceholder" />`
`editCommentPlaceholder`	`string`	Placeholder for the edit-comment composer.	`<velt-data field="editCommentPlaceholder" />`
`editReplyPlaceholder`	`string`	Placeholder for the edit-reply composer.	`<velt-data field="editReplyPlaceholder" />`
`targetElementId`	`string`	DOM target the section is anchored to.	`<velt-data field="targetElementId" />`
`folderId`	`string`	Folder this section’s annotations belong to.	`<velt-data field="folderId" />`
`veltFolderId`	`string`	Velt-managed folder id.	`<velt-data field="veltFolderId" />`
`clientDocumentId`	`string`	Client-supplied document id.	`<velt-data field="clientDocumentId" />`
`documentId`	`string`	Resolved document id for this section.	`<velt-data field="documentId" />`
`locationId`	`string`	Location id this section is scoped to.	`<velt-data field="locationId" />`
`context`	`Record<string, any>`	Free-form annotation context.	`<velt-data field="context.something" />`
`contextOptions`	`ContextOptions`	Context-options config for new annotations.	`<velt-data field="contextOptions.documentId" />`
`readOnly`	`boolean`	Per-instance read-only flag. Prefer `featureState.readOnly` (see naming conflicts above).	`velt-class="'readonly': {readOnly}"`
`messageTruncation`	`boolean`	Per-instance truncation flag. Prefer `featureState.messageTruncation` (see naming conflicts above).	`velt-class="'truncate': {messageTruncation}"`
`messageTruncationLines`	`number`	Per-instance truncation line count. Prefer `featureState.messageTruncationLines` (see naming conflicts above).	`<velt-data field="messageTruncationLines" />`

Feature State

Capability flags toggled via SDK config.

Variable	Type	Description	Example
`featureState.readOnly`	`boolean`	Section is in read-only mode.	`velt-class="'readonly': {featureState.readOnly}"`
`featureState.anonymousEmail`	`boolean`	Anonymous-email capture is enabled.	`velt-if="{featureState.anonymousEmail}"`
`featureState.messageTruncation`	`boolean`	Long messages are truncated.	`velt-class="'truncate': {featureState.messageTruncation}"`
`featureState.messageTruncationLines`	`number`	Line count for truncation.	`<velt-data field="featureState.messageTruncationLines" />`

Common Props

Every Inline Comments Section primitive accepts:

React Prop	HTML Attribute	Type	Default	Description
`defaultCondition`	`default-condition`	`boolean \| "true" \| "false"`	`true`	When `false`, the component always renders regardless of internal state.

Signal inputs (for parent-child component composition):

[componentConfigSignal] — shared per-section config signal (annotations, statuses, filter / sort state).
[parentLocalUIState] — per-instance UI state signal.

The root <velt-inline-comments-section> element additionally accepts attributes that map onto config and local UI state values: target-element-id, folder-id, document-id, location-id, context, dialog-variant, composer-variant, composer-position, comment-placeholder / reply-placeholder / composer-placeholder / edit-placeholder, multi-thread, full-expanded, read-only, message-truncation, message-truncation-lines, dark-mode, variant, shadow-dom.

Context-Specific Variables

These are only resolvable inside the nested wireframe tags noted in the Available in column. Each is injected by the iteration primitive that owns the tag.

Variable	Type	Available in	Example
`filter`	`InlineSectionFilterItem<CustomStatus>`	filter-dropdown list-item / checkbox / label tags	`<velt-data field="filter.metadata.name" />`
`filter.id`	`string`	Same as above.	`<velt-data field="filter.id" />`
`filter.isSelected`	`boolean`	Same as above.	`velt-class="'selected': {filter.isSelected}"`
`filter.metadata`	`CustomStatus`	Same as above.	`<velt-data field="filter.metadata.color" />`
`sortOption`	`InlineSortingCriteria`	sorting-dropdown content-item / -icon / -tick tags	`<velt-data field="sortOption" />`
`sortOptionText`	`string`	sorting-dropdown content-item / -name tags	`<velt-data field="sortOptionText" />`
`isActive`	`boolean`	sorting-dropdown content-item	`velt-class="'active': {isActive}"`
`isAscending`	`boolean`	sorting-dropdown content-item-icon	`velt-if="{isAscending}"`

Type Reference

Types referenced by the variables above are documented in Data Models:

Type	Description
`CommentAnnotation`	The annotation thread (id, status, comments, etc.).
`CustomStatus`	Status definition (id, name, color, icon).
`User`	Identified end-user object.
`ContextOptions`	Context-options config for new annotations.
`InlineSectionFilterState`	Combined filter-state shape (`filters`, `filterDropdownOpen`).
`InlineSectionFilterItem`	One filter row (`id`, `isSelected`, `metadata`).
`InlineSortingCriteria`	Sort-option discriminator (`'createdAt'`, `'lastUpdated'`, `'mostReplies'`, etc.).
`ComposerPosition`	Composer placement (`'top'` \| `'bottom'`).

Subcomponents

Each subcomponent below has its own wireframe tag.

`inline-comments-section` (root)

The customer-facing root primitive customers place in their app.

Public element: <velt-inline-comments-section>
Wireframe tag: <velt-inline-comments-section-wireframe>

Property	Value
Extra variables	None — root only sees common variables.
`shouldShow`	Always renders when present.

`inline-comments-section-panel`

The wrapper container for the section. Composes header (count + filter + sort) + list + composer.

Public element: <velt-inline-comments-section-panel>
Wireframe tag: <velt-inline-comments-section-panel-wireframe>

Property	Value
Extra variables	None beyond common variables.

`inline-comments-section-skeleton`

Skeleton loader.

Public element: <velt-inline-comments-section-skeleton>
Wireframe tag: <velt-inline-comments-section-skeleton-wireframe>

Property	Value
Extra variables	None.
`shouldShow`	`skeletonLoading === true`

`inline-comments-section-comment-count`

The “N comments” label at the top of the section.

Public element: <velt-inline-comments-section-comment-count>
Wireframe tag: <velt-inline-comments-section-comment-count-wireframe>

Property	Value
Extra variables	None beyond common variables.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionWireframe.CommentCount>
  <VeltData field="annotations.length" /> comments
</VeltInlineCommentsSectionWireframe.CommentCount>

<velt-inline-comments-section-comment-count-wireframe>
  <velt-data field="annotations.length"></velt-data> comments
</velt-inline-comments-section-comment-count-wireframe>

`inline-comments-section-list`

Iterates annotations and renders a comment-dialog primitive per entry. Inside, the standard Comment Dialog Wireframe Variables resolve.

Public element: <velt-inline-comments-section-list>
Wireframe tag: <velt-inline-comments-section-list-wireframe>

Property	Value
Extra variables	None at the list level. The nested comment-dialog tags receive `commentObj` / `commentIndex` from each iteration — see Comment Dialog.

`inline-comments-section-composer-container`

The per-section composer (renders the standard comment-dialog composer). Inside this wireframe the standard Comment Dialog Composer variables are available.

Public element: <velt-inline-comments-section-composer-container>
Wireframe tag: <velt-inline-comments-section-composer-container-wireframe>

Property	Value
Extra variables	None at the container level. The nested composer injects `editMode` / `commentObj` / `commentIndex` — see Comment Dialog Wireframe Variables.

Deeply-Nested Wireframe Tags

The filter and sort dropdowns decompose further. Each tag below has its own <velt-inline-comments-section-...-wireframe> registration and inherits context variables from its parent dropdown. The filter dropdown lets the user filter the section by status. Composes trigger + content (with apply button) + per-status list-items.

Tag	Notes	Example
`<velt-inline-comments-section-filter-dropdown-wireframe>`	Root.	`velt-class="'open': {filterState.filterDropdownOpen}"`
`<velt-inline-comments-section-filter-dropdown-trigger-wireframe>`	Trigger pill.	(click handler)
`<velt-inline-comments-section-filter-dropdown-trigger-name-wireframe>`	Trigger label.	`<velt-data field="filterState.filters.length" />`
`<velt-inline-comments-section-filter-dropdown-trigger-arrow-wireframe>`	Chevron.	Visual only.
`<velt-inline-comments-section-filter-dropdown-content-wireframe>`	Open menu.	`velt-class="'open': {filterState.filterDropdownOpen}"`
`<velt-inline-comments-section-filter-dropdown-content-list-wireframe>`	List wrapper.	(iterates over `filterState.filters`)
`<velt-inline-comments-section-filter-dropdown-content-list-item-wireframe>`	Per-status row. Exposes `filter`.	`<velt-data field="filter.metadata.name" />`
`<velt-inline-comments-section-filter-dropdown-content-list-item-checkbox-wireframe>`	Checkbox. Exposes `filter`.	`velt-class="'checked': {filter.isSelected}"`
`<velt-inline-comments-section-filter-dropdown-content-list-item-label-wireframe>`	Status name. Exposes `filter`.	`<velt-data field="filter.metadata.name" />`
`<velt-inline-comments-section-filter-dropdown-content-apply-button-wireframe>`	Apply button.	(click handler)

The sort dropdown — pick between “Created first”, “Last updated”, “Most replies”, etc. Composes trigger + content + per-option content-items with tick / icon / name.

Tag	Notes	Example
`<velt-inline-comments-section-sorting-dropdown-wireframe>`	Root.	`velt-class="'open': {sortState.sortingDropdownOpen}"`
`<velt-inline-comments-section-sorting-dropdown-trigger-wireframe>`	Trigger pill.	(click handler)
`<velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe>`	Trigger icon.	`velt-class="'sort-{sortState.sortOrder}': true"`
`<velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe>`	Trigger label.	`<velt-data field="sortState.activeSortOption" />`
`<velt-inline-comments-section-sorting-dropdown-content-wireframe>`	Open menu.	`velt-class="'open': {sortState.sortingDropdownOpen}"`
`<velt-inline-comments-section-sorting-dropdown-content-item-wireframe>`	Per-option row. Exposes `sortOption`, `sortOptionText`, `isActive`.	`velt-class="'active': {isActive}"`
`<velt-inline-comments-section-sorting-dropdown-content-item-icon-wireframe>`	Per-option icon. Exposes `sortOption`, `isAscending`.	`velt-if="{isAscending}"`
`<velt-inline-comments-section-sorting-dropdown-content-item-name-wireframe>`	Per-option label. Exposes `sortOptionText`.	`<velt-data field="sortOptionText" />`
`<velt-inline-comments-section-sorting-dropdown-content-item-tick-wireframe>`	Selected-indicator tick. Exposes `sortOption`. Visible only when this is the active sort option.	`<velt-data field="sortOption" />`

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item
  veltClass="'active': {isActive}">
  <VeltData field="sortOptionText" />
</VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>

<velt-inline-comments-section-sorting-dropdown-content-item-wireframe
  velt-class="'active': {isActive}">
  <velt-data field="sortOptionText"></velt-data>
</velt-inline-comments-section-sorting-dropdown-content-item-wireframe>

Inline Comments Section Wireframes — composition reference for the wireframe tags themselves.
Inline Comments Section Primitives — granular components if you don’t need a full wireframe.
Comment Dialog Wireframe Variables — variables that resolve inside nested dialog tags rendered by the list.
Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Inline Comments Section Wireframe Variables

Overview

App State

Data State

UI State

Feature State

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`inline-comments-section` (root)

`inline-comments-section-panel`

`inline-comments-section-skeleton`

`inline-comments-section-comment-count`

`inline-comments-section-list`

`inline-comments-section-composer-container`

Deeply-Nested Wireframe Tags

​Overview

​App State

​Data State

​UI State

​Feature State

​Common Props

​Context-Specific Variables

​Type Reference

​Subcomponents

​inline-comments-section (root)

​inline-comments-section-panel

​inline-comments-section-skeleton

​inline-comments-section-comment-count

​inline-comments-section-list

​inline-comments-section-composer-container

​Deeply-Nested Wireframe Tags

​Filter dropdown tags

​Sorting dropdown tags

​Related

Overview

App State

Data State

UI State

Feature State

Common Props

Context-Specific Variables

Type Reference

Subcomponents

`inline-comments-section` (root)

`inline-comments-section-panel`

`inline-comments-section-skeleton`

`inline-comments-section-comment-count`

`inline-comments-section-list`

`inline-comments-section-composer-container`

Deeply-Nested Wireframe Tags

Filter dropdown tags

Sorting dropdown tags

Related