Liveblocks Next.js Starter Kit

What it is

This starter kit provides a fully functional foundation for multi-user collaborative apps. It includes a document management dashboard with CRUD operations, permissions, and grouping, alongside a collaborative whiteboard implementation. It handles complex state synchronization, presence tracking (cursors), and authentication integration out of the box.

Features

• Real-time collaborative whiteboard with cursor presence
• Document dashboard with pagination, drafts, and groups
• Granular permission system (user, group, public scopes)
• Auto-revalidation of data and optimistic updates
• Authentication ready for GitHub, Google, Auth0, etc.
• Fully featured share menu for document access control

Quickstart

git clone https://github.com/davidbmar/liveblocks-starter-kit.git
cd liveblocks-starter-kit
npm install
cp .env.example .env.local
# Add LIVEBLOCKS_SECRET_KEY and NEXTAUTH_SECRET to .env.local
npm run dev

Architecture

flowchart TD
    Client[Next.js Client]
    LB_Client[Liveblocks Client SDK]
    Server[Next.js API Routes / Server Actions]
    LB_Server[Liveblocks Backend]
    DB[(Database)]
    Auth[Auth Provider]

    Client -->|Reads/Writes UI| LB_Client
    LB_Client -->|WebSocket: Presence & Storage| LB_Server
    Client -->|HTTP: Auth & Metadata| Server
    Server -->|Verify Session| Auth
    Server -->|CRUD Documents| DB
    Server -->|Authorize Access| LB_Server

How it's built

Built on Next.js (App Router or Pages depending on version, typically App Router in modern kits) using TypeScript. It leverages Liveblocks client and server APIs for real-time state synchronization, presence, and storage. UI components are built with React, likely using Tailwind CSS for styling given the standard Liveblocks stack, and integrates with NextAuth or similar for auth.

How it runs

sequenceDiagram
    participant User
    participant Browser as Next.js App
    participant API as Next.js API
    participant LB as Liveblocks Service
    
    User->>Browser: Open Document
    Browser->>API: GET /api/documents/:id
    API->>LB: authorizeRoomAccess()
    LB-->>API: Permission Token
    API-->>Browser: Document Data + Token
    Browser->>LB: enterRoom(token)
    LB-->>Browser: Room State & Presence
    User->>Browser: Move Cursor / Edit
    Browser->>LB: Update Presence / Storage
    LB-->>Browser: Broadcast Updates
    Browser->>User: Render Remote Changes

How to apply & reuse

Use this as a base for any application requiring real-time collaboration: shared editors, design tools, project management boards, or multiplayer games. Clone the repo, configure your Liveblocks API keys, and extend the existing document/whiteboard patterns to your specific domain objects.

At a glance