Read-only

Put the editor in read-only mode so the document can be viewed but not changed.

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

export default function ReadOnlyExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				persistenceKey="readonly-example"
				onMount={(editor) => {
					editor.updateInstanceState({ isReadonly: true })
				}}
			/>
		</div>
	)
}

Read-only mode is an instance state flag: editor.updateInstanceState({ isReadonly: true }). This example sets it in onMount. When it's on, editing tools disappear from the toolbar (only select, hand, and laser pointer remain), editing commands like delete and paste are ignored, and shapes can't be moved or resized. You can still pan, zoom, select, and use the laser pointer.

Because it's instance state rather than document state, it can be toggled at runtime, for example when a user's permissions change. Read it back with editor.getIsReadonly().

Is this page helpful?
Prev
Persistence key
Next
Reduced motion preferences