aboutsummaryrefslogtreecommitdiffstats
path: root/dev-docs/docs/codebase/json-schema.mdx
blob: e4302dc4e0f6787b185ea96faebcf0bd66ec87ae (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# JSON Schema

The Excalidraw data format uses plaintext JSON.

## Excalidraw files

When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`) is using the below format.

### Attributes

| Attribute | Description | Value |
| --- | --- | --- |
| `type` | The type of the Excalidraw schema | `"excalidraw"` |
| `version` | The version of the Excalidraw schema | number |
| `source` | The source URL of the Excalidraw application | `"https://excalidraw.com"` |
| `elements` | An array of objects representing excalidraw elements on canvas | Array containing excalidraw element objects |
| `appState` | Additional application state/configuration | Object containing application state properties |
| `files` | Data for excalidraw `image` elements | Object containing image data |

### JSON Schema example

```json
{
  // schema information
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",

  // elements on canvas
  "elements": [
    // example element
    {
      "id": "pologsyG-tAraPgiN9xP9b",
      "type": "rectangle",
      "x": 928,
      "y": 319,
      "width": 134,
      "height": 90
      /* ...other element properties */
    }
    /* other elements */
  ],

  // editor state (canvas config, preferences, ...)
  "appState": {
    "gridSize": 20,
    "viewBackgroundColor": "#ffffff"
  },

  // files data for "image" elements, using format `{ [fileId]: fileData }`
  "files": {
    // example of an image data object
    "3cebd7720911620a3938ce77243696149da03861": {
      "mimeType": "image/png",
      "id": "3cebd7720911620a3938c.77243626149da03861",
      "dataURL": "data:image/png;base64,iVBORWOKGgoAAAANSUhEUgA=",
      "created": 1690295874454,
      "lastRetrieved": 1690295874454
    }
    /* ...other image data objects */
  }
}
```

## Excalidraw clipboard format

When copying selected excalidraw elements to clipboard, the JSON schema is similar to `.excalidraw` format, except it differs in attributes.

### Attributes

| Attribute | Description | Example Value |
| --- | --- | --- |
| `type` | The type of the Excalidraw document. | "excalidraw/clipboard" |
| `elements` | An array of objects representing excalidraw elements on canvas. | Array containing excalidraw element objects (see example below) |
| `files` | Data for excalidraw `image` elements. | Object containing image data |