Shape options

Change the behavior of built-in shapes with ShapeUtil.configure.

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

const shapeUtils = [
	FrameShapeUtil.configure({ showColors: true }),
	NoteShapeUtil.configure({ resizeMode: 'scale' }),
]

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

Several built-in shape utils expose an options object. ShapeUtil.configure(options) returns a subclass of the util with those options overridden, and passing that subclass in the shapeUtils prop replaces the default one.

You can find a shape's options in the options property of its util, for example NoteShapeOptions and FrameShapeOptions. Here notes get resizeMode: 'scale' so they can be resized by dragging a handle, and frames get showColors: true so the color style applies to them.

Try creating a note (N) and dragging a corner handle, or a frame (F) and changing its color in the style panel.

Is this page helpful?
Prev
Editor options
Next
Camera options