Comment Tool Wireframe Variables

Template variables exposed by the Comment Tool 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 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

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

Other Frameworks

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

Related

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