Tldraw

From Just Solve the File Format Problem
(Difference between revisions)
Jump to: navigation, search
(Provide two simple examples)
Line 10: Line 10:
  
 
==Format Information==
 
==Format Information==
 +
 
'''TLDR''' files are [[JSON]] text files with the key "tldrawFileFormatVersion".<ref>https://tldraw.dev/reference/tldraw/TldrawFile#tldrawFileFormatVersion</ref><ref>https://github.com/tldraw/tldraw/blob/v4.2.0/packages/tldraw/src/lib/utils/tldr/file.ts#L42</ref>
 
'''TLDR''' files are [[JSON]] text files with the key "tldrawFileFormatVersion".<ref>https://tldraw.dev/reference/tldraw/TldrawFile#tldrawFileFormatVersion</ref><ref>https://github.com/tldraw/tldraw/blob/v4.2.0/packages/tldraw/src/lib/utils/tldr/file.ts#L42</ref>
 +
 +
==Examples==
 +
 +
The given example as the top-level keys and types:
 +
 +
<pre>
 +
  "top_level_keys": [
 +
    "tldrawFileFormatVersion",
 +
    "schema",
 +
    "records"
 +
  ],
 +
  "top_level_types": [
 +
    "integer",
 +
    "map",
 +
    "list"
 +
  ],
 +
 +
</pre>
 +
 +
An example of a TLDRAW file with just the text "JustSolveIt" as an image looks as follows:
 +
 +
<pre>
 +
{
 +
  "tldrawFileFormatVersion": 1,
 +
  "schema": {
 +
    "schemaVersion": 2,
 +
    "sequences": {
 +
      "com.tldraw.store": 5,
 +
      "com.tldraw.asset": 1,
 +
      "com.tldraw.camera": 1,
 +
      "com.tldraw.document": 2,
 +
      "com.tldraw.instance": 26,
 +
      "com.tldraw.instance_page_state": 5,
 +
      "com.tldraw.page": 1,
 +
      "com.tldraw.instance_presence": 6,
 +
      "com.tldraw.pointer": 1,
 +
      "com.tldraw.shape": 4,
 +
      "com.tldraw.asset.bookmark": 2,
 +
      "com.tldraw.asset.image": 5,
 +
      "com.tldraw.asset.video": 5,
 +
      "com.tldraw.shape.group": 0,
 +
      "com.tldraw.shape.text": 4,
 +
      "com.tldraw.shape.bookmark": 2,
 +
      "com.tldraw.shape.draw": 4,
 +
      "com.tldraw.shape.geo": 11,
 +
      "com.tldraw.shape.note": 10,
 +
      "com.tldraw.shape.line": 5,
 +
      "com.tldraw.shape.frame": 1,
 +
      "com.tldraw.shape.arrow": 8,
 +
      "com.tldraw.shape.highlight": 3,
 +
      "com.tldraw.shape.embed": 4,
 +
      "com.tldraw.shape.image": 5,
 +
      "com.tldraw.shape.video": 4,
 +
      "com.tldraw.binding.arrow": 1
 +
    }
 +
  },
 +
  "records": [
 +
    {
 +
      "gridSize": 10,
 +
      "name": "",
 +
      "meta": {},
 +
      "id": "document:document",
 +
      "typeName": "document"
 +
    },
 +
    {
 +
      "x": 0,
 +
      "y": 0,
 +
      "lastActivityTimestamp": 0,
 +
      "meta": {},
 +
      "id": "pointer:pointer",
 +
      "typeName": "pointer"
 +
    },
 +
    {
 +
      "meta": {},
 +
      "id": "page:page",
 +
      "name": "Page 1",
 +
      "index": "a1",
 +
      "typeName": "page"
 +
    },
 +
    {
 +
      "followingUserId": null,
 +
      "opacityForNextShape": 1,
 +
      "stylesForNextShape": {},
 +
      "brush": null,
 +
      "scribbles": [],
 +
      "cursor": {
 +
        "type": "default",
 +
        "rotation": 0
 +
      },
 +
      "isFocusMode": false,
 +
      "exportBackground": true,
 +
      "isDebugMode": false,
 +
      "isToolLocked": false,
 +
      "screenBounds": {
 +
        "x": 0,
 +
        "y": 0,
 +
        "w": 1844,
 +
        "h": 927
 +
      },
 +
      "insets": [
 +
        false,
 +
        false,
 +
        false,
 +
        false
 +
      ],
 +
      "zoomBrush": null,
 +
      "isGridMode": false,
 +
      "isPenMode": false,
 +
      "chatMessage": "",
 +
      "isChatting": false,
 +
      "highlightedUserIds": [],
 +
      "isFocused": true,
 +
      "devicePixelRatio": 1,
 +
      "isCoarsePointer": false,
 +
      "isHoveringCanvas": false,
 +
      "openMenus": [],
 +
      "isChangingStyle": false,
 +
      "isReadonly": false,
 +
      "meta": {},
 +
      "duplicateProps": null,
 +
      "cameraState": "idle",
 +
      "id": "instance:instance",
 +
      "currentPageId": "page:page",
 +
      "typeName": "instance"
 +
    },
 +
    {
 +
      "editingShapeId": null,
 +
      "croppingShapeId": null,
 +
      "selectedShapeIds": [
 +
        "shape:_jlzRyAFvopE8_l0o-23c"
 +
      ],
 +
      "hoveredShapeId": null,
 +
      "erasingShapeIds": [],
 +
      "hintingShapeIds": [],
 +
      "focusedGroupId": null,
 +
      "meta": {},
 +
      "id": "instance_page_state:page:page",
 +
      "pageId": "page:page",
 +
      "typeName": "instance_page_state"
 +
    },
 +
    {
 +
      "x": -461,
 +
      "y": -231.75,
 +
      "z": 2,
 +
      "meta": {},
 +
      "id": "camera:page:page",
 +
      "typeName": "camera"
 +
    },
 +
    {
 +
      "x": 579.9765625,
 +
      "y": 243.1875,
 +
      "rotation": 0,
 +
      "isLocked": false,
 +
      "opacity": 1,
 +
      "meta": {},
 +
      "id": "shape:_jlzRyAFvopE8_l0o-23c",
 +
      "type": "text",
 +
      "props": {
 +
        "color": "black",
 +
        "size": "m",
 +
        "w": 144.953125,
 +
        "font": "draw",
 +
        "textAlign": "start",
 +
        "autoSize": true,
 +
        "scale": 1,
 +
        "richText": {
 +
          "type": "doc",
 +
          "attrs": {
 +
            "dir": "auto"
 +
          },
 +
          "content": [
 +
            {
 +
              "type": "paragraph",
 +
              "attrs": {
 +
                "dir": "auto"
 +
              },
 +
              "content": [
 +
                {
 +
                  "type": "text",
 +
                  "text": "JustSolveIt"
 +
                }
 +
              ]
 +
            }
 +
          ]
 +
        }
 +
      },
 +
      "parentId": "page:page",
 +
      "index": "a1X9YamV",
 +
      "typeName": "shape"
 +
    }
 +
  ]
 +
}
 +
