Inset editor

Using the tldraw component in a non-fullscreen layout.

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 may be placed in any layout, even if it's not full-screen. In this example, the editor is inset within the screen layout. The component's interactions should still behave as you'd expect them to.

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