You’re probably here because you’re looking for a fast way to add Google Docs style comments to your own product. Good news: the Velt commenting sdk is built to do exactly this! This guide walks you through how to do it.

TLDR:

• Install the package: npm install @veltdev/react and (optionally) its type definitions.

• Wrap with Velt provider: surround your app with <VeltProvider apiKey={…}>, then drop in <VeltComments /> and <VeltCommentsSidebar />.

• Identify the user: once someone signs in, call useIdentify({ userId, name, email, photoUrl }).

• Set the document context: useSetDocument(docId, { documentName }).

• Add the toolbar: place <VeltCommentTool />, <VeltSidebarButton />, and <VeltPresence /> where you want the floating UI.
  
  That's it!

Quick Note on Velt:

Velt is a full-stack commenting SDK that lets you easily add in-app commenting, notifications, recordings and much more to your app. We handle all the hard stuff and you get back to shipping.

Overview

• Works with React, Vue, Svelte, and vanilla/legacy stacks.

• Handles 200 million stored comments on the base plan.

• Any type of comment style: text, area, freestyle, inline, inbox, and many more.

• Ships presence, emoji reactions, video huddles, and screen recording out of the box.

• Optional data self-hosting keeps security teams happy.

• Slack support: no more week-long email threads

Alright, let's get into it.

Hands-On Integration Walk-through

The rest of this post follows a real setup. Go sign up at https://velt.dev/ to start. Let's assume you did that + got an API key.

Open your terminal and code editor. Let's code.

1 · Install

Add the React SDK (and optional TypeScript helpers) to your project with npm or Yarn.

npm i @veltdev/react            # core SDK
npm i -D @veltdev/types         # TypeScript definitions (optional)

2 · Bootstrap the provider

Wrap your entire application with <VeltProvider> and place the global UI components right inside it. (If you’re on Next .js 13/14, remember the "use client" pragma.)

'use client';                       // Next.js only
import { VeltProvider, VeltComments, VeltCommentsSidebar } from '@veltdev/react';
import App from './App';

export default function Root() {
  return (
    <VeltProvider apiKey={process.env.NEXT_PUBLIC_VELT_API_KEY}>
      <VeltComments />
      <VeltCommentsSidebar />
      <App />
    </VeltProvider>
  );
}

3 · Identify the signed-in user

Call useIdentify once with your user’s info. No extra useEffect is necessary. You can also use JWT Tokens for auth, but we've skipped it here for simplicity. By adding in the organization ID, all data and access control will be scoped to this org.

import { useIdentify } from '@veltdev/react';

export default function VeltAuth({ user }) {
  useIdentify({
    userId: user.id,
    organizationId: user.orgId,   // strongly recommended
    name: user.name,
    email: user.email,
    photoUrl: user.avatar,
  });
  return null;
}

4 · Set the current document

Use useSetDocument to tell Velt which file or page the user is viewing. This also means any comment data is scoped exclusively to this entity.

import { useSetDocument } from '@veltdev/react';

export default function VeltDoc({ id, title, children }) {
  useSetDocument(id, { documentName: title });
}

5 · Add a comment toolbar

Drop Velt’s ready-made controls wherever they look best in your UI.

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

export function CommentToolbar() {
  return (
    <div className="comment-toolbar">
      <VeltCommentTool />
      <VeltSidebarButton />
      <VeltPresence />
    </div>
  );
}

6 · Glue everything together

Combine the auth, document wrapper, editor, and toolbar in your top-level component.

import VeltAuth from './Auth';
import VeltDoc from './Doc';
import { CommentToolbar } from './Toolbar';
import Editor from './Editor';

export default function App() {
  const user = useCurrentUser();
  const doc  = useCurrentDoc();

  return (
    <>
      <VeltAuth user={user} />
      <VeltDoc id={doc.id} title={doc.title}>
        <Editor />
        <CommentToolbar />
      </VeltDoc>
    </>
  );
}

