# Next.js Starter Kit - Kickstart your Next.js collaborative app

npx create-liveblocks-app@latest --next

## Stop wasting weeks rebuilding table‑stakes features

The Next.js Starter Kit is fully customizable and comes with everything your users need to collaborate so you can focus on your core product.

npx create-liveblocks-app@latest --next

### Collaborative whiteboard

Start building from our example collaborative whiteboard to help you get started.

### Collaborative text editor

Start building from our example collaborative text editor to help you get started.

### Realtime updates

Every changes that happen get automatically updated throughout the app in realtime.

### Private drafts

Documents people create cannot be seen by anyone else unless they've been shared with others.

### Share documents

Users can invite people and groups to view or edit their documents through a share dialog.

### Browse documents

The file listing experience enables users to browse and organise files with other team members.

### Comments

Enable people to comment, react, and mention others to facilitate collaboration and feedback.

### Notifications

Users receive inbox notifications when threads update, or when mentioned by others.

- Liveblocks

- [Next.js](https://nextjs.org/)
- [React](https://reactjs.org/)
- CSS3

CSS

- [Radix UI](https://radix-ui.com/)
- [TypeScript](https://www.typescriptlang.org/)
- [NextAuth.js](https://next-auth.js.org/)
- [SWR](http://swr.vercel.app/)
- [Yjs](https://yjs.dev/)

## The best tools of the TypeScript ecosystem

The Next.js Starter Kit embeds all the Liveblocks collaborative features with all the best tools the TypeScript ecosystem has to offer.

[GitHub4.6k](https://github.com/liveblocks/liveblocks)

## Designed for developers - Powerful, modular, and easy‑to‑use APIs

We carefully consider the most appropriate abstractions to ensure your team doesn't spend months integrating collaborative features.

[Read the guide](/content/docs/tools/nextjs-starter-kit/index.html)

getDocument

Server

Client

React

```typescript
import { getDocument } from "@/lib/actions";
const { data, error } = await getDocument({  documentId: "my-document-id",});
```

## More than just a starter kit.

Engage users, fuel creativity, and _drive growth_ with just a few lines of code. Ship collaborative features into your product _in days, not months_.

\
\
**Comments** \
\
Add contextual comments directly inside your product.\
\
Learn more](/content/comments/index.html)

\
\
**Multiplayer** \
\
Add realtime collaboration to your product experience.\
\
Learn more](/content/multiplayer/index.html)

\
\
**AI Copilots** \
\
AI assistants that can take actions on behalf of the user.\
\
Learn more](/content/ai-copilots/index.html)

\
\
**Notifications** \
\
Embed an inbox in your app and keep users coming back.\
\
Learn more](/content/notifications/index.html)

## Turn your product into the space where people and AI collaborate

[Get started for free](/content/auth/signup/index.html) [Contact sales](/content/contact/sales/index.html)