Setup

import { 
  VeltProvider, 
  VeltCommentsSidebar, 
  VeltSidebarButton,
  VeltCommentTool 
} from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments /> {/* Add VeltComments to the root of your app provider */}
      <VeltCommentsSidebar /> {/* Add VeltCommentsSidebar to the root of your app provider */}

      <div className="toolbar">
        <VeltCommentTool /> {/* Add VeltCommentTool wherever you want it to appear */}
        <VeltSidebarButton /> {/* Add VeltCommentSideBarButton wherever you want it to appear */}
      </div>

    </VeltProvider>
  );
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Collaboration App</title>
    <script type="module" src="https://cdn.velt.dev/lib/sdk@latest/velt.js" onload="loadVelt()"></script>
    <script>
      async function loadVelt() {
        await Velt.init("YOUR_VELT_API_KEY");
      }
    </script>
  </head>
  <body>
    <velt-comments></velt-comments> <!-- add to the root of your app-->
    <velt-comments-sidebar></velt-comments-sidebar> <!-- add to the root of your app -->
    <div class="toolbar"> <!-- a component representing a toolbar-->
      <velt-comment-tool></velt-comment-tool> <!-- add wherever you want it to appear-->
      <velt-sidebar-button></velt-sidebar-button> <!-- add wherever you want it to appear -->
    </div>
    

  </body>
</html>

React / Next.js
Other Frameworks

Import Comments Sidebar Components

Import the Comments Sidebar Components.

import { 
  VeltProvider, 
  VeltCommentsSidebar, 
  VeltSidebarButton,
  VeltCommentTool 
} from '@veltdev/react';

Add Comments and Sidebar components

Add the VeltComments and VeltCommentsSidebar components to the root of your app.

<div>
  <VeltComments />
  <VeltCommentsSidebar />
</div>

Add Sidebar button and Comment Tool component

Add the Sidebar button to toggle the sidebar. Add the VeltCommentTool component to leave comments.

<div className="toolbar">
  <VeltSidebarButton />
  <VeltCommentTool />
</div>

This is completely optional and you can toggle the sidebar in the comment dialog as well.

Test Integration

Test it out by opening the sidebar.You should be able to click the All comments link in a comment dialog box on the bottom.

Place the <velt-comments-sidebar> component

Place the <velt-comments-sidebar> component at the root of your app.

<velt-comments-sidebar></velt-comments-sidebar>

Place the <velt-sidebar-button> component

Place the <velt-sidebar-button> component wherever you want the toggle button to appear.

<velt-sidebar-button></velt-sidebar-button>

V2 Setup

The V2 sidebar is a fully primitive-based implementation. Use it by either importing VeltCommentsSidebarV2 directly or passing version="2" on the existing VeltCommentsSidebar.

React / Next.js
Other Frameworks

Option A — Direct import:

import {
  VeltProvider,
  VeltCommentsSidebarV2,
  VeltSidebarButton,
  VeltCommentTool
} from '@veltdev/react';

export default function App() {
  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments />
      <VeltCommentsSidebarV2 />
      <div className="toolbar">
        <VeltCommentTool />
        <VeltSidebarButton />
      </div>
    </VeltProvider>
  );
}

Option B — Version prop on existing component:

<VeltCommentsSidebar version="2" />

Option A — Direct element:

<velt-comments-sidebar-v2></velt-comments-sidebar-v2>

Option B — Version attribute on existing element:

<velt-comments-sidebar version="2"></velt-comments-sidebar>

For V2 props reference, see VeltCommentsSidebarV2Props. For V2 wireframe customization, see Comment Sidebar V2 UI Customization.

import { 
  VeltProvider, 
  VeltCommentsSidebar, 
  VeltSidebarButton,
  VeltCommentTool 
} from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments /> {/* Add VeltComments to the root of your app provider */}
      <VeltCommentsSidebar /> {/* Add VeltCommentsSidebar to the root of your app provider */}

      <div className="toolbar">
        <VeltCommentTool /> {/* Add VeltCommentTool wherever you want it to appear */}
        <VeltSidebarButton /> {/* Add VeltCommentSideBarButton wherever you want it to appear */}
      </div>

    </VeltProvider>
  );
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Collaboration App</title>
    <script type="module" src="https://cdn.velt.dev/lib/sdk@latest/velt.js" onload="loadVelt()"></script>
    <script>
      async function loadVelt() {
        await Velt.init("YOUR_VELT_API_KEY");
      }
    </script>
  </head>
  <body>
    <velt-comments></velt-comments> <!-- add to the root of your app-->
    <velt-comments-sidebar></velt-comments-sidebar> <!-- add to the root of your app -->
    <div class="toolbar"> <!-- a component representing a toolbar-->
      <velt-comment-tool></velt-comment-tool> <!-- add wherever you want it to appear-->
      <velt-sidebar-button></velt-sidebar-button> <!-- add wherever you want it to appear -->
    </div>
    

  </body>
</html>

Overview Customize Behavior

⌘I

Get Started

Agentic Setup

Key Concepts

Async Collaboration

Realtime Collaboration

AI

Self-Host Data

Backend SDKs

Model Context Protocol

Webhooks

Security

Miscellaneous

Import Comments Sidebar Components

Add Comments and Sidebar components

Add Sidebar button and Comment Tool component

Test Integration

Place the <velt-comments-sidebar> component

Place the <velt-sidebar-button> component

V2 Setup

Import Comments Sidebar Components

Add Comments and Sidebar components

Add Sidebar button and Comment Tool component

Test Integration

Place the <velt-comments-sidebar> component

Place the <velt-sidebar-button> component

​V2 Setup

V2 Setup