Shape options

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.

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>
	)
}
Is this page helpful?
Prev
Editor options
Next
Camera options