tldraw.dev Open in urlscan Pro
76.76.21.142  Public Scan

Form analysis
0 forms found in the DOM

Text Content

CtrlK
LearnReferenceExamples


CtrlK
LearnReferenceExamples
 * Get Started
   * Quick Start
   * Installation
   * Releases
 * Learn tldraw
   * Editor
   * Shapes
   * Assets
   * Tools
   * Persistence
   * User interface
   * Collaboration
 * Community
   * Translations
   * Contributing
   * License

Close


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



NEXT STEPS

Now that you have your canvas working, you may be wondering: what next?

You can try:

 * Giving the editor a makeover by customizing the UI
 * Adding your own shapes and tools
 * Providing collaboration using multiplayer

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!

Edit this page
Last edited on 22 March 2023
Installation
 * On this page
   * –1. Installation
   * –2. Import Styles
   * –3. Render Tldraw Component
   * Next Steps

tldraw © 2024