Tldraw

From Just Solve the File Format Problem
Jump to: navigation, search
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]

Contents

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

Further information

Retrieved from "http://fileformats.archiveteam.org/index.php?title=Tldraw&oldid=51527"
Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox