Setup

import { VeltCommentThread, useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  let commentAnnotations = useCommentAnnotations()

  return (
    <div>
      {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
    </div>
  )
}

Retrieve Comment Annotations

Retrieve all comment annotations data.
Learn more.

Using Hooks:

let commentAnnotations = useCommentAnnotations()

Using API:

const commentElement = client.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
  // console.log(commentAnnotations);
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

Using Hooks:

let commentAnnotations = useCommentAnnotations()

Using API:

const commentElement = client.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
  // console.log(commentAnnotations);
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

const commentElement = Velt.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
  // console.log(commentAnnotations);
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

Add the Velt Comment Thread component

Iterate over the Comment Annotations array and add the Velt Comment Thread component.
Pass the annotation Id prop to set the specific Comment Thread data.

Here’s an improved example:


let commentAnnotations = useCommentAnnotations()

return (
  <div>
    {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
  </div>
)


let commentAnnotations = useCommentAnnotations()

return (
  <div>
    {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
  </div>
)

<!-- 
  If you are using pure html, inject <velt-comment-thread annotation-id="ANNOTATION_ID"></velt-comment-thread>
  In other frameworks, you can loop over the comments inside the template itself
-->
<velt-comment-thread annotation-id="ANNOTATION_ID"></velt-comment-thread>

import { VeltCommentThread, useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  let commentAnnotations = useCommentAnnotations()

  return (
    <div>
      {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
    </div>
  )
}

Overview Customize Behavior

import { VeltCommentThread, useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  let commentAnnotations = useCommentAnnotations()

  return (
    <div>
      {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
    </div>
  )
}

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

Self-Host Data

Model Context Protocol

Webhooks

Security

Miscellaneous

Retrieve Comment Annotations

Add the Velt Comment Thread component