Prevent instance changes

Reject changes to the instance record that would turn grid mode off.

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

export default function PreventInstanceChangeExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				onMount={(editor) => {
					editor.updateInstanceState({ isGridMode: true })

					// Returning `prev` rejects the change no matter where it came from: menu, shortcut, or code.
					editor.sideEffects.registerBeforeChangeHandler('instance', (prev, next) => {
						if (!next.isGridMode) {
							return prev
						}
						return next
					})
				}}
			/>
		</div>
	)
}

Side effects aren't just for shapes: you can register handlers for any record type in the store. This example registers a registerBeforeChangeHandler for the instance record and returns the previous record whenever the incoming change has isGridMode: false, which cancels the change.

Try toggling the grid from the main menu or with the keyboard shortcut: it stays on. Rejecting a change this way is silent, so if the change came from a user action you may want to explain why nothing happened. To reject only some fields of a change while keeping the rest, return a merged record instead of prev.

Is this page helpful?
Prev
Block events
Next
Prevent shape changes