skills/tldraw-file/references/record-templates.md

tldraw Record Templates

Required Base Records

{
  "gridSize": 10,
  "name": "",
  "meta": {},
  "id": "document:document",
  "typeName": "document"
}

{
  "id": "page:page",
  "name": "Page",
  "index": "a1",
  "meta": {},
  "typeName": "page"
}

Every shape should include:

{
  "parentId": "page:page",
  "index": "a2",
  "typeName": "shape"
}

Rich Text Helper

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Label"
        }
      ]
    }
  ]
}

Also include legacy text with the same plain text.

Geo Shape

Use geo shapes for most boxes.

{
  "x": 100,
  "y": 100,
  "rotation": 0,
  "isLocked": false,
  "opacity": 1,
  "meta": {},
  "id": "shape:box",
  "type": "geo",
  "props": {
    "geo": "rectangle",
    "w": 260,
    "h": 90,
    "color": "blue",
    "labelColor": "black",
    "fill": "solid",
    "dash": "solid",
    "size": "m",
    "font": "sans",
    "align": "middle",
    "verticalAlign": "middle",
    "growY": 0,
    "url": "",
    "scale": 1,
    "richText": {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"My box"}]}]},
    "text": "My box"
  },
  "parentId": "page:page",
  "index": "a2",
  "typeName": "shape"
}

Text Shape

{
  "x": 100,
  "y": 40,
  "rotation": 0,
  "isLocked": false,
  "opacity": 1,
  "meta": {},
  "id": "shape:title",
  "type": "text",
  "props": {
    "color": "black",
    "size": "xl",
    "font": "sans",
    "textAlign": "start",
    "autoSize": true,
    "w": 900,
    "scale": 1,
    "richText": {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Diagram Title"}]}]},
    "text": "Diagram Title"
  },
  "parentId": "page:page",
  "index": "a1",
  "typeName": "shape"
}

Arrow Shape

Arrows require labelColor.

{
  "x": 400,
  "y": 200,
  "rotation": 0,
  "isLocked": false,
  "opacity": 1,
  "meta": {},
  "id": "shape:arrow",
  "type": "arrow",
  "props": {
    "kind": "arc",
    "color": "black",
    "labelColor": "black",
    "fill": "none",
    "dash": "solid",
    "size": "m",
    "arrowheadStart": "none",
    "arrowheadEnd": "arrow",
    "bend": 0,
    "start": {"x": 0, "y": 0},
    "end": {"x": 120, "y": 0},
    "labelPosition": 0.5,
    "font": "sans",
    "scale": 1,
    "richText": {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"label"}]}]},
    "text": "label"
  },
  "parentId": "page:page",
  "index": "a3",
  "typeName": "shape"
}