Inset editor

Place the Tldraw component in a container that doesn't fill the screen.

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

export default function InsetExample() {
	return (
		<div style={{ position: 'absolute', inset: 100 }}>
			<div className="tldraw__editor">
				<Tldraw />
			</div>
		</div>
	)
}

The Tldraw component fills its container, and that container can be anywhere in your layout. Here it's an absolutely positioned box inset 100px from every edge of the page. Pointer events, keyboard shortcuts, camera, and UI all work the same as in a full-screen editor because the editor measures its own container rather than the window.

For examples with several fixed-size editors on one page, see Inset editor (fixed sizes).

Is this page helpful?
Prev
Custom renderer
Next
Inset editor (fixed sizes)