### Install Dependencies with Yarn

Source: https://docs-excalidraw.vercel.app/docs/introduction/development

Installs all necessary project dependencies using Yarn. This command should be run after cloning the repository. Requires Yarn to be installed.

```bash
yarn
```

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

### Start Excalidraw Development Server

Source: https://docs-excalidraw.vercel.app/docs/introduction/development

Starts the local development server for Excalidraw. After running this command, you can access the application at http://localhost:3000. Requires Node.js and Yarn.

```bash
yarn start
```

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

### Clone Excalidraw Repository

Source: https://docs-excalidraw.vercel.app/docs/introduction/development

This command clones the Excalidraw project from its GitHub repository to your local machine. Ensure you have Git installed.

```bash
git clone https://github.com/excalidraw/excalidraw.git
```

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

### Run Project Commands

Source: https://docs-excalidraw.vercel.app/docs/introduction/development

A collection of common Yarn commands for managing the Excalidraw project, including starting the server, fixing formatting, running tests, and updating snapshots. Requires Node.js and Yarn.

```bash
yarn start
```

```bash
yarn fix
```

```bash
yarn test
```

```bash
yarn test:update
```

```bash
yarn test:code
```

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

### Run Excalidraw with Docker Compose

Source: https://docs-excalidraw.vercel.app/docs/introduction/development

This command uses Docker Compose to build and start the Excalidraw development environment. It's an alternative if you prefer not to set up a Node.js environment locally. Requires Docker and Docker Compose.

```bash
docker-compose up --build -d
```

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

### Frame Element Ordering Example

Source: https://docs-excalidraw.vercel.app/docs/codebase/frames

Illustrates the correct order for frame elements and their children within an array. Frame children should precede the frame element itself. Incorrect ordering may lead to rendering issues and performance degradation.

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

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

### Build and Run Excalidraw Docker Image

Source: https://docs-excalidraw.vercel.app/docs/introduction/development

These commands demonstrate how to build a Docker image for the Excalidraw client and run it as a container. This is useful for self-hosting. Requires Docker.

```bash
docker build -t excalidraw/excalidraw .
```

```bash
docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest
```

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

### Configure Upstream Remote for Git Repository

Source: https://docs-excalidraw.vercel.app/docs/introduction/contributing

Commands to link your local repository to the upstream Excalidraw repository, ensuring your master branch stays synchronized with the official source.

```bash
git remote add upstream https://github.com/excalidraw/excalidraw.git
git fetch upstream
git branch --set-upstream-to=upstream/master master
```

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

### Excalidraw .excalidraw File JSON Schema

Source: https://docs-excalidraw.vercel.app/docs/codebase/json-schema

This JSON schema represents the structure of an Excalidraw scene saved to a local file (.excalidraw). It includes schema information, canvas elements, editor state, and data for image elements.

```json
{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "pologsyG-tAraPgiN9xP9b",
      "type": "rectangle",
      "x": 928,
      "y": 319,
      "width": 134,
      "height": 90
      /* ...other element properties */
    }
    /* other elements */
  ],
  "appState": {
    "gridSize": 20,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {
    "3cebd7720911620a3938ce77243696149da03861": {
      "mimeType": "image/png",
      "id": "3cebd7720911620a3938c.77243626149da03861",
      "dataURL": "data:image/png;base64,iVBORWOKGgoAAAANSUhEUgA=",
      "created": 1690295874454,
      "lastRetrieved": 1690295874454
    }
    /* ...other image data objects */
  }
}
```

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

### Excalidraw Clipboard JSON Format

Source: https://docs-excalidraw.vercel.app/docs/codebase/json-schema

This JSON schema outlines the format used when copying Excalidraw elements to the clipboard. It is similar to the file format but differs in specific attributes, notably the 'type' attribute.

```json
{
  "type": "excalidraw/clipboard",
  "elements": [
    /* Array containing excalidraw element objects */
  ],
  "files": {
    /* Object containing image data */
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.