Comment Tool Wireframe Variables

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

Overview

The Comment Tool wireframe exposes the variables below. Use them inside a <velt-comment-tool-wireframe> tag via three forms:

You want to…	Use	Example
Display a value as text	`<velt-data field="var" />`	`<velt-data field="componentConfig.data.locationId" />`
Hide / show conditionally	`velt-if="{var}"`	`velt-if="{globalConfig.featureState.addCommentMode}"`
Toggle a CSS class	`velt-class="'cls': {var}"`	`velt-class="'is-disabled': '!{commentToolEnabled}'"`

This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> (per-instance) or globalConfig.featureState.<name> (cross-document) form. The wireframe also exposes a flat compatibility shape that surfaces top-level flags directly: {commentToolEnabled}, {addCommentMode}, and {disabled} resolve without any prefix. Tables below use the canonical full path for clarity.

Component Config

Variable	Type	Description	Example
`globalConfig.featureState.commentToolEnabled`	`boolean`	Comment Tool is enabled at the workspace level.	`velt-class="'is-disabled': '!{globalConfig.featureState.commentToolEnabled}'"`
`globalConfig.featureState.addCommentMode`	`boolean`	Add-comment mode is currently active (next click anywhere drops a new pin).	`velt-class="'add-mode': {globalConfig.featureState.addCommentMode}"`
`globalConfig.featureState.popoverMode`	`boolean`	Popover mode is enabled — the comment dialog opens as a popover after a pin is dropped.	`velt-class="'popover': {globalConfig.featureState.popoverMode}"`
`globalConfig.featureState.groupMatchedComments`	`boolean`	Matched comments are grouped together on the page.	`velt-class="'grouped': {globalConfig.featureState.groupMatchedComments}"`
`componentConfig.data.commentAnnotationAvailable`	`boolean`	An annotation is currently associated with this tool instance.	`velt-if="{componentConfig.data.commentAnnotationAvailable}"`
`componentConfig.data.context`	`object` \| `null`	Free-form annotation context bound to this tool instance.	`<velt-data field="componentConfig.data.context.foo" />`
`componentConfig.data.contextOptions`	`ContextOptions` \| `null`	Context-options config for the next annotation.	Used internally — read individual fields if needed.
`componentConfig.data.folderId`	`string` \| `null`	Folder this tool drops annotations into.	`<velt-data field="componentConfig.data.folderId" />`
`componentConfig.data.veltFolderId`	`string` \| `null`	Velt-managed folder id (when no client folder is set).	`<velt-data field="componentConfig.data.veltFolderId" />`
`componentConfig.data.clientDocumentId`	`string` \| `null`	Client-supplied document id.	`<velt-data field="componentConfig.data.clientDocumentId" />`
`componentConfig.data.documentId`	`string` \| `null`	Resolved document id for this instance.	`<velt-data field="componentConfig.data.documentId" />`
`componentConfig.data.locationId`	`string` \| `null`	Location id this tool is scoped to.	`<velt-data field="componentConfig.data.locationId" />`
`componentConfig.data.targetElementId`	`string` \| `null`	DOM target the next annotation will anchor onto.	`<velt-data field="componentConfig.data.targetElementId" />`
`componentConfig.data.sourceId`	`string` \| `null`	Source-id passed through from the host application.	`<velt-data field="componentConfig.data.sourceId" />`
`componentConfig.data.disabled`	`boolean`	Tool is disabled by host configuration.	`velt-class="'is-disabled': {componentConfig.data.disabled}"`
`componentConfig.uiState.showDefaultBtn`	`boolean`	Default built-in button should render. Set to `false` when a wireframe overrides the button entirely.	`velt-if="{componentConfig.uiState.showDefaultBtn}"`
`componentConfig.uiState.shadowDom`	`boolean`	Shadow-DOM rendering is enabled. Set on the host element, not from inside the wireframe.	Host config — set via element attribute.
`componentConfig.uiState.darkMode`	`boolean`	Dark mode is active for this instance.	`velt-class="'dark': {componentConfig.uiState.darkMode}"`
`componentConfig.uiState.addCommentMode`	`boolean`	Per-instance mirror of `globalConfig.featureState.addCommentMode`.	`velt-class="'active': {componentConfig.uiState.addCommentMode}"`
`componentConfig.uiState.contextInPageModeComposer`	`boolean`	Tool is rendering inside a page-mode composer.	`velt-class="'in-composer': {componentConfig.uiState.contextInPageModeComposer}"`
`componentConfig.uiState.commentToolEnabled`	`boolean`	Per-instance mirror of `globalConfig.featureState.commentToolEnabled`.	`velt-class="'enabled': {componentConfig.uiState.commentToolEnabled}"`
`parentLocalUIState.darkMode`	`boolean`	Local dark-mode flag (host attribute).	`velt-class="'dark': {parentLocalUIState.darkMode}"`
`parentLocalUIState.variant`	`string`	Per-instance variant tag set on the host element.	`<velt-data field="parentLocalUIState.variant" />`
`parentLocalUIState.shadowDom`	`boolean`	Local shadow-DOM flag.	Host config — set via element attribute.

