Presence - Bring realtime presence indicators to your product

Easily integrate presence indicators like live cursors and avatar stacks to create a shared, realtime experience.

Stacy

Florent

A developer experience you’ll love.

Our APIs make it easy to integrate realtime presence indicators into any app without compromosing on flexibility and customizability.

Read the docs

Browse examples

Pierre

Move your cursor

Stacy

Move your cursor

import { useOthers, useUpdateMyPresence } from "@liveblocks/react";
function LiveCursors() {  const updateMyPresence = useUpdateMyPresence();  const others = useOthers();
  return (    <div      onPointerMove={(event) => {        updateMyPresence({          cursor: {            x: event.clientX,            y: event.clientY,          },        })      }}    >      {others.map(({ connectionId, presence }) => {        return (          <Cursor            key={connectionId}            cursor={presence.cursor}          />        )      })}    </div>  )}