Comments - Enable feedback to any product effortlessly

Get started for free

Contact sales

Realtime
Customizable
Accessible

was created in 2021

Jonathan8m ago

@Alicia Is this correct?

Alicianow

Can you double-check this @Liveblocks AI?

Liveblocks AI2m ago

Yes, that sentence is correct. The date matches the doc metadata.

Nimesh36m ago

00:46 Can we remove the reverb here?

Liveblocks AI12m ago

00:46 I can suggest a dry mix preset for that section if you’d like.

Olivier16m ago

We should change this into a circle.

👍3

✅1

Liveblocks AI8m ago

Good call. A circle would match the style guide better.

Chris2m ago (edited)

Can we make the logo bigger?

😅6

Liveblocks AInow

The header logo is currently 24px. Bumping it to 32px would keep it within the 8px grid.

All threads

Steven16m ago

00:10 Can we switch these shots?

Pierre5m ago

00:42 This looks a bit off. Look at the attached screenshots.

Liveblocks AInow

The color grading at 00:42 differs from the previous shot. Adjusting the exposure should help maintain consistency.

Vincent2m ago

01:12 I love the color grading! 👌

Reply to thread…Create a new thread…

Mark as resolvedAttach to current time

Comment

Send

Flexible -
Shape it to your needs

Adapt Liveblocks Comments to any app, be it a text editor, media player, or whiteboard, using custom metadata.

Browse examples

{  "threadId": "th_aFc3G9t2HvNkR8PqO_zU5L",  "metadata": {    "quote": "Which one?"    "resolved": false,  }}

{  "threadId": "th_X7m9R4_p5qOzE1VZ3JkY6u",  "metadata": {    "shape": "circle",    "x": 720,    "y": 142  }}

{  "threadId": "th_dOqjuyEV1ZR_A3k2Yk4hN",  "metadata": {    "time": 36    "priority": "important",  }}

Customizable -
Integrate flawlessly into your design

Rely on versatile ready-made components, or use primitives to build a completely custom interface using React.

Stacy4h ago

@Marc This looks great!

Marc2h ago

@Liveblocks AI Could you check if our accent and radius values follow our design guidelines?

Liveblocks AI1h ago

Yes, these values align with the design system. The --lb-radius and --lb-accent variables provide good flexibility for brand customization.

Stacynow

Perfect, thanks!

Default components - Make it your own

Default components allow you to customize colors, spacing, and more, via CSS variables and classes.

Learn more

Primitives - Above and beyond

Primitives are unstyled, headless components which allow you to create fully custom commenting experiences.

Learn more

import { cn } from "src/utils/cn";import { Suspense } from "react";import {  Comment as CommentPrimitive,  Timestamp as TimestampPrimitive,} from "@liveblocks/react-comments/primitives";import { User } from "./User";
export function Comment({ comment, className, ...props }) {  return (    <div className={cn(className, "p-4")} {...props}>      <div className="flex items-center gap-3">        <span className="font-semibold">          <Suspense fallback={comment.userId}>            <User userId={comment.userId} />          </Suspense>        </span>        <TimestampPrimitive          date={comment.createdAt}          className="text-sm text-gray-500"        />      </div>      <CommentPrimitive.Body        className="prose mt-3"        body={comment.body}        components={{          Mention: ({ userId }) => (            <CommentPrimitive.Mention className="font-semibold text-blue-500">              @              <Suspense fallback={userId}>                <User userId={userId} />              </Suspense>            </CommentPrimitive.Mention>          ),        }}      />    </div>  );}

Notifications -
Keep users engaged in the conversation

Use Liveblocks Notifications to send emails, Slack notifications, and more—improving engagement and usage.

Learn more

Chris via Acme Inc.

To: Pierre, Cc: Design team on Acme Inc.

Acme Inc.Hello Pierre,

Chris left a comment in “Comments – Design explorations”.

Chris

@Alicia

I've updated the copy on the homepage. Please review and let me know if there are any changes you'd like to make.View commentTurn off comment notifications for this file

Notifications(4)

Chris1h ago

@Alicia

I've updated the copy on the homepage. Please review and let me know if there are any changes you'd like to make.

Liveblocks AI1h agoThe new copy improves readability with a Flesch reading score of 68. Consider shortening the third paragraph.

Jonathan2h agoI've designed a new version of the landing page with the latest feedback. Please review and let me know if everything looks good.

Nimesh2d agoThis section looks great!

The biggest impact Liveblocks had on our business is faster time-to-market. We could go to market in record time and provide our enterprise customers with realtime collaboration and commenting features.
Dev Shekhawat, Software Engineer at Hashnode

Designed for developers

Liveblocks Comments comes with a set of pre-built React components. Get started for free today!

Get started for free

Read the docs

import "@liveblocks/react-comments/styles.css";import { Composer, Thread } from "@liveblocks/react-comments";import { useThreads } from "./liveblocks.config";
function Room() {  const { threads } = useThreads();  return (    <div>      {threads.map((thread) => (        <Thread key={thread.id} thread={thread} />      ))}      <Composer />    </div>  );}