> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Note>
  New to wireframes? Start with [UI Customization Concepts](/docs/ui-customization/overview) and the [Template Variables](/docs/ui-customization/template-variables) overview.
</Note>

## 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}'"` |

<Note>
  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.
</Note>

## 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`](/docs/api-reference/sdk/models/data-models#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). |

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <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>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## Related

* [Comment Tool](./comment-tool) — wireframe overview and default markup for this primitive.
* [Template Variables](/docs/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.