Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.velt.dev/docs/llms.txt

Use this file to discover all available pages before exploring further.

1

Import Comment components

Import the VeltProvider, VeltComments, and VeltInlineCommentsSection component.
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.
<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.
<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.
<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.
<VeltInlineCommentsSection multiThread={false} />
6

(Optional) Customize placeholder text

Customize the placeholder text for comment, reply, and composer input fields.
<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 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).
<VeltInlineCommentsSection
  targetElementId="article0"
  messageTruncation={true}
  messageTruncationLines={3}
/>

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>
  );
}