This content originally appeared on DEV Community and was authored by Astrodevil
Introduction
Many modern applications, such as Google Docs and Figma, allow users to leave comments and collaborate without needing to be online at the same time. For most applications, comments are no longer simply a nice-to-have feature but an expected one.
If your app includes editing or shared content, adding a commenting feature can make it feel more collaborative and useful. It helps people share ideas, give feedback, and stay on the same page, all without jumping between different tools like Slack and email.
In Google Docs, for example, writers and editors can suggest changes right on their selected text. Figma does the same for design files, making it easy for teams to discuss layouts and updates. Features like these are a big reason those apps are so widely used.
In this guide, you’ll learn how to bring similar commenting features into your app. We'll show you how to build a comments system in a Tiptap editor inside a Next.js app, using:
- Velt SDK – for adding real-time comments and collaboration.
- v0 – an AI site builder that helps you quickly set up web apps using React, Next.js, Tailwind CSS, and Shadcn UI components.
By the end of this article, you’ll have a clean, working comments feature built into your editor, something users will enjoy using.
Why building custom commenting system is tricky?
Creating apps with collaboration features from scratch is a challenging task.
You have to:
- Design an intuitive, user-friendly UI for commenting
- Handle the dynamic and complex interactions such as text selection, popovers, and real-time updates
- Manage comment annotation functionality and storage
If you try to build these features from the ground up, it will cost you a lot of time and resources. This will also slow down the development of your product’s core features.
That’s where Velt comes in, offering ready-made collaboration components so you can stay focused on what makes your product unique.
Introducing Velt
Velt makes it easy to add collaboration features to your app. Velt SDKs provide full-stack components that let you add real-time commenting without having to build out the frontend or backend yourself.
It takes care of syncing, storage, and all the behind-the-scenes work, so you can stay focused on what makes your app great.
Using v0 to Build the App
To build the UI for our Tiptap editor, we’ll use v0, an AI tool from Vercel.
What is v0?
v0 is an AI tool with a chat-based interface that helps you build UIs by describing what you want. You just type your prompt, and v0 generates React and Tailwind CSS code using the latest frontend libraries like Next.js and Shadcn components.
Why use v0?
Instead of writing the entire layout by hand, we’ll use v0 to speed things up. This lets us focus more on the core part of this tutorial: adding collaborative commenting to a Tiptap editor.
Implementing Commenting Using Velt SDK and v0
In this section, we’re going to build the Tiptap-powered Next.js editor app.
Prerequisites
To follow along with this tutorial, you’ll need:
- An account with v0. Go to their website to create an account if you don’t have one.
- Node.js installed on your machine
- Basic knowledge of JavaScript and React
- The repo of the completed project.
In this project, we’ll be using pnpm as our package manager. To install pnpm, run the following command from your CLI (as an administrator):
npm install -g pnpm@latest-10
Project set-up
Create a new Next.js project using the following command:
pnpm create next-app@latest tiptap-velt-editor
Follow the commands, and you should have a working Next.js application.
Since we’ll be using the TipTap and Velt SDKs, we need to install the necessary packages:
pnmp add @tiptap/react @veltdev/react @veltdev/tiptap-comments
-
@tiptap/react: Tiptap SDK for React-based applications -
@veltdev/react: Velt SDK for React-based applications -
@veltdev/tiptap-comments: Velt binding for adding comments in a Tiptap editor
Prompting v0 to generate the UI of our application
We want our TipTap editor UI to look like this:
Use the following prompt in v0 to generate the UI:
create a basic editor app in Next.js using the TipTap editor. The rich text features I need are:
- *headings (1, 2, & 3)*
- *text-align (left, justify, right)*
- *text highlight*
- *strike through*
- *bold*
- *italic*
- *code*
*Use Shadcn/UI components only where necessary. And use TailwindCSS for the styling. Make the UI more beautiful and look like an email editor with a side panel. The panel doesn't need to be functional; It just needs to be beautiful.*”
Clone our GitHub repo into your Next.js application.
Use the following command to start your development server:
pnpm run dev
Cleaning up the UI
After copying and pasting the AI-generated code, you should have a similar folder structure:
src
|__ app
|___components
|__ TipTap.tsx
|__ TipTapToolbar.tsx
|__ EmailEditor.tsx
|___ layout.tsx
|___ page.tsx
|___ global.css
If you open your TipTap.tsx file, it should look like this with red squiggly lines, which we’ll fix later on:
"use client"
import { useEditor, EditorContent } from "@tiptap/react"
import StarterKit from "@tiptap/starter-kit"
import Heading from "@tiptap/extension-heading"
import TextAlign from "@tiptap/extension-text-align"
import Highlight from "@tiptap/extension-highlight"
import { useState } from "react"
import EditorToolbar from "./editor-toolbar"
export default function TipTap() {
const [content, setContent] = useState(
"<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores atque non amet numquam optio aliquid quo laboriosam pariatur ipsa voluptatem similique assumenda cum, quia consectetur expedita est voluptatum? Accusamus, nobis.</p>"
);
const editor = useEditor({
extensions: [
StarterKit,
Heading.configure({
levels: [1, 2, 3],
}),
TextAlign.configure({
types: ["heading", "paragraph"],
alignments: ["left", "center", "right", "justify"],
}),
Highlight,
],
content,
onUpdate: ({ editor }) => {
setContent(editor.getHTML())
},
})
return (
<div className="flex flex-col min-h-[400px]">
<TipTapToolbar editor={editor} />
<EditorContent editor={editor} className="prose max-w-none p-4 min-h-[350px] focus:outline-none" />
</div>
)
}
The following parts of the code are essential.
- The
useEditorhook from the@tiptap/reactpackage creates a Tiptap editor instance. - The object contains three important properties:
-
extensions: a collection of functions that extend the capability of the TipTap editor -
content: allows you to supply a starting content for your TipTap editor -
onUpdate: a function that updates the content of the TipTap editor as you type into it.
-
- The extensions
Heading,TextAlign, andHighlightsallow users to toggle between different heading levels (in our case, H1, H2, H3), align text, and highlight it. - The
EditorContentcomponent renders the TipTap editor.
As mentioned earlier, you’re likely seeing red squiggly lines because we haven’t installed the necessary packages.
Use the following command to install the packages:
pnpm add @tiptap/starter-kit @tiptap/extension-heading @tiptap/extension-highlight @tiptap/text-align
After installing packages, the red warning lines should be gone.
Now, let’s take a look at the TipTapToolbar.tsx file.
Open the TipTapToolbar.tsx file, and your file should contain the following code snippet (check the GitHub repo for complete code):
export default function EditorToolbar({ editor }: { editor: Editor | null }) {
if (!editor) return null
return (
<div className="border-b p-1 flex flex-wrap items-center gap-1 bg-muted/50">
<Toggle
pressed={editor.isActive("heading", { level: 1 })}
onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
aria-label="Heading 1"
>
<Heading1 className="h-4 w-4" />
</Toggle>
<Toggle
pressed={editor.isActive("bold")}
onPressedChange={() => editor.chain().focus().toggleBold().run()}
aria-label="Bold"
>
<Bold className="h-4 w-4" />
</Toggle>
<VeltNotificationsTool />
{/* rest of code */}
</div>
)
}
In the code snippet above, we’re simply returning the toolbar's UI, which is a Shadcn component.
Let’s install shadcn/ui and the UI components used.
Shadcn is a library of beautiful and accessible UI components that can speed up app development.
Use the following command to initialize Shadcn in your Next.js app:
pnpm dlx shadcn@latest init
Next, use the following command to add the individual UI components used in the TipTapToolbar.tsx file:
pnpm dlx shadcn@latest add button toggle separator
The VeltNotificationsTool component is a Velt component for adding in-app notifications to the app.
Integrating Velt comments to our TipTap editor
To add Velt real-time commenting to your TipTap app, you will need a Velt API key.
You can get your free Velt API key from Velt’s website linked here.
Create a .env file and add in your API key as such:
NEXT_PUBLIC_VELT_API_KEY="your-api-key"
Next, we’re going to wrap our app with the Velt provider.
Open your page.tsx file and replace it with the following code:
"use client";
import { VeltProvider, VeltComments } from "@veltdev/react";
import YourAuthComponent from "./AuthComponent";
import EmailEditor from "./components/EmailEditor";
export default function App() {
return (
<VeltProvider apiKey={process.env.NEXT_PUBLIC_VELT_API_KEY || ""}>
<div className="h-screen bg-slate-50">
<YourAuthComponent />
<EmailEditor />
</div>
<VeltComments textMode={false} />
</VeltProvider>
);
}
Let’s go over the code and understand it.
- The
VeltProvidercomponent with the API key wraps up our entire application. - The
VeltCommentscomponent enables the commenting functionality in our app. -
YourAuthComponentidentifies your app users (without this, Velt won’t work). In the next section, we'll create the auth component. - Finally, the
EmailEditorcomponent renders our entire UI, including the TipTap editor.
Note: the
TipTap.tsxfile is the main focus of our app. TheEmailEditorcomponent is the UI for the entire application that looks like an email client interface.
Creating the Auth component
You’ll use the Auth component to identify a user in your application.
A note about the auth component:
The logic of identifying a Velt user should be integrated into your app's authentication flow.
For this tutorial, we’ll simulate fetching a list of users and then use Velt’s SDK useIdentify() hook to identify the user.
Create a file, YourAuthComponent.tsx, and add the following code:
"use client"
import { useIdentify } from "@veltdev/react";
interface User {
uid: string;
displayName: string;
email: string;
photoURL: string;
isActive?: boolean;
}
const generateUsers = (): User[] => {
return [
{
uid: "user1",
displayName: "John Doe",
email: "john@velt.dev",
photoURL: "https://i.pravatar.cc/301?img=12",
isActive: false,
},
{
uid: "user2",
displayName: "Jane Smith",
email: "jane@velt.dev",
photoURL: "https://i.pravatar.cc/301?img=5",
isActive: true,
},
{
uid: "user3",
displayName: "Alex Johnson",
email: "alex@velt.dev",
photoURL: "https://i.pravatar.cc/301?img=33",
isActive: false,
},
];
};
// Initialize with predefined users
const [users, setUsers] = useState<User[]>(generateUsers());
const [currentUser, setCurrentUser] = useState<User>(
users.find((user) => user.isActive) || users[0]
);
const veltUser = {
userId: currentUser.uid,
name: currentUser.displayName,
email: currentUser.email,
photoUrl: currentUser.photoURL,
organizationId: "my-organization",
};
//identify Velt user
useIdentify(veltUser);
Let’s understand what the code is doing.
-
generateUsersis a function that returns a mock user object (uid,displayName,email,photoURL,isActive). This simulates an auth fetch. You’d replace this function with your auth fetch function. - Next, we destructure the mock user object into
uid,displayName,email, andphotoURL. - Then we build a
veltUserobject with the shape Velt expects (userId,name,email,photoUrl, plus anorganizationId). - Lastly, calling
useIdentify(veltUser)tells Velt who the current user is (must be inside aVeltProvider).
Adding the Velt real-time commenting
We need two things to add Velt real-time commenting to our application:
- A
BubbleMenucomponent - A method to identify our document with Velt
Create a BubbleMenu component to add a contextual menu over a selected text in your Tiptap editor.
function BubbleMenuComponent({ editor }: { editor: Editor | null }) {
return (
<div>
<BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
<button className="cursor-pointer rounded-full bg-purple-400 p-2" onClick={handleAddComment}>
<MessageSquare size={25} className="border-none outline-0 text-white object-center" />
</button>
</BubbleMenu>
</div>
);
}
The BubbleMenuComponent displays a comment button over any text you highlight.
Add the following code in your BubbleMenuComponent to enable Velt real-time commenting in your Tiptap editor:
const tiptapVeltCommentConfig = {
context: {
storyId: "story-id",
storyName: "story-name",
},
};
const handleAddComment = () => {
if (editor) triggerAddComment(editor, tiptapVeltCommentConfig);
};
Let’s understand the above code snippet.
-
triggerAddCommentis a function from@veltdev/tiptap-velt-comments, Velt’s extension for Google Docs‑style overlay comments in a TipTap editor. -
tiptapVeltCommentConfigdefines the comment context (storyIdandstoryName), so Velt knows which document or “story” a comments belong to. -
handleAddCommentcalls thetriggerAddComment(editor, tiptapVeltCommentConfig), which opens Velt’s comment UI at the current text selection.
Next, open your TipTap.tsx file and add the following code snippet:
export default function TipTap() {
// previous code
const commentAnnotations = useCommentAnnotations();
useSetDocumentId("my-document-id");
const [isEditable, setIsEditable] = useState(true);
useEffect(() => {
if (editor && commentAnnotations?.length) {
editor.setEditable(isEditable);
highlightComments(editor, commentAnnotations);
}
}, [editor, commentAnnotations, isEditable]);
// rest of code
}
The code snippet above performs the following sequence of operations:
- The code retrieves comment annotation objects, which include positions and IDs, by calling
useCommentAnnotations(). -
useSetDocumentId("my-document-id")registers the current document’s ID with Velt so all comments sync to"my-document-id". - The
useStatehook initializes anisEditablestate variable as well as its associatedsetIsEditablesetter function. - The effect executes its content when either the editor, commentAnnotations, or the isEditable flag changes.
- This conditional statement verifies two conditions:
- First, it checks whether the editor exists
- Second, it checks that
commentAnnotationsis not empty.
- Calls
editor.setEditable(isEditable)to toggle the editor between read and write modes on the fly. - The application calls
highlightComments(editor, commentAnnotations)to create visual highlights that appear around all annotated ranges in the editor.
This pattern keeps your editor’s edit mode and comment highlights in sync with React state and incoming annotation data.
Project Demo
You’ve successfully added real-time commenting to your Tiptap editor using the Velt SDK.
To continue, start your development server with the following command:
pnpm run dev
Here’s the demo of the app: https://velt-tiptap-editor.vercel.app/
Conclusion and What’s Next
You’ve just added real-time commenting to your Tiptap editor using the Velt SDK—all without handling the backend or building a system from scratch. Velt took care of syncing, storage, and collaboration, letting you focus on the user experience.
But comments are just the beginning.
Velt also supports powerful features like live cursors, presence indicators, @mentions, in-app notifications, reactions, screen recording, and even real-time huddles. These features can turn a simple editor into a fully collaborative workspace.
If you're building a tool where users create, review, or work together on content, adding more of Velt’s features can take your app next level.
Try extending our current setup with the Presence feature, or bring that Google Docs or Figma-like experience to your product.
Resources
This content originally appeared on DEV Community and was authored by Astrodevil
Astrodevil | Sciencx (2025-08-27T20:51:48+00:00) How to Add Real-Time Comments to Your Tiptap Editor with Velt and v0🔥. Retrieved from https://www.scien.cx/2025/08/27/how-to-add-real-time-comments-to-your-tiptap-editor-with-velt-and-v0%f0%9f%94%a5/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.