Collaborative Whiteboard

This example shows how to build a collaborative whiteboard with Liveblocks, Next.js and Redux.

Getting started

Run the following command to try this example locally:

npx create-liveblocks-app@latest --example redux-whiteboard --no-api-key --no-vercel

This will download the example and install the example. Next, you must:

• Create an account on liveblocks.io
• Copy your public key from the dashboard
• Replace pk_YOUR_PUBLIC_KEY in src/store.js with your public key
• Run npm run start and open http://localhost:3000 in your browser

Manual setup

Read more

Alternatively, you can set up your project manually:

• Install all dependencies with npm install
• Create an account on liveblocks.io
• Copy your public key from the dashboard
• Create a.env.local file and add your public key as the NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY environment variable
• Run npm run dev and open http://localhost:3000 in your browser

Deploy on Vercel

Read more

To both deploy on Vercel, and run the example locally, use the following command:

npx create-liveblocks-app@latest --example redux-whiteboard --vercel

This will download the example and ask permission to open your browser, enabling you to deploy to Vercel. Next, you must:

• Create an account on liveblocks.io
• Copy your public key from the dashboard
• Add your public key as the NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY environment variable in the Vercel dashboard
• Run npm run start and open http://localhost:3000 in your browser

Develop on CodeSandbox

Read more

After forking this example on CodeSandbox, create the NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY environment variable as a public.

Tutorial

Follow our step by step tutorial to build it from scratch.