Usage

The <Tldraw> component is the easiest way to get started. To use it, create a file like this one:

import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'

export default function () {
	return (
		<div style={{ position: 'fixed', inset: 0 }} >
			<Tldraw />
		</div>
	)
}

CSS

In order to use the <Tldraw> component, you should also import the tldraw.css file from the @tldraw/tldraw package. You can alternatively import this file inside of another CSS file using the @import syntax.

You can overwrite these files with other CSS or copy the contents into a different file and import that instead.

HTML

If you're using the <Tldraw> component in a full-screen app, you probably also want to update your index.html's meta viewport element as shown below.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

This may not be critical to <Tldraw> performing correctly, however some features (such as safe area positioning) will only work correctly if these viewport options are set.

Using in Next.js, Create React App, Vite, etc.

Check the examples repository to see examples of tldraw being used in various frameworks.

By the way, the <Tldraw> component can't be server-rendered. If you're using the component in a server-rendered framework (such as Next.js) then you need to import it dynamically.

Going deeper

The <Tldraw> component combines two lower-level components: <TldrawEditor> and <TldrawUi>. If you want to have more granular control, you can use those lower-level components directly. See this example for reference.