Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/r0x0d/draw
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/r0x0d/draw
- Owner: r0x0d
- Created: 2024-12-22T20:11:32.000Z (18 days ago)
- Default Branch: main
- Last Pushed: 2024-12-22T20:26:45.000Z (18 days ago)
- Last Synced: 2024-12-22T21:27:07.172Z (18 days ago)
- Language: TypeScript
- Homepage: https://draw-rouge.vercel.app
- Size: 45.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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/).
## 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
Read more
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)
### Deploy on Vercel
Read more
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
Read more
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 [[email protected]](mailto:[email protected]).