</pre>
 +
 +
Irakasi uses a modified version of the tldraw format, using the top-level keys:
 +
 +
<pre>
 +
  "top_level_keys": [
 +
    "schema",
 +
    "shapes",
 +
    "rootShapeIds",
 +
    "bindings",
 +
    "assets"
 +
  ],
 +
  "top_level_types": [
 +
    "map",
 +
    "list",
 +
    "list",
 +
    "list",
 +
    "list"
 +
  ],
 +
 +
</pre>
 +
 +
With the given output:
 +
 +
<pre>
 +
{
 +
  "schema": {
 +
    "schemaVersion": 2,
 +
    "sequences": {
 +
      "com.tldraw.store": 5,
 +
      "com.tldraw.asset": 1,
 +
      "com.tldraw.camera": 1,
 +
      "com.tldraw.document": 2,
 +
      "com.tldraw.instance": 25,
 +
      "com.tldraw.instance_page_state": 5,
 +
      "com.tldraw.page": 1,
 +
      "com.tldraw.instance_presence": 6,
 +
      "com.tldraw.pointer": 1,
 +
      "com.tldraw.shape": 4,
 +
      "com.tldraw.asset.bookmark": 2,
 +
      "com.tldraw.asset.image": 5,
 +
      "com.tldraw.asset.video": 5,
 +
      "com.tldraw.shape.group": 0,
 +
      "com.tldraw.shape.arrow": 5,
 +
      "com.tldraw.shape.camera": 0,
 +
      "com.tldraw.shape.frame": 4,
 +
      "com.tldraw.shape.geometry": 4,
 +
      "com.tldraw.shape.image": 5,
 +
      "com.tldraw.shape.path": 5,
 +
      "com.tldraw.shape.pointsPath": 5,
 +
      "com.tldraw.shape.polyLine": 5,
 +
      "com.tldraw.shape.richText": 4,
 +
      "com.tldraw.shape.text": 3,
 +
      "com.tldraw.shape.video": 3,
 +
      "com.tldraw.shape.web-embed": 4,
 +
      "com.tldraw.binding.arrow": 1,
 +
      "com.irakasi.animation": 0,
 +
      "com.irakasi.store": 1
 +
    }
 +
  },
 +
  "shapes": [
 +
    {
 +
      "x": -102.13671875,
 +
      "y": -87.0234375,
 +
      "rotation": 0,
 +
      "isLocked": false,
 +
      "opacity": 1,
 +
      "meta": {},
 +
      "id": "shape:MrzjkBEbWNW7MvEg5oZnc",
 +
      "type": "text",
 +
      "props": {
 +
        "w": 71.734375,
 +
        "text": "JustSolveIt",
 +
        "textScale": 1,
 +
        "lineHeight": 1.35,
 +
        "autoSize": true,
 +
        "textStroke": "#111827",
 +
        "textFill": "#e5e7eb",
 +
        "textStrokeOverFill": false,
 +
        "textStrokeStyle": "none",
 +
        "textStrokeOpacity": 1,
 +
        "textStrokeWidth": 1,
 +
        "textFillStyle": "solid",
 +
        "textFillOpacity": 1,
 +
        "font": "draw",
 +
        "drawFamily": {
 +
          "id": "Indie Flower",
 +
          "url": "https://fonts.gstatic.com/s/indieflower/v21/m8JVjfNVeKWVnh3QMuKkFcZla0GG1dKEDw.woff2"
 +
        },
 +
        "sansSerifFamily": {
 +
          "id": "Wotfard",
 +
          "url": "/fonts/Wotfard/wotfard-regular-webfont.woff2"
 +
        },
 +
        "serifFamily": {
 +
          "id": "Lora",
 +
          "url": "https://fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuyJDmKxemMeZ.woff2"
 +
        },
 +
        "monospaceFamily": {
 +
          "id": "Fira Code",
 +
          "url": "https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sFVLxN87gsj0.woff2"
 +
        },
 +
        "displayFamily": {
 +
          "id": "Impact",
 +
          "url": "/fonts/impact.woff2"
 +
        },
 +
        "displayVariant": "regular",
 +
        "drawVariant": "regular",
 +
        "sansSerifVariant": "regular",
 +
        "serifVariant": "regular",
 +
        "monospaceVariant": "regular",
 +
        "textAlign": "start",
 +
        "pivotX": 8,
 +
        "pivotY": 10.796875,
 +
        "isAspectRatioLocked": false,
 +
        "visible": true,
 +
        "transparent": false,
 +
        "isFlippedHorizontally": false,
 +
        "isFlippedVertically": false,
 +
        "filter": null,
 +
        "mask": null,
 +
        "isMask": false,
 +
        "selectedHandleIds": [],
 +
        "keepStrokesRatio": false,
 +
        "textVerticalAlign": "middle",
 +
        "scaleX": 1,
 +
        "scaleY": 1
 +
      },
 +
      "parentId": "page:page",
 +
      "index": "a147msmV",
 +
      "typeName": "shape"
 +
    }
 +
  ],
 +
  "rootShapeIds": [
 +
    "shape:MrzjkBEbWNW7MvEg5oZnc"
 +
  ],
 +
  "bindings": [],
 +
  "assets": []
 +
}
 +
