Shape options

Change the behavior of built-in shapes by setting their options.

import { FrameShapeUtil, NoteShapeUtil, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

const shapeUtils = [
	// Enable colors for frame shapes
	FrameShapeUtil.configure({ showColors: true }),

	// Enable resizing for note shapes
	NoteShapeUtil.configure({ resizeMode: 'scale' }),
]

export default function ConfigureShapeUtilExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw shapeUtils={shapeUtils}></Tldraw>
		</div>
	)
}

Some of the builtin tldraw shapes can be customized to behave differently based on your needs. This is done via the ShapeUtil.configure function which returns a new version of the shape's util class with custom options specified.

You can see a shape's options by looking at the options property of its ShapeUtil. For example, the note shape's options are listed at NoteShapeOptions. In this example the note shape's options are modified so the note scales as text is added.

Is this page helpful?
Prev
Editor options
Next
Camera options