Hide the entire UI

Hide all of tldraw's default UI with the hideUi prop.

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

export default function HideUiExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw persistenceKey="hide-ui-example" hideUi />
		</div>
	)
}

/*
`hideUi` removes all of tldraw's default UI but keeps the editor, its tools, and its
keyboard shortcuts. Build your own controls on top with `useEditor()`; see the
custom UI example for a starting point.
*/

Passing hideUi to <Tldraw> removes the toolbar, menus, and panels while keeping the canvas, default shapes, tools, and keyboard shortcuts. The editor is fully functional; you just need to provide your own controls, typically by rendering components inside <Tldraw> that call useEditor().

Keyboard shortcuts still work here, so try pressing d for the draw tool or r for a rectangle. See the custom UI example for building your own controls.

Is this page helpful?
Prev
UI zones
Next
Replace the entire UI