json-schema.mdx 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. # JSON Schema
  2. The Excalidraw data format uses plaintext JSON.
  3. ## Excalidraw files
  4. When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`) is using the below format.
  5. ### Attributes
  6. | Attribute | Description | Value |
  7. | --- | --- | --- |
  8. | `type` | The type of the Excalidraw schema | `"excalidraw"` |
  9. | `version` | The version of the Excalidraw schema | number |
  10. | `source` | The source URL of the Excalidraw application | `"https://excalidraw.com"` |
  11. | `elements` | An array of objects representing excalidraw elements on canvas | Array containing excalidraw element objects |
  12. | `appState` | Additional application state/configuration | Object containing application state properties |
  13. | `files` | Data for excalidraw `image` elements | Object containing image data |
  14. ### JSON Schema example
  15. ```json
  16. {
  17. // schema information
  18. "type": "excalidraw",
  19. "version": 2,
  20. "source": "https://excalidraw.com",
  21. // elements on canvas
  22. "elements": [
  23. // example element
  24. {
  25. "id": "pologsyG-tAraPgiN9xP9b",
  26. "type": "rectangle",
  27. "x": 928,
  28. "y": 319,
  29. "width": 134,
  30. "height": 90
  31. /* ...other element properties */
  32. }
  33. /* other elements */
  34. ],
  35. // editor state (canvas config, preferences, ...)
  36. "appState": {
  37. "gridSize": null,
  38. "viewBackgroundColor": "#ffffff"
  39. },
  40. // files data for "image" elements, using format `{ [fileId]: fileData }`
  41. "files": {
  42. // example of an image data object
  43. "3cebd7720911620a3938ce77243696149da03861": {
  44. "mimeType": "image/png",
  45. "id": "3cebd7720911620a3938c.77243626149da03861",
  46. "dataURL": "data:image/png;base64,iVBORWOKGgoAAAANSUhEUgA=",
  47. "created": 1690295874454,
  48. "lastRetrieved": 1690295874454
  49. }
  50. /* ...other image data objects */
  51. }
  52. }
  53. ```
  54. ## Excalidraw clipboard format
  55. When copying selected excalidraw elements to clipboard, the JSON schema is similar to `.excalidraw` format, except it differs in attributes.
  56. ### Attributes
  57. | Attribute | Description | Example Value |
  58. | --- | --- | --- |
  59. | `type` | The type of the Excalidraw document. | "excalidraw/clipboard" |
  60. | `elements` | An array of objects representing excalidraw elements on canvas. | Array containing excalidraw element objects (see example below) |
  61. | `files` | Data for excalidraw `image` elements. | Object containing image data |