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

# Setup

## 1. Retrieve Comment Annotations

* Retrieve all comment annotations data.
* [Learn more](https://velt.dev/docs/async-collaboration/comments/customize-behavior.md#getcommentannotations).

> [tab] React / Next.js
>
> Using Hooks:
>
> ```jsx theme={null}
> let commentAnnotations = useCommentAnnotations()
> ```
>
> Using API:
>
> ```js theme={null}
> const commentElement = client.getCommentElement();
> let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
>   // console.log(commentAnnotations);
> });
> ```
>
> To unsubscribe from the subscription:
>
> ```jsx theme={null}
> subscription?.unsubscribe()
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const commentElement = Velt.getCommentElement();
> let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
>   // console.log(commentAnnotations);
> });
> ```
>
> To unsubscribe from the subscription:
>
> ```jsx theme={null}
> subscription?.unsubscribe()
> ```

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

> [tab] React / Next.js
>
> ```jsx theme={null}
>
> let commentAnnotations = useCommentAnnotations()
>
> return (
>   <div>
>     {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
>   </div>
> )
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <!-- 
>   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>
> ```

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

```js Other Frameworks theme={null}
const commentElement = client.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((comments) => {
    // 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
});

//To unsubscribe from the subscription:
subscription?.unsubscribe()
```


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