Tldraw component

The simplest way to use the Tldraw component.

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

export default function BasicExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw />
		</div>
	)
}

The Tldraw component renders the full tldraw editor as a regular React component. Put it anywhere in your React tree; it fills whatever container it's given, so the container needs a size. Here .tldraw__editor makes it fill the page.

Import tldraw/tldraw.css alongside the component. Without it, the editor's UI has no styling.

By default the editor does not persist between refreshes or sync between tabs. To keep your work after a refresh, see the persistence key example.

Is this page helpful?

Attribution timeline

Editor options