Next.js Starter Kit

The Next.js Starter Kit from Liveblocks is a collaborative application boilerplate that ships a documents dashboard, realtime presence, and four ready-made multiplayer apps built on Next.js and React.

What is the Next.js Starter Kit?

The Next.js Starter Kit is an open-source starter template for building realtime collaborative products. It takes Next.js and React as its foundation and layers in Liveblocks' realtime infrastructure to handle presence, comments, and shared document state. The template outputs a deployable application with a paginated documents dashboard, organization support, and example collaboration tools. It is maintained by Liveblocks, the company behind the realtime APIs used throughout the kit.

Key Features

• Documents dashboard — Includes pagination, organization switching, and auto-revalidation so document lists stay fresh without manual refresh.
• Four collaborative apps — Ships a whiteboard, text documents, a note editor, and a drawing canvas as starting points for multiplayer features.
• Realtime presence — Shows who is online with avatars, cursor positions, and text carets synced across clients.
• Share menu — A fully-featured sharing dialog supports users, organizations, and public permissions, controlling read and edit access.
• Flexible authentication — Compatible with GitHub OAuth, Google Sign-In, Auth0, and other providers through a pluggable auth layer.
• Liveblocks infrastructure — Uses Yjs and WebSockets for CRDT-based document synchronization and realtime events.
• One-click sandbox — The starter kit can be opened instantly in CodeSandbox from the Liveblocks GitHub repository.

Who is it for?

• Startups and indie developers who want to add multiplayer features to a Next.js product without building realtime infrastructure from scratch.
• Product teams that need a working reference for presence cursors, shared documents, and permission-controlled sharing to evaluate Liveblocks.
• Developers learning realtime state management who want to see how Yjs CRDTs integrate with a React and Next.js codebase.

What can you do with the Next.js Starter Kit?

• Build a collaborative whiteboard — Use the included whiteboard app to let multiple users draw on a shared canvas with realtime cursors and shapes.
• Create multiplayer text documents — Start from the text document app to provide simultaneous editing with carets and presence avatars.
• Prototype a sharing flow — Use the share menu to show how access control can be scoped to individual users, entire organizations, or the public.

The getting started guide walks through installation, configuration, and deploying the kit.