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

# Stream Setup

![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/gifs/View-Stream-Comments.gif?s=bb2b9f6334216c89547474edcaf72d93)

> [tab] React / Next.js
>
> ## 1. Import Comment components
>
> Import the `VeltComments` component.
>
> ```js theme={null}
> import {
>   VeltProvider,
>   VeltComments,
> } from '@veltdev/react';
> ```
>
> ## 2. Add `VeltComments` component with Stream mode
>
> Add the `VeltComments` component inside a scrolling container. Make it a sibling to the element that contains the content you want to be commented.
>
> In the `VeltComments` component, mark the `streamMode` attribute as `true`.
>
> Also set the `streamViewContainerId` attribute to the id of the scrolling container.
>
> Stream mode renders all comment dialog boxes in a column on the right side similar to Google Docs. It works well with Text mode, which is enabled by default.
>
> Setting a reference to the container ID helps us position & scroll the comment stream as the user scrolls more robustly.
>
> ```js theme={null}
> <VeltProvider apiKey="API_KEY">
>   <div id="scrolling-container-id">
>     //This element is scrollable
>     <div className="target-content">
>       //This element contains the content that you want to be commented.
>     </div>
>     <VeltComments
>       streamMode={true}
>       streamViewContainerId="scrolling-container-id"
>     />
>   </div>
> </VeltProvider>
>
> ```
>
> ## 3. Test Integration
>
> Test it out by adding a comment.
>
> Select any text, a `Comment Tool` button will appear near the highlighted text.
>
> Click on it to add a comment and see the comment appear in the comment stream.

> [tab] Other Frameworks
>
> ## 1. Add the velt-comments component with Stream mode
>
> Add the `<velt-comments>`  component inside a scrolling container. Make it a sibling to the element that contains the content you want to be commented.
>
> In the `<velt-comments>`  component, mark the `stream-mode` attribute as `true`.
>
> Also set the `stream-view-container-id` attribute to the id of the scrolling container.
>
> Stream mode renders all comment dialog boxes in a column on the right side similar to Google Docs. It works well with Text mode, which is enabled by default.
>
> Setting a reference to the container ID helps us position & scroll the comment stream as the user scrolls more robustly.
>
> ```html theme={null}
> <body>
>   <div id="scrolling-container-id">
>     //This element is scrollable
>     <div class="target-content">
>       //This element contains the content that you want to be commented.
>     </div>
>     <velt-comments
>       stream-mode="true"
>       stream-view-container-id="scrolling-comment-stream"
>     ></velt-comments>
>   </div>
> </body>
> ```
>
> ## 2. Test Integration
>
> Test it out by adding a comment.
>
> Select any text, a `Comment Tool` button will appear near the highlighted text.
>
> Click on it to add a comment and see the comment appear in the comment stream.

```jsx React / Next.js theme={null}
import { VeltProvider, VeltComments, VeltCommentTool } from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <div id="scrolling-container-id">

        //This element is scrollable
        <div className="target-content">
          //This element contains the content that you want to be commented.
        </div>

        <VeltComments
          streamMode={true}
          streamViewContainerId="scrolling-container-id"
        />

      </div>

    </VeltProvider>
  );
}
```

```html HTML theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Comment documentation</title>
  </head>
  <body>
    <div id="scrolling-container-id">
      //This element is scrollable
      <div class="target-content">
        //This element contains the content that you want to be commented.
      </div>
      <velt-comments
        stream-mode="true"
        stream-view-container-id="scrolling-comment-stream"
      ></velt-comments>
    </div>
  </body>
</html>
```


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