---
title: "Liveblocks Tldraw Whiteboard"
description: "A collaborative tldraw-like whiteboard built with Liveblocks Storage and Next.js."
url: "https://vercel.com/templates/next.js/liveblocks-tldraw-whiteboard"
links:
  repository: "https://github.com/liveblocks/liveblocks/tree/main/examples/nextjs-tldraw-whiteboard-storage"
  demo: "https://nextjs-tldraw-whiteboard-storage.liveblocks.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Tldraw+Whiteboard&demo-description=A+tldraw+whiteboard+example+built+with+Liveblocks+and+Next.js&demo-url=https%3A%2F%2Fliveblocks.io%2Fexamples%2Ftldraw-whiteboard%2Fnextjs&project-name=tldraw-whiteboard&repository-name=tldraw-whiteboard&repository-url=https%3A%2F%2Fgithub.com%2Fliveblocks%2Fliveblocks%2Fblob%2Fmain%2Fexamples%2Fnextjs-tldraw-whiteboard-storage&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2NBm87unlNtPcDzTgU3Vdp%2F7cf373b8a1d464807f2911ccae803261%2Fvercel-gallery-template-tldraw-whiteboard.png&developer-id=oac_vgAdc0379wKPfhSvnUIZ4Vc8&integration-ids=oac_vgAdc0379wKPfhSvnUIZ4Vc8&external-id=eyJlbnYiOlt7Im5hbWUiOiJMSVZFQkxPQ0tTX1NFQ1JFVF9LRVkiLCJ0eXBlIjoic2VjcmV0In1dLCJlbnZSZWFkeSI6W10sIm9yaWdpbiI6IkVYQV9WREIifQ"
---

# Liveblocks Tldraw Whiteboard

A collaborative tldraw-like whiteboard built with Liveblocks Storage and Next.js.

<p align="center">
  <a href="https://liveblocks.io#gh-light-mode-only">
    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" />
  </a>
  <a href="https://liveblocks.io#gh-dark-mode-only">
    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" />
  </a>
</p>

# 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](https://tldraw.dev/)
canvas with [Liveblocks](https://liveblocks.io) Storage, and
[Next.js](https://nextjs.org/).

<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:

```bash
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](https://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](https://liveblocks.io/dashboard)
- Copy your **secret** key from the
  [dashboard](https://liveblocks.io/dashboard/apikeys)
- 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](http://localhost:3000)

</details>

### Dev server setup

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

<p></p>

You can optionally run this example locally using the
[Liveblocks dev server](https://liveblocks.io/docs/tools/dev-server).

- Install the example as detailed above
- Run `npx liveblocks dev` to start the server
- Add `baseUrl: "http://localhost:1153"` option to `LiveblocksProvider` and
  `new Liveblocks`
- Replace `secret` in `new Liveblocks` with `"sk_localdev"`
- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000)

</details>

### Deploy on Vercel

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

<p></p>

To both deploy on [Vercel](https://vercel.com), and run the example locally, use
the following command:

```bash
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](https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-tldraw-whiteboard-storage)
on CodeSandbox, create the `LIVEBLOCKS_SECRET_KEY` environment variable as a
[secret](https://codesandbox.io/docs/secrets).

</details>

## License

The `tldraw` library is provided under the
[tldraw license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md) which
allows commercial and non-commercial use. To purchase a business license and
remove the watermark, contact [sales@tldraw.com](mailto:sales@tldraw.com).

## Related Templates

### [Platforms Starter Kit](https://vercel.com/templates/next.js/platforms-starter-kit)

Next.js template for building multi-tenant applications with the App Router and Redis.

### [Liveblocks Linear-like Issue Tracker](https://vercel.com/templates/next.js/liveblocks-linear-like-issue-tracker)

A Linear-like collaborative issue tracker using Liveblocks and Next.js.

### [Liveblocks Notion-like AI Editor](https://vercel.com/templates/next.js/liveblocks-notion-like-ai-editor)

A Notion-like collaborative text editor with AI features built with Liveblocks, Lexical, Vercel AI SDK, and Next.js.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.