Liveblocks

Add live cursors and user counters to your website!

Usage

Head over to the Liveblocks dashboard and obtain a public key, under the "API Keys" tab. Then paste the following to your page, replacing LIVEBLOCKS_PUBLIC_KEY with your key:

import { Cursors, PresenceCounter } from "https://cdn.motif.land/motifliveblocks@0.0.1"

<Cursors
  publicApiKey="LIVEBLOCKS_PUBLIC_KEY"
  roomName="landing-page" />

<PresenceCounter
  publicApiKey="LIVEBLOCKS_PUBLIC_KEY"
  roomName="landing-page" />

Once your page is published, open it up in two different windows, and you will start seeing cursors appear, and a live counter!

Components

Cursors

When adding this component to your page, live cursors will show up, corresponding to those of your visitors.

<Cursors
  publicApiKey="LIVEBLOCKS_PUBLIC_KEY"
  roomName="YOUR_ROOM_NAME" />

Options

PropertyDescription
publicApiKeyYour Liveblocks public API key (required).
roomNameAn identifier for your room. This could be one per page.
colorsA list of the form ["#ff0000", "#00ff00", ...] specifying the cursor colors (optional).

Presence counter

Display a label with the number of users currently visiting your page:

<PresenceCounter
  publicApiKey="LIVEBLOCKS_PUBLIC_KEY"
  roomName="YOUR_ROOM_NAME" />

Options

PropertyDescription
publicApiKeyYour Liveblocks public API key (required).
roomNameAn identifier for your room. This could be one per page.
countOnlyIf true, only display the count.