Excalidraw

https://docs.excalidraw.com/docs

Admin

Excalidraw is a virtual whiteboard tool that lets you easily sketch diagrams and wireframes for your...

Tokens:1,383

Snippets:2

Trust Score:9.8

Update:10 months ago

Show doc for...

Tokens:

Raw

### Excalidraw File JSON Schema Example

Source: https://docs.excalidraw.com/docs/codebase/json-schema

Example of the JSON structure for an Excalidraw file (.excalidraw). Contains schema information, canvas elements, application state, and image file data.

```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 */  
  }  
}
```

--------------------------------

### Frame Element Ordering Pattern

Source: https://docs.excalidraw.com/docs/codebase/frames

Demonstrates the correct ordering structure for frame elements in Excalidraw, where frame children must precede their parent frame element. This pattern ensures proper rendering, clipping, and performance optimization in the editor.

```javascript
[  
  other_element,  
  frame1_child1,  
  frame1_child2,  
  frame1,  
  other_element,  
  frame2_child1,  
  frame2_child2,  
  frame2,  
  other_element,  
  ...  
]  

```

Tokens:

Raw