Toggle focus mode

This example demonstrates how to enable focus mode when the editor mounts. Focus mode provides a distraction-free environment by hiding the UI elements and focusing on the canvas content.

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

export default function FocusModeExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				onMount={(editor) => {
					// [1]
					editor.updateInstanceState({ isFocusMode: true })
				}}
			/>
		</div>
	)
}

/**
 * This example demonstrates how to enable focus mode when the editor mounts.
 *
 * [1] The editor's instance state is updated on mount to enable focus mode.
 */
Is this page helpful?
Prev
Search text on the canvas
Next
Add a tool to the toolbar