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

# Inline Comments Setup

![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/gifs/inline-comment.gif?s=2dec4833ca1e492d6e8945db7ca527db)

> [tab] React / Next.js
>
> ## 1. Import Comment components
>
> Import the `VeltProvider`, `VeltComments`, and `VeltInlineCommentsSection` component.
>
> ```js theme={null}
> import { VeltProvider, VeltComments, VeltInlineCommentsSection } from '@veltdev/react';
> ```
>
> ## 2. Add VeltComments component
>
> * Add the `VeltComments` component to the root of your app where your `VeltProvider` is.
> * This component is required to render comments in your app.
>
> ```js theme={null}
> <VeltProvider apiKey="API_KEY">
>   <VeltComments />
> </VeltProvider>
> ```
>
> ## 3. Add container to hold Inline Comments component
>
> * Create an element to hold your Inline Comments component, such as a `div` or `section`.
> * Add a unique element `id` to it.
>
> ```jsx theme={null}
> <section id="container-id">
> 	<div>Your Article</div>
> </section>
> ```
>
> ## 4. Add VeltInlineCommentsSection component
>
> * Add `VeltInlineCommentsSection` component inside your container.
> * Add `targetElementId` property to the Velt Inline Comments component. This needs to match the id you set to the container. This binds the Inline Comments component with the desired container.
>
> ```jsx theme={null}
> <VeltInlineCommentsSection
>   targetElementId="container-id"
> />
> ```
>
> ## 5. (Optional) Make it single threaded or multithreaded
>
> * Default: `true`
> * By default inline comment section is multithreaded.
> * You can make it single threaded by setting `multiThread` attribute to `false`.
>
> ```jsx theme={null}
> <VeltInlineCommentsSection multiThread={false} />
> ```
>
> ## 6. (Optional) Customize placeholder text
>
> Customize the placeholder text for comment, reply, and composer input fields.
>
> ```jsx theme={null}
> <VeltInlineCommentsSection
>   commentPlaceholder="Add a comment..."
>   replyPlaceholder="Write a reply..."
>   composerPlaceholder="Start typing..."
> />
> ```
>
> To customize placeholder text shown when **editing** an existing comment or reply, use `editPlaceholder`, `editCommentPlaceholder`, and `editReplyPlaceholder`. See [`VeltInlineCommentsSectionProps`](https://velt.dev/docs/api-reference/sdk/models/data-models#veltinlinecommentssectionprops) for details.
>
> ## 7. (Optional) Enable message truncation
>
> * Default: `false`
> * Truncate long messages in the list, showing a **Show more** toggle after the specified number of lines.
> * Use `messageTruncationLines` to control the cutoff (default: `4`).
>
> ```jsx theme={null}
> <VeltInlineCommentsSection
>   targetElementId="article0"
>   messageTruncation={true}
>   messageTruncationLines={3}
> />
> ```

> [tab] Other Frameworks
>
> ## 1. Add velt-comments component
>
> * Add the Velt Comments component to the root of your app.
> * This component is required to render comments in your app.
>
> ```html theme={null}
> <body>
>   <velt-comments></velt-comments>
> </body>
> ```
>
> ## 2. Add container to hold Inline Comments component
>
> * Create an element to hold your Inline Comments component, such as a `div` or `section`.
> * Add a unique element `id` to it.
>
> ```html theme={null}
> <section id="container-id">
> 	<div>Your Article</div>
> </section>
> ```
>
> ## 3. Add velt-inline-comments-section component
>
> * Add `velt-inline-comments-section` component inside your container.
> * Add `target-element-id` property to the Velt Inline Comments component. This needs to match the id you set to the container. This binds the Inline Comments component with the desired container.
>
> ```jsx theme={null}
> <velt-inline-comments-section
> 		target-element-id="container-id"
> 		shadow-dom="false"
> 		dialog-variant="dialog-variant"
> 		variant="inline-section-variant"
> 		dark-mode="true"
> >
> </velt-inline-comments-section>
> ```
>
> ## 4. (Optional) Make it single threaded or multithreaded
>
> * Default: `true`
> * By default inline comments are multithreaded.
> * You can make it single threaded by setting `multi-thread` attribute to `false`.
>
> ```html theme={null}
>   <velt-inline-comments-section multi-thread="false">
>   </velt-inline-comments-section>
> ```
>
> ## 5. (Optional) Customize placeholder text
>
> Customize the placeholder text for comment, reply, and composer input fields.
>
> ```html theme={null}
> <velt-inline-comments-section
>   comment-placeholder="Add a comment..."
>   reply-placeholder="Write a reply..."
>   composer-placeholder="Start typing..."
> >
> </velt-inline-comments-section>
> ```
>
> To customize placeholder text shown when **editing** an existing comment or reply, use `edit-placeholder`, `edit-comment-placeholder`, and `edit-reply-placeholder`. See [`VeltInlineCommentsSectionProps`](https://velt.dev/docs/api-reference/sdk/models/data-models#veltinlinecommentssectionprops) for details.
>
> ## 6. (Optional) Enable message truncation
>
> * Default: `false`
> * Truncate long messages in the list, showing a **Show more** toggle after the specified number of lines.
> * Use `message-truncation-lines` to control the cutoff (default: `4`).
>
> ```html theme={null}
> <velt-inline-comments-section
>   target-element-id="article0"
>   message-truncation="true"
>   message-truncation-lines="3">
> </velt-inline-comments-section>
> ```

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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <VeltComments />

      <section id="container-id">
        <div>Your Article</div>

        <VeltInlineCommentsSection
          targetElementId="container-id"
          shadowDom={false}
          dialogVariant="dialog-variant"
          variant="inline-section-variant"
          darkMode={true}
        />
      </section>


    </VeltProvider>
  );
}
```

```html HTML theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Comment documentation</title>
  </head>
  <body>
    <velt-comments></velt-comments>
    <section id="container-id">
      <div>Your Article</div>

      <velt-inline-comments-section
        target-element-id="container-id"
        shadow-dom="false"
        dialog-variant="dialog-variant"
        variant="inline-section-variant"
        dark-mode="true"
      >
      </velt-inline-comments-section>
    </section>

  </body>
</html>
```


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