Subcomponents

`comment-tool` (root)

The trigger button customers place in their toolbar. Clicking it puts the document into add-comment mode (the next click anywhere drops a new pin).

Public element: <velt-comments-tool>
Wireframe tag: <velt-comment-tool-wireframe> (singular — registered name differs from the public element).

Property	Value
Extra variables	None — root only sees common variables.
`shouldShow`	Always renders. The inner button visually disables when `commentToolEnabled === false`.

Classes

Class	Applied when
`velt-comment-tool`	Always on the host wrapper.
`velt-tool--action-btn`	Always on the inner button.
`active`	`addCommentMode` is true.
`velt-tool--action-btn-disabled`	`commentToolEnabled` is false.
`velt-tool--action-btn-icon`	On the inner SVG.
`velt-comment-tool--custom-btn`	On the custom-button slot (when overridden).

React / Next.js
Other Frameworks

<VeltCommentToolWireframe>
  <button
    className="my-comment-button"
    velt-class="'active': {addCommentMode}, 'disabled': '!{commentToolEnabled}'">
    <span velt-if="{addCommentMode}">Click anywhere…</span>
    <span velt-if="!{addCommentMode}">Add comment</span>
  </button>
</VeltCommentToolWireframe>

<velt-comment-tool-wireframe>
  <button class="my-comment-button"
          velt-class="'active': {addCommentMode}, 'disabled': '!{commentToolEnabled}'">
    <span velt-if="{addCommentMode}">Click anywhere…</span>
    <span velt-if="!{addCommentMode}">Add comment</span>
  </button>
</velt-comment-tool-wireframe>

Putting it together

A typical Comment Tool button that swaps its label and styling between idle and add-comment mode, and visually disables itself when the workspace flag is off:

React / Next.js
Other Frameworks

<VeltCommentToolWireframe>
  <button
    className="my-tool"
    velt-class="'is-active': {addCommentMode}, 'is-off': '!{commentToolEnabled}'">
    <svg className="my-tool__icon" />
    <span velt-if="!{addCommentMode}">Comment</span>
    <span velt-if="{addCommentMode}">Click anywhere to comment</span>
  </button>
</VeltCommentToolWireframe>

<velt-comment-tool-wireframe>
  <button class="my-tool"
          velt-class="'is-active': {addCommentMode}, 'is-off': '!{commentToolEnabled}'">
    <svg class="my-tool__icon"></svg>
    <span velt-if="!{addCommentMode}">Comment</span>
    <span velt-if="{addCommentMode}">Click anywhere to comment</span>
  </button>
</velt-comment-tool-wireframe>

Comment Tool — wireframe overview and default markup for this primitive.
Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Comment Tool Wireframe Variables

Overview

Component Config

Subcomponents

`comment-tool` (root)

Classes

Putting it together

Concepts

Async Collaboration

Realtime Collaboration

Documentation Index

​Overview

​Component Config

​Subcomponents

​comment-tool (root)

​Classes

​Putting it together

​Related

Overview

Component Config

Subcomponents

`comment-tool` (root)

Classes

Putting it together

Related