Run npm run dev, open two browser windows, sign in as different users, and watch comments sync in real time. ✨

(Optional) Imperative setup without hooks

Prefer a class component or another framework? Use the client API instead of hooks.

import { useEffect } from 'react';
import { useVeltClient } from '@veltdev/react';

function VeltBootstrap({ user, doc }) {
  const { client } = useVeltClient();

  useEffect(() => {
    if (client) {
      client.identify(user);
      client.setDocument(doc.id, { documentName: doc.title });
    }
  }, [client, user, doc]);

  return null;
}

Run npm run dev. Open two windows, sign in as two users, and leave a note. The thread appears in both views instantly. ✨

Extensible Functionality

Once the basics work, flip these optional switches:

• Live cursors: send selection events to Velt and display colored carets for teammates.

• Emoji reactions: built-in. just click the reactions toggle in the console.

• Video huddles: add <VeltHuddle/> and <VeltHuddleTool/> to your root and components so users can jump on a quick call.

• Follow-me mode: let viewers click an avatar to scroll to that user’s viewport.

• Audit logs: fetch view or comment events via the REST API for compliance.

Handling Permissions

Wrap VeltCommentTool behind a role check. Only editors or owners see the button; viewers read threads without posting.

{canComment && <VeltCommentTool />}

Document-level access (private, public, org-only) can be enforced with your own logic or using Velt's permission model.

Side-by-Side with Other Options

For a detailed cost breakdown, see our build vs buy guide.

Liveblocks offers a solid CRDT core, but you still build much of the features and workflows. Text-editor plugins work if comments never leave that editor. DIY is doable, yet expect long sprints and pager duty.

Beyond the Basics: Advanced Functionality

A great commenting experience needs more than just a text box. That’s why Velt SDK includes advanced features that support real workflows, like:

1. Anchoring and Positioning

   Velt comments have the most robust anchoring and positioning on the market. This means that when you place a comment pin on a DOM element, it stays no matter what happens to the DOM. Velt's cell comments that are used on spreadsheets also bind to data and move dynamically when cells are sorted and filtered.

   
   

2. @Mentions and Assignments

   A big part of collaboration is being able to tag other users in comments that may concern them. With built-in @Mentions, users can easily tag teammates in relevant conversations. Just provide a user list and you're good to go — no custom logic required. Velt comments can also be assigned to others for task management purposes.

   
   

3. Task Status Management

   Contextual comments usually have a work item or task that is bound to be tied to it. This is why Velt comments have task management built right in. Users are able to set the status of comments to the basic options like "open", "in-progress", or "resolved". As the developer you also have the freedom to create custom status options that better fit your product. If your product does not require task management, this feature can always be disabled in your implementation.

   
   

4. Notifications

   Notifications are a critical part of effective communication in-app to make sure that all users are up to date with the current state of affairs. Notifications are also a big part of how commenting can boost engagement and growth in your product, because they bring users back to the app to participate in conversations. This is why Velt provides support for in-app and off-app notifications that automatically work with commenting, and can be hooked up to work with your product's native notifications.

   
   

5. Sidebar Search and Filter

   Another handy feature that Velt provides is a sidebar for managing and viewing comments that have been left on a document. This sidebar can be used to search for specific comments, or filter our comments based on text, users, status, or another option that you configure.

   
   

6. Attachments

   Sometimes a comment conversation requires more context from an external image or file. This is why Velt comments have the ability to add attachments with no extra work required from you. Velt handles the upload of attachments, as well as the display of files like images in your app.

These features transform simple commenting into full multiplayer workflows — the kind that boost engagement, drive collaboration, and set your product apart.

Ready, Set, Comment

You now own a Google-Docs-quality commenting layer without sweating sockets or anchors. Next steps:

1. Theme the widgets to match your brand.

2. Tweak role checks and notification rules.

3. Ship to staging, gather user feedback, and iterate.

If you want to do some more reading, checkout our documentation.

Want to try Velt in your own app? Start a free project and deliver a modern collaboration experience this week.