Editor options

Override editor options like the maximum number of pages and animation duration.

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

const options: Partial<TldrawOptions> = {
	maxPages: 3,
	animationMediumMs: 5000,
}

export default function CustomOptionsExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw persistenceKey="custom-options-example" options={options} />
		</div>
	)
}

The options prop on Tldraw takes a Partial<TldrawOptions> and overrides tldraw's defaults; anything you leave out keeps its default value. Options are read once when the editor is created, so define the object outside the component (or memoize it) rather than creating a new one on every render.

This example limits documents to 3 pages and sets animationMediumMs to 5 seconds. Try opening the page menu and adding pages: the "create page" button disables after the third. Then zoom in or out from the zoom menu and watch the (very) slow animation.

Is this page helpful?
Prev
Tldraw component
Next
Shape options