</pre>
 +
 +
  
 
== References ==
 
== References ==

Revision as of 20:53, 24 February 2026

File Format
Name Tldraw
Ontology
Extension(s) .tldr
MIME Type(s) application/vnd.tldraw+json
Wikidata ID Q137039604
Released 2021

tldraw[1] is a tiny little web-based drawing app released in 2021.[2]

Format Information

TLDR files are JSON text files with the key "tldrawFileFormatVersion".[3][4]

Examples

The given example as the top-level keys and types: 

  "top_level_keys": [
    "tldrawFileFormatVersion",
    "schema",
    "records"
  ],
  "top_level_types": [
    "integer",
    "map",
    "list"
  ],

An example of a TLDRAW file with just the text "JustSolveIt" as an image looks as follows: 

{
  "tldrawFileFormatVersion": 1,
  "schema": {
    "schemaVersion": 2,
    "sequences": {
      "com.tldraw.store": 5,
      "com.tldraw.asset": 1,
      "com.tldraw.camera": 1,
      "com.tldraw.document": 2,
      "com.tldraw.instance": 26,
      "com.tldraw.instance_page_state": 5,
      "com.tldraw.page": 1,
      "com.tldraw.instance_presence": 6,
      "com.tldraw.pointer": 1,
      "com.tldraw.shape": 4,
      "com.tldraw.asset.bookmark": 2,
      "com.tldraw.asset.image": 5,
      "com.tldraw.asset.video": 5,
      "com.tldraw.shape.group": 0,
      "com.tldraw.shape.text": 4,
      "com.tldraw.shape.bookmark": 2,
      "com.tldraw.shape.draw": 4,
      "com.tldraw.shape.geo": 11,
      "com.tldraw.shape.note": 10,
      "com.tldraw.shape.line": 5,
      "com.tldraw.shape.frame": 1,
      "com.tldraw.shape.arrow": 8,
      "com.tldraw.shape.highlight": 3,
      "com.tldraw.shape.embed": 4,
      "com.tldraw.shape.image": 5,
      "com.tldraw.shape.video": 4,
      "com.tldraw.binding.arrow": 1
    }
  },
  "records": [
    {
      "gridSize": 10,
      "name": "",
      "meta": {},
      "id": "document:document",
      "typeName": "document"
    },
    {
      "x": 0,
      "y": 0,
      "lastActivityTimestamp": 0,
      "meta": {},
      "id": "pointer:pointer",
      "typeName": "pointer"
    },
    {
      "meta": {},
      "id": "page:page",
      "name": "Page 1",
      "index": "a1",
      "typeName": "page"
    },
    {
      "followingUserId": null,
      "opacityForNextShape": 1,
      "stylesForNextShape": {},
      "brush": null,
      "scribbles": [],
      "cursor": {
        "type": "default",
        "rotation": 0
      },
      "isFocusMode": false,
      "exportBackground": true,
      "isDebugMode": false,
      "isToolLocked": false,
      "screenBounds": {
        "x": 0,
        "y": 0,
        "w": 1844,
        "h": 927
      },
      "insets": [
        false,
        false,
        false,
        false
      ],
      "zoomBrush": null,
      "isGridMode": false,
      "isPenMode": false,
      "chatMessage": "",
      "isChatting": false,
      "highlightedUserIds": [],
      "isFocused": true,
      "devicePixelRatio": 1,
      "isCoarsePointer": false,
      "isHoveringCanvas": false,
      "openMenus": [],
      "isChangingStyle": false,
      "isReadonly": false,
      "meta": {},
      "duplicateProps": null,
      "cameraState": "idle",
      "id": "instance:instance",
      "currentPageId": "page:page",
      "typeName": "instance"
    },
    {
      "editingShapeId": null,
      "croppingShapeId": null,
      "selectedShapeIds": [
        "shape:_jlzRyAFvopE8_l0o-23c"
      ],
      "hoveredShapeId": null,
      "erasingShapeIds": [],
      "hintingShapeIds": [],
      "focusedGroupId": null,
      "meta": {},
      "id": "instance_page_state:page:page",
      "pageId": "page:page",
      "typeName": "instance_page_state"
    },
    {
      "x": -461,
      "y": -231.75,
      "z": 2,
      "meta": {},
      "id": "camera:page:page",
      "typeName": "camera"
    },
    {
      "x": 579.9765625,
      "y": 243.1875,
      "rotation": 0,
      "isLocked": false,
      "opacity": 1,
      "meta": {},
      "id": "shape:_jlzRyAFvopE8_l0o-23c",
      "type": "text",
      "props": {
        "color": "black",
        "size": "m",
        "w": 144.953125,
        "font": "draw",
        "textAlign": "start",
        "autoSize": true,
        "scale": 1,
        "richText": {
          "type": "doc",
          "attrs": {
            "dir": "auto"
          },
          "content": [
            {
              "type": "paragraph",
              "attrs": {
                "dir": "auto"
              },
              "content": [
                {
                  "type": "text",
                  "text": "JustSolveIt"
                }
              ]
            }
          ]
        }
      },
      "parentId": "page:page",
      "index": "a1X9YamV",
      "typeName": "shape"
    }
  ]
}

