Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.velt.dev/llms.txt

Use this file to discover all available pages before exploring further.

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…UseExample
Display a value as text<velt-data field="var" /><velt-data field="annotations.length" />
Hide / show conditionallyvelt-if="{var}"velt-if="{skeletonLoading}"
Toggle a CSS classvelt-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 nameUse this in Inline Comments Section
readOnlyfeatureState.readOnly
messageTruncationfeatureState.messageTruncation
messageTruncationLinesfeatureState.messageTruncationLines
componentIduiState.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.
VariableTypeDescriptionExample
userUserCurrently 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.
VariableTypeDescriptionExample
annotationsCommentAnnotation[]Annotations rendered in this section after filter / sort.<velt-data field="annotations.length" />
allAnnotationsCommentAnnotation[]Unfiltered list scoped to the section’s target element.<velt-data field="allAnnotations.length" />
composerCommentAnnotationCommentAnnotation | undefinedDraft annotation being composed in this section.velt-if="{composerCommentAnnotation}"
statusesCustomStatus[]Available status options for the filter dropdown.<velt-data field="statuses.0.name" />

​
UI State

Per-instance UI flags driven by the section itself.
VariableTypeDescriptionExample
skeletonLoadingbooleanSkeleton loader is active while annotations load.velt-if="{skeletonLoading}"
darkModebooleanDark mode is active.velt-class="'theme-dark': {darkMode}"
variantstringPer-instance variant tag set on the host element.<velt-data field="variant" />
uiState.componentIdstringUnique id of this section instance.<velt-data field="uiState.componentId" />
filterStateInlineSectionFilterStateCombined filter state (filters + dropdown open).<velt-data field="filterState.filters.length" />
filterState.filtersInlineSectionFilterItem[]Per-status filter rows.<velt-data field="filterState.filters.length" />
filterState.filterDropdownOpenbooleanFilter dropdown menu is open.velt-class="'open': {filterState.filterDropdownOpen}"
sortStateInlineSectionSortStateCombined 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.activeSortOptionInlineSortingCriteriaCurrently selected sort option.<velt-data field="sortState.activeSortOption" />
sortState.sortingDropdownOpenbooleanSort dropdown menu is open.velt-class="'open': {sortState.sortingDropdownOpen}"
isResolvedCommentsOnDomFilterSelectedboolean”Show resolved” filter is currently selected.velt-class="'show-resolved': {isResolvedCommentsOnDomFilterSelected}"
resolvedCommentsOnDombooleanResolved annotations are rendered.velt-if="{resolvedCommentsOnDom}"
selectedAnnotationsMapSelectedAnnotationsMapMap keyed by annotationId → selected flag.velt-class="'selected': {selectedAnnotationsMap[annotation.annotationId]}"
selectedAnnotationsLocationMapSelectedAnnotationsLocationMapInternal selection bookkeeping by location.Internal — read entries via bracket notation if needed.
parentLocalUIState.shadowDombooleanShadow-DOM rendering is enabled.Host config — set via element attribute.
dialogVariantstringVariant forwarded to nested comment-dialogs.<velt-data field="dialogVariant" />
composerVariantstringVariant forwarded to the composer.<velt-data field="composerVariant" />
composerPositionComposerPositionComposer placement ('top' or 'bottom').velt-class="'composer-{composerPosition}': true"
multiThreadbooleanMulti-thread layout is active.velt-class="'multi-thread': {multiThread}"
fullExpandedbooleanSection is fully expanded.velt-class="'expanded': {fullExpanded}"
commentPlaceholderstringPlaceholder for the new-comment composer.<velt-data field="commentPlaceholder" />
replyPlaceholderstringPlaceholder for the reply composer.<velt-data field="replyPlaceholder" />
composerPlaceholderstringGeneric composer placeholder.<velt-data field="composerPlaceholder" />
editPlaceholderstringPlaceholder for the generic edit composer.<velt-data field="editPlaceholder" />
editCommentPlaceholderstringPlaceholder for the edit-comment composer.<velt-data field="editCommentPlaceholder" />
editReplyPlaceholderstringPlaceholder for the edit-reply composer.<velt-data field="editReplyPlaceholder" />
targetElementIdstringDOM target the section is anchored to.<velt-data field="targetElementId" />
folderIdstringFolder this section’s annotations belong to.<velt-data field="folderId" />
veltFolderIdstringVelt-managed folder id.<velt-data field="veltFolderId" />
clientDocumentIdstringClient-supplied document id.<velt-data field="clientDocumentId" />
documentIdstringResolved document id for this section.<velt-data field="documentId" />
locationIdstringLocation id this section is scoped to.<velt-data field="locationId" />
contextRecord<string, any>Free-form annotation context.<velt-data field="context.something" />
contextOptionsContextOptionsContext-options config for new annotations.<velt-data field="contextOptions.documentId" />
readOnlybooleanPer-instance read-only flag. Prefer featureState.readOnly (see naming conflicts above).velt-class="'readonly': {readOnly}"
messageTruncationbooleanPer-instance truncation flag. Prefer featureState.messageTruncation (see naming conflicts above).velt-class="'truncate': {messageTruncation}"
messageTruncationLinesnumberPer-instance truncation line count. Prefer featureState.messageTruncationLines (see naming conflicts above).<velt-data field="messageTruncationLines" />

