TLGeoShape • tldraw Docs

A geo shape represents geometric forms like rectangles, ellipses, triangles, and other predefined shapes. Geo shapes support styling, text content, and can act as containers.

type TLGeoShape = TLBaseShape<"geo", TLGeoShapeProps>;

Example

const geoShape: TLGeoShape = {
  id: createShapeId(),
  typeName: "shape",
  type: "geo",
  x: 100,
  y: 100,
  rotation: 0,
  index: "a1",
  parentId: "page:page1",
  isLocked: false,
  opacity: 1,
  props: {
    geo: "rectangle",
    w: 200,
    h: 100,
    color: "black",
    fill: "solid",
    dash: "solid",
    size: "m",
    font: "draw",
    align: "middle",
    verticalAlign: "middle",
    richText: toRichText("Hello World"),
    labelColor: "black",
    url: "",
    growY: 0,
    scale: 1,
  },
  meta: {},
};