Change default styles

Change the default value of a style prop with setDefaultValue.

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

// Call this at module level, before any editor is created, so every editor
// (and every new shape) picks up the new default.
DefaultSizeStyle.setDefaultValue('s')

export default function ChangingDefaultStyleExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw persistenceKey="changing-default-style-example" />
		</div>
	)
}

Every style prop has a built-in default value: new shapes use m for size, black for color, and so on. Call setDefaultValue on the style prop to change it. In this example the size style defaults to s, so newly created shapes are small.

Call setDefaultValue at module level, before any editor is created, so the change applies everywhere the style is used.

Is this page helpful?
Prev
Change default colors
Next
Changing menus