The easiest way to get started with a Liveblocks starter kit or example.
You can create a new Liveblocks project using the following command:
npx create-liveblocks-app@latest
The initial prompt allows you to set up one of the following:
- Next.js Starter kit—Our official starter kit for Next.js
-
An example from the Liveblocks repo—Any example from
liveblocks/liveblocks
From there, follow the instructions to set up your app! You can also use the CLI to generate a liveblocks.config.(js|ts)
config file.
If you wish, you can skip certain create-liveblocks-app
prompts with the following flags. Please note that these are optional, and if no flags are used, you will be prompted about these options in the installer instead.
npx create-liveblocks-app@latest [options]
Options:
--init
Generate a liveblocks.config.(js|ts) file in the current directory
--framework [`react`|`javascript`]
The framework your config file uses. Option only for `--init`.
e.g. `--framework react`
--suspense
Use React Suspense hooks in the config file. Option only for `--init` with React framework.
--no-suspense
Don't use React Suspense hooks in the config file. Option only for `--init` with React framework.
--typescript
Use TypeScript in your config file. Option only for `--init`.
--no-typescript
Don't use TypeScript in your config file. Option only for `--init`.
--comments
Add helpful comments to the config file. Option only for `--init`.
--no-comments
Add helpful comments to the config file. Option only for `--init`.
--next
Use the Next.js Starter Kit
--example [example name]
Use a Liveblocks example, the name corresponding to the example name in the repo
e.g. `--example zustand-whiteboard` for https://github.com/liveblocks/liveblocks/tree/main/examples/zustand-whiteboard
--name [repo name]
The name of the project/directory
e.g. `--name my-liveblocks-project`
--package-manager [`npm`|`yarn`|`pnpm`]
Select your package manager, default is `npm`
e.g `--package-manager yarn`
--auth [`demo`|`github`|`auth0`]
Select your authentication method. Option only for Next.js Starter Kit.
e.g. `--auth github`
--install
Install the project with the selected package manager
--no-install
Don't install the project
--git
Initialize git
--no-git
Don't initialize git
--vercel
Deploy on Vercel, and get Liveblocks API key
--no-vercel
Don't deploy on Vercel
--api-key
Get Liveblocks API key. Ignored if `--vercel` is used.
--no-api-key
Don't get Liveblocks API key. Ignored if `--vercel` is used.
--open
Open browser without asking permission, when deploying to Vercel or getting API key
--help
Find more info
Next.js Starter Kit with no install:
npx create-liveblocks-app@latest --next --no-install
Example from Liveblocks repo with directory/project name specified:
npx create-liveblocks-app@latest --example nextjs-live-avatars --name my-liveblocks-app
Next.js Starter Kit with every option:
npx create-liveblocks-app@latest --next --name my-project --auth github --package-manager npm --install --git --vercel --open
Generate a Liveblocks config file:
npx create-liveblocks-app@latest --init