Force mobile layout

Force the UI to use the mobile layout regardless of screen size.

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

export default function ForceMobileExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw persistenceKey="force-mobile-example" forceMobile />
		</div>
	)
}

/*
The `forceMobile` prop pins the UI to the mobile breakpoint regardless of the
container's width. Useful for previewing the mobile layout on desktop, or when
the editor is embedded in a narrow panel where the desktop layout wouldn't fit.
*/

The forceMobile prop pins tldraw's UI to the mobile breakpoint, so the toolbar and menus render in their compact mobile arrangement even in a wide window. Without it, the layout is chosen from the width of the editor's container.

Try resizing the window: the layout stays in mobile mode.

Is this page helpful?
Prev
Dark mode
Next
Toggle dark mode