Toggle focus mode

Enable focus mode on mount with updateInstanceState.

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>
	)
}

/*
[1]
Focus mode is a flag on the editor's instance state. `updateInstanceState` sets it; the default UI
reads it and hides everything except a small exit button. When a `persistenceKey` is used, this
flag is preserved as a user preference, so setting it in `onMount` forces it on regardless.
*/

Focus mode hides the default UI so only the canvas is visible. It's a flag on the editor's instance state, so editor.updateInstanceState({ isFocusMode: true }) turns it on and the UI responds. Users can toggle it themselves with Cmd/Ctrl+. or the exit button that focus mode leaves in the corner.

Is this page helpful?
Prev
Replace a built-in overlay
Next
Hovered overlay