# Tldraw Whiteboard (Storage)

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/). 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

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)

### Dev server setup

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)

### Deploy on Vercel

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.

### Develop on CodeSandbox

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).

## 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).

Liveblocks Tldraw Whiteboard