Comment Text

The Comment Text component attaches an existing comment to a specific piece of text in your own markup. Put any text inside it and give it an annotation id: it highlights that text and attaches the comment to it. Use it when the text you want to comment on lives in your own components and you already know which annotation belongs to it, for example when rendering comments in a rich-text editor. For selection-driven commenting where the user picks the text, use text comments instead.

Setup

Wrap the text and pass either annotationId or multiThreadAnnotationId.

React / Next.js
Other Frameworks

import { VeltCommentText } from '@veltdev/react';

<VeltCommentText annotationId="ANNOTATION_ID">
  {/* your content here */}
</VeltCommentText>

<VeltCommentText multiThreadAnnotationId="MULTI_THREAD_ANNOTATION_ID">
  {/* your content here */}
</VeltCommentText>

<velt-comment-text annotation-id="ANNOTATION_ID">
  <!-- your content here -->
</velt-comment-text>

<velt-comment-text multi-thread-annotation-id="MULTI_THREAD_ANNOTATION_ID">
  <!-- your content here -->
</velt-comment-text>

Props

Prop	HTML attribute	Type	Required	Description
`annotationId`	`annotation-id`	`string`	No	The comment annotation to attach to the wrapped text.
`multiThreadAnnotationId`	`multi-thread-annotation-id`	`string`	No	The multi-thread annotation to attach to the wrapped text.

This component renders the velt-comment-text element. It is distinct from VeltTextComment, which is the selection toolbar used by text comments.

⌘I

Get Started

Agentic Setup

Key Concepts

Async Collaboration

Realtime Collaboration

AI

Self-Host Data

Backend SDKs

Model Context Protocol

Webhooks

Security

Miscellaneous

Comment Text

Setup

Props

​Setup

​Props

Setup

Props