Liveblocks Has a Free API: Add Real-Time Collaboration to Any App in Minutes

Building real-time collaboration from scratch takes months. Liveblocks adds it to your React app in an afternoon.

What Is Liveblocks?

Liveblocks provides real-time collaboration infrastructure: presence (cursors, avatars), storage (shared state), comments, and notifications. Think Figma's multiplayer — as an API.

Live Cursors (5 Minutes)

import { useMyPresence, useOthers } from "@liveblocks/react"

function Cursors() {
  const [myPresence, updateMyPresence] = useMyPresence()
  const others = useOthers()

  return (
    <div onPointerMove={(e) => updateMyPresence({ cursor: { x: e.clientX, y: e.clientY } })}>
      {others.map(({ connectionId, presence }) => (
        presence.cursor && (
          <div key={connectionId} style={{
            position: "absolute",
            left: presence.cursor.x,
            top: presence.cursor.y,
          }}>
            🔵
          </div>
        )
      ))}
    </div>
  )
}

Every user sees everyone else's cursor in real-time. 5 minutes of code.

Shared Storage

import { useMutation, useStorage } from "@liveblocks/react"

function TodoList() {
  const todos = useStorage((root) => root.todos)

  const addTodo = useMutation(({ storage }, text: string) => {
    storage.get("todos").push({ text, done: false })
  }, [])

  // Changes sync to all users in real-time
  // Conflicts are automatically resolved (CRDTs)
  return (
    <ul>
      {todos?.map((todo, i) => <li key={i}>{todo.text}</li>)}
      <button onClick={() => addTodo("New item")}>Add</button>
    </ul>
  )
}

Comments

import { Thread, Composer } from "@liveblocks/react-ui"

function Comments() {
  const { threads } = useThreads()
  return (
    <div>
      {threads.map((thread) => <Thread key={thread.id} thread={thread} />)}
      <Composer />
    </div>
  )
}

Google Docs-style commenting. Built-in UI components. 3 lines.

Why Liveblocks

• 5 minutes — add cursors/presence to any React app
• CRDTs — conflict-free data synchronization
• Pre-built components — comments, notifications, text editor
• Framework agnostic — React, Vue, Svelte, vanilla JS
• Yjs integration — collaborative text editing

Free Tier

• 300 monthly active users
• Unlimited projects
• All features

---

Building collaborative apps? Check out my developer tools or email [e-mail].