Comments - Enable feedback to any product effortlessly

Book a demo

Start today for free

Realtime
Customizable
Accessible

was created in 2021

Jonathan8m ago

@Alicia Is this correct?

Alicianow

I’ll double-check with @Steven.

Nimesh36m ago

00:46 Can we remove the reverb here?

Olivier16m ago

We should change this into a circle.

👍3

✅1

Chris2m ago (edited)

Can we make the logo bigger?

😅6

All threads

Steven16m ago

00:10 Can we switch these shots?

Pierrenow

Yep!

Adri5m ago

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

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.

Guillaume4h ago

@Marc This looks great! Can I make it look like my brand?

Marc2h ago

Sure! Try to tweak --lb-radius and --lb-accent for example.

Alicia8m ago

@Marc So cool!

Nimeshnow

Learn more at https://liveblocks.io/docs.

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 cx from "classnames";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={cx(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(3)

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.

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.

Florent2d 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!

Start today 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>  );}