Irakasi uses a modified version of the tldraw format, using the top-level keys: 

  "top_level_keys": [
    "schema",
    "shapes",
    "rootShapeIds",
    "bindings",
    "assets"
  ],
  "top_level_types": [
    "map",
    "list",
    "list",
    "list",
    "list"
  ],

With the given output: 

{
  "schema": {
    "schemaVersion": 2,
    "sequences": {
      "com.tldraw.store": 5,
      "com.tldraw.asset": 1,
      "com.tldraw.camera": 1,
      "com.tldraw.document": 2,
      "com.tldraw.instance": 25,
      "com.tldraw.instance_page_state": 5,
      "com.tldraw.page": 1,
      "com.tldraw.instance_presence": 6,
      "com.tldraw.pointer": 1,
      "com.tldraw.shape": 4,
      "com.tldraw.asset.bookmark": 2,
      "com.tldraw.asset.image": 5,
      "com.tldraw.asset.video": 5,
      "com.tldraw.shape.group": 0,
      "com.tldraw.shape.arrow": 5,
      "com.tldraw.shape.camera": 0,
      "com.tldraw.shape.frame": 4,
      "com.tldraw.shape.geometry": 4,
      "com.tldraw.shape.image": 5,
      "com.tldraw.shape.path": 5,
      "com.tldraw.shape.pointsPath": 5,
      "com.tldraw.shape.polyLine": 5,
      "com.tldraw.shape.richText": 4,
      "com.tldraw.shape.text": 3,
      "com.tldraw.shape.video": 3,
      "com.tldraw.shape.web-embed": 4,
      "com.tldraw.binding.arrow": 1,
      "com.irakasi.animation": 0,
      "com.irakasi.store": 1
    }
  },
  "shapes": [
    {
      "x": -102.13671875,
      "y": -87.0234375,
      "rotation": 0,
      "isLocked": false,
      "opacity": 1,
      "meta": {},
      "id": "shape:MrzjkBEbWNW7MvEg5oZnc",
      "type": "text",
      "props": {
        "w": 71.734375,
        "text": "JustSolveIt",
        "textScale": 1,
        "lineHeight": 1.35,
        "autoSize": true,
        "textStroke": "#111827",
        "textFill": "#e5e7eb",
        "textStrokeOverFill": false,
        "textStrokeStyle": "none",
        "textStrokeOpacity": 1,
        "textStrokeWidth": 1,
        "textFillStyle": "solid",
        "textFillOpacity": 1,
        "font": "draw",
        "drawFamily": {
          "id": "Indie Flower",
          "url": "https://fonts.gstatic.com/s/indieflower/v21/m8JVjfNVeKWVnh3QMuKkFcZla0GG1dKEDw.woff2"
        },
        "sansSerifFamily": {
          "id": "Wotfard",
          "url": "/fonts/Wotfard/wotfard-regular-webfont.woff2"
        },
        "serifFamily": {
          "id": "Lora",
          "url": "https://fonts.gstatic.com/s/lora/v32/0QI6MX1D_JOuGQbT0gvTJPa787weuyJDmKxemMeZ.woff2"
        },
        "monospaceFamily": {
          "id": "Fira Code",
          "url": "https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sFVLxN87gsj0.woff2"
        },
        "displayFamily": {
          "id": "Impact",
          "url": "/fonts/impact.woff2"
        },
        "displayVariant": "regular",
        "drawVariant": "regular",
        "sansSerifVariant": "regular",
        "serifVariant": "regular",
        "monospaceVariant": "regular",
        "textAlign": "start",
        "pivotX": 8,
        "pivotY": 10.796875,
        "isAspectRatioLocked": false,
        "visible": true,
        "transparent": false,
        "isFlippedHorizontally": false,
        "isFlippedVertically": false,
        "filter": null,
        "mask": null,
        "isMask": false,
        "selectedHandleIds": [],
        "keepStrokesRatio": false,
        "textVerticalAlign": "middle",
        "scaleX": 1,
        "scaleY": 1
      },
      "parentId": "page:page",
      "index": "a147msmV",
      "typeName": "shape"
    }
  ],
  "rootShapeIds": [
    "shape:MrzjkBEbWNW7MvEg5oZnc"
  ],
  "bindings": [],
  "assets": []
}


References

  1. ↑ https://www.tldraw.com/
  2. ↑ https://www.reddit.com/r/webdev/comments/qwovzg/tldraw_a_tiny_little_drawing_app_just_released/
  3. ↑ https://tldraw.dev/reference/tldraw/TldrawFile#tldrawFileFormatVersion
  4. ↑ https://github.com/tldraw/tldraw/blob/v4.2.0/packages/tldraw/src/lib/utils/tldr/file.ts#L42
Retrieved from "http://fileformats.archiveteam.org/index.php?title=Tldraw&oldid=51525"
Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox