Scrolling container

The Tldraw component can be used inside of any layout, including a scrollable container. Note that the editor will accept mousewheel events unless it is "unfocused".

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

export default function ScrollExample() {
	return (
		<div
			style={{
				width: '150vw',
				height: '150vh',
				display: 'flex',
				justifyContent: 'center',
				alignItems: 'center',
				backgroundColor: '#fff',
			}}
		>
			<div style={{ width: '60vw', height: '80vh' }}>
				<Tldraw persistenceKey="scroll-example" />
			</div>
		</div>
	)
}

/*
This example shows how you can use the Tldraw component inside a scrollable container. 
The component will still accept mousewheel events while "focused". Try turning off the
autoFocus prop to see the difference.
*/
Is this page helpful?
Prev
Inset editor
Next
Multiple editors