Tldraw Whiteboard (Storage)

<p> <a href="https://liveblocks.io/examples/tldraw-whiteboard/nextjs-tldraw-whiteboard-storage/preview"> <img src="https://img.shields.io/badge/live%20preview-message?style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2Ljg0OSA0Ljc1SDBsNC44NDggNS4wNzV2Ny4wMDhsMTItMTIuMDgzWk03LjE1IDE5LjI1SDI0bC00Ljg0OS01LjA3NVY3LjE2N2wtMTIgMTIuMDgzWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==&color=333" alt="Live Preview" /> </a> <a href="https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-tldraw-whiteboard-storage"> <img src="https://img.shields.io/badge/open%20in%20codesandbox-message?style=flat&logo=codesandbox&color=333&logoColor=fff" alt="Open in CodeSandbox" /> </a> <img src="https://img.shields.io/badge/react-message?style=flat&logo=react&color=0bd&logoColor=fff" alt="React" /> <img src="https://img.shields.io/badge/next.js-message?style=flat&logo=next.js&color=07f&logoColor=fff" alt="Next.js" /> </p>

This example shows how to build a collaborative tldraw canvas with Liveblocks Storage, and Next.js.

<img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/examples/tldraw-whiteboard.png" width="536" alt="tldraw collaborative canvas" />

Getting started

Run the following command to try this example locally:

npx create-liveblocks-app@latest --example nextjs-tldraw-whiteboard-storage --api-key

This will download the example and ask permission to open your browser, enabling you to automatically get your API key from your liveblocks.io account.

Manual setup

<details><summary>Read more</summary> <p></p>

Alternatively, you can set up your project manually:

• Install all dependencies with npm install
• Create an account on liveblocks.io
• Copy your secret key from the dashboard
• Create an .env.local file and add your secret key as the LIVEBLOCKS_SECRET_KEY environment variable
• Run npm run dev and go to http://localhost:3000

</details>

Deploy on Vercel

<details><summary>Read more</summary> <p></p>

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

npx create-liveblocks-app@latest --example nextjs-tldraw-whiteboard-storage --vercel

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

</details>

Develop on CodeSandbox

<details><summary>Read more</summary> <p></p>

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

</details>

License

The tldraw library is provided under the tldraw license which allows commercial and non-commercial use. To purchase a business license and remove the watermark, contact sales@tldraw.com.