​
Feature State

Capability flags toggled via SDK config.
VariableTypeDescriptionExample
featureState.readOnlybooleanSection is in read-only mode.velt-class="'readonly': {featureState.readOnly}"
featureState.anonymousEmailbooleanAnonymous-email capture is enabled.velt-if="{featureState.anonymousEmail}"
featureState.messageTruncationbooleanLong messages are truncated.velt-class="'truncate': {featureState.messageTruncation}"
featureState.messageTruncationLinesnumberLine count for truncation.<velt-data field="featureState.messageTruncationLines" />

​
Common Props

Every Inline Comments Section primitive accepts:
React PropHTML AttributeTypeDefaultDescription
defaultConditiondefault-conditionboolean | "true" | "false"trueWhen 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.
VariableTypeAvailable inExample
filterInlineSectionFilterItem<CustomStatus>filter-dropdown list-item / checkbox / label tags<velt-data field="filter.metadata.name" />
filter.idstringSame as above.<velt-data field="filter.id" />
filter.isSelectedbooleanSame as above.velt-class="'selected': {filter.isSelected}"
filter.metadataCustomStatusSame as above.<velt-data field="filter.metadata.color" />
sortOptionInlineSortingCriteriasorting-dropdown content-item / -icon / -tick tags<velt-data field="sortOption" />
sortOptionTextstringsorting-dropdown content-item / -name tags<velt-data field="sortOptionText" />
isActivebooleansorting-dropdown content-itemvelt-class="'active': {isActive}"
isAscendingbooleansorting-dropdown content-item-iconvelt-if="{isAscending}"

​
Type Reference

Types referenced by the variables above are documented in Data Models:
TypeDescription
CommentAnnotationThe annotation thread (id, status, comments, etc.).
CustomStatusStatus definition (id, name, color, icon).
UserIdentified end-user object.
ContextOptionsContext-options config for new annotations.
InlineSectionFilterStateCombined filter-state shape (filters, filterDropdownOpen).
InlineSectionFilterItemOne filter row (id, isSelected, metadata).
InlineSortingCriteriaSort-option discriminator ('createdAt', 'lastUpdated', 'mostReplies', etc.).
ComposerPositionComposer 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>
PropertyValue
Extra variablesNone — root only sees common variables.
shouldShowAlways 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>
PropertyValue
Extra variablesNone beyond common variables.

​
inline-comments-section-skeleton

Skeleton loader.
  • Public element: <velt-inline-comments-section-skeleton>
  • Wireframe tag: <velt-inline-comments-section-skeleton-wireframe>
PropertyValue
Extra variablesNone.
shouldShowskeletonLoading === 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>
PropertyValue
Extra variablesNone beyond common variables.
<VeltInlineCommentsSectionWireframe.CommentCount>
  <velt-data field="annotations.length" /> comments
</VeltInlineCommentsSectionWireframe.CommentCount>

​
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>
PropertyValue
Extra variablesNone 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>
PropertyValue
Extra variablesNone 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.

​
Filter dropdown tags

The filter dropdown lets the user filter the section by status. Composes trigger + content (with apply button) + per-status list-items.
TagNotesExample
<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)

​
Sorting dropdown tags

The sort dropdown — pick between “Created first”, “Last updated”, “Most replies”, etc. Composes trigger + content + per-option content-items with tick / icon / name.
TagNotesExample
<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. Visible only when this is the active sort option.velt-if="{isActive}"
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item
  velt-class="'active': {isActive}">
  <velt-data field="sortOptionText" />
</VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>

​
Putting it together

A typical section header that shows the comment count, an active sort label, and a filter trigger that lights up while the dropdown is open: 
<VeltInlineCommentsSectionWireframe>
  <header className="my-section__header">
    <VeltInlineCommentsSectionWireframe.CommentCount>
      <velt-data field="annotations.length" /> comments
    </VeltInlineCommentsSectionWireframe.CommentCount>

    <VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger
      velt-class="'open': {filterState.filterDropdownOpen}">
      <span>Filter (<velt-data field="filterState.filters.length" />)</span>
    </VeltInlineCommentsSectionWireframe.FilterDropdown.Trigger>

    <VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
      <span>Sort: <velt-data field="sortState.activeSortOption" /></span>
    </VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
  </header>
  <VeltInlineCommentsSectionWireframe.List />
  <VeltInlineCommentsSectionWireframe.ComposerContainer />
</VeltInlineCommentsSectionWireframe>