TLShape • tldraw Docs

The set of all shapes that are available in the editor.

This is the primary shape type used throughout tldraw. It includes both the built-in default shapes and any custom shapes that might be added.

You can use this type without a type argument to work with any shape, or pass a specific shape type string (e.g., 'geo', 'arrow', 'text') to narrow down to that specific shape type.

type TLShape<K extends keyof TLIndexedShapes = keyof TLIndexedShapes> =
  TLIndexedShapes[K]

Example

// Work with any shape in the editor
function moveShape(shape: TLShape, deltaX: number, deltaY: number): TLShape {
  return {
    ...shape,
    x: shape.x + deltaX,
    y: shape.y + deltaY,
  }
}

// Narrow to a specific shape type by passing the type as a generic argument
function getArrowLabel(shape: TLShape<'arrow'>): string {
  return shape.props.text // TypeScript knows this is a TLArrowShape
}