Collaborative Whiteboard

This example shows how to build a collaborative whiteboard with Liveblocks, React and Zustand.

Image of Collaborative Whiteboard

Getting started

Run the following command to 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 an .env.local file and add your public key as the VITE_LIVEBLOCKS_PUBLIC_KEY environment variable
  • Run npm run dev and go to http://localhost:5173

Develop on CodeSandbox

After forking this example on CodeSandbox, create the VITE_LIVEBLOCKS_PUBLIC_KEY environment variable as a secret.

Tutorial

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

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.