Note resizing

Let users resize sticky notes with NoteShapeUtil's resizeMode option.

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

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

export default function ResizeNoteExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw persistenceKey="resize-note" shapeUtils={shapeUtils} />
		</div>
	)
}

Notes have a fixed size by default and can't be resized. NoteShapeUtil.configure({ resizeMode: 'scale' }) makes them scale as a whole when a resize handle is dragged: the note, its text, and its padding all grow together, so the note keeps its proportions rather than reflowing.

Create a note (N) and drag a corner handle to try it. resizeMode: 'none' is the default behavior.

Is this page helpful?
Prev
Frame colors
Next
Precise exact arrows