Quick Start
Add a tldraw canvas to your React app in just 5 minutes.
You can use the tldraw SDK to craft infinite canvas experiences for the web. It's perfect for collaborative whiteboards but you can use it for lots of other things, too.
By the end of this guide you will have made something that looks like this:
1. Installation
- Set up a React project however you normally do. We recommend Vite.
- Install the tldraw library using this command:
npm install tldraw
2. Import styles
To import fonts and CSS for tldraw:
- Create or edit a css file called
index.css
- Copy and paste this into the file:
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap");
@import url("tldraw/tldraw.css");
body {
font-family: "Inter";
}
3. Render tldraw component
To render the Tldraw component
- Import the
<Tldraw />
component from the tldraw` package - Import the
index.css
CSS file from earlier - Wrap the Tldraw component in a
<div>
element with the style attribute set to:{ position: 'fixed', inset: 0 }
This will render a full screen canvas:
import { Tldraw } from 'tldraw'
import './index.css'
export default function App() {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}
4. Make it multiplayer
At this point, you have a complete working single-user whiteboard. To add support for multiple users collaborating in realtime, you can use the tldraw sync extension library.
npm install @tldraw/sync
Set up your component with our demo server:
- Import the
useMultiplayerDemo
hook from the@tldraw/sync
package - Add the hook to your component with a unique
roomId
- Pass the
store
returned from the hook into your<Tldraw />
component
import { Tldraw } from 'tldraw'
import { useMultiplayerDemo } from '@tldraw/sync'
import './index.css'
export default function App() {
const store = useMultiplayerDemo({ roomId: 'myapp-abc123' })
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw store={store} />
</div>
)
}
Next Steps
Now that you have your canvas working, you can:
- Customize the UI of the editor
- Add your own shapes and tools
- Replace our sync demo server with a more robust sync backend
We provide the above examples and more in our examples section. Go build something creative and please do share it with us in our #show-and-tell channel on Discord!