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!