Skip to main content

​
Comments Collection

The Comments module provides room-scoped threaded comments with support for replies, emoji reactions, and user tagging. All changes are synced in real time to other participants. Access it via client.comments.

​
Methods

​
Add Comment

add(text, opts?) Add a top-level comment to the room. Optionally tag users at creation: 
const comment = await client.comments.add('Hello from the comments feature!');

// With tags
const comment = await client.comments.add('Check this out!', {
  tags: ['user-002', 'user-003'],
});
The returned comment is a CollabKitCommentInstance with methods for replies, reactions, and tags.

​
Get Comments

getAll() Fetch all comments in the room: 
const comments = await client.comments.getAll();

​
Sync Comments

sync() Force a full sync of comments from the server: 
await client.comments.sync();

​
Delete Comment

delete(commentId) Delete a top-level comment. This cascades and removes all its replies: 
await client.comments.delete(comment.id);

​
Events

Listen for comment changes across the room: 
client.comments.on('add', (comment) => {
  console.log('New comment:', comment.text);
});
EventPayloadDescription
addCollabKitCommentInstanceA new comment was added by another client
deletestring (comment ID)A comment was deleted by another client
updateCollabKitCommentInstanceA comment was updated (reaction, tag, or reply changed)

​
Comment Instance

Each comment returned by add() or getAll() is a CollabKitCommentInstance with its own properties and methods.

​
Properties

PropertyTypeDescription
idstringUnique comment ID
textstringComment body
userIdstringID of the user who created the comment
parentIdstring | nullParent comment ID (null for top-level)
reactionsReaction[]List of reactions on this comment
tagsstring[]List of tagged user IDs
repliesCollabKitCommentInstance[]Child replies (one level deep)
createdAtstringISO timestamp

​
Methods

​
Reply to Comment

reply(text, opts?) Add a reply to this comment (one level of nesting): 
const reply = await comment.reply('Great point!');

// With tags
const reply = await comment.reply('Tagging you on this', {
  tags: ['user-002'],
});

​
Delete Reply

deleteReply(replyId) Remove a reply: 
await comment.deleteReply(reply.id);

​
Add Reaction

addReaction(reaction) Add an emoji reaction to the comment: 
await comment.addReaction('👍');
Reactions on replies work the same way: 
const reply = await comment.reply('Nice!');
await reply.addReaction('🎉');

​
Delete Reaction

deleteReaction(reaction) Remove a reaction: 
await comment.deleteReaction('👍');

​
Add Tag

addTag(userId) Tag a user on this comment: 
await comment.addTag('user-002');

​
Delete Tag

deleteTag(userId) Remove a user tag: 
await comment.deleteTag('user-002');
Tagged users receive a commentTagged event on their user instance. See User Events.

​
Events

Listen for updates to a specific comment: 
comment.on('update', (updatedComment) => {
  console.log('Comment updated:', updatedComment);
  // Fires when reactions, tags, or replies change
});

​
Examples

​
Threaded Comments

// Listen for new comments from others
client.comments.on('add', (comment) => {
  renderComment(comment);
});

// Listen for being tagged
client.currentUser?.on('commentTagged', (comment) => {
  showNotification(`You were tagged in: "${comment.text}"`);
});

// Add a comment with tags
const comment = await client.comments.add('Design review needed', {
  tags: [client.userId],
});

// Add reactions
await comment.addReaction('👍');

// Reply
const reply = await comment.reply('Looks good to me!');
await reply.addReaction('🎉');

// Listen for changes to this comment
comment.on('update', (updated) => {
  console.log('Reactions:', updated.reactions);
  console.log('Replies:', updated.replies.length);
});

// Clean up
await comment.deleteReply(reply.id);
await client.comments.delete(comment.id);