> ## Documentation Index
> Fetch the complete documentation index at: https://docs.augustin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Draw

# Draw

Custom Excalidraw build with a gallery for managing your drawings.

## Features

* **Full-screen Excalidraw** - The drawing canvas takes up the entire screen with Excalidraw's native UI
* **Gallery page** - Browse, search, sort, rename, and delete your drawings from a dedicated gallery view
* **Collections** - Group drawings by collection/category with tab-based filtering
* **Preview thumbnails** - Gallery shows thumbnail previews of each drawing in a masonry layout
* **Dynamic theme switching** - Seamlessly switch between light and dark mode with instant thumbnail updates
* **Auto-save** - Drawings save automatically in the background
* **Standard format** - Saves as `.excalidraw` JSON files (easy to backup/migrate)
* **Gamification stats panel** - Obsidian-inspired stats with rank system and progress tracking
* **Search & sort** - Filter drawings by name, sort by last modified/created/name
* **Keyboard shortcuts** - Press `N` in gallery to create a new drawing
* **URL-based routing** - History API router (`/` gallery, `/draw/:id`) with clean URLs

## Architecture

```
draw/
├── frontend/          # React + Vite app
│   └── src/
│       ├── App.jsx          # Root: router + theme state
│       ├── api.js           # API client
│       └── components/
│           ├── GalleryView.jsx
│           ├── DrawView.jsx
│           ├── DrawingCard.jsx
│           └── RankBadge.jsx
├── backend/           # Express server with file-based storage API
│   └── server.js
├── data/              # Persistent storage (mounted volume)
│   ├── index.json     # Drawing metadata index
│   ├── library.json   # Custom library items
│   ├── thumbnails/    # PNG thumbnail files
│   └── *.excalidraw   # Individual drawing files
├── Dockerfile
└── compose.yaml
```

## API Endpoints

| Method | Endpoint                       | Description                       |
| ------ | ------------------------------ | --------------------------------- |
| GET    | `/api/drawings`                | List all drawings (metadata only) |
| POST   | `/api/drawings`                | Create new drawing                |
| GET    | `/api/drawings/:id`            | Get drawing by ID                 |
| PUT    | `/api/drawings/:id`            | Update drawing                    |
| GET    | `/api/drawings/:id/thumbnail`  | Get thumbnail                     |
| POST   | `/api/drawings/:id/thumbnail`  | Upload thumbnail                  |
| PATCH  | `/api/drawings/:id/rename`     | Rename drawing                    |
| PATCH  | `/api/drawings/:id/collection` | Set collection                    |
| DELETE | `/api/drawings/:id`            | Delete drawing                    |
| GET    | `/api/library`                 | Get custom library items          |
| PUT    | `/api/library`                 | Save custom library items         |

## Deployment

```bash theme={null}
cd ~/apps/draw
docker compose build && docker compose up -d
```

* Accessible at `draw.augustin.ai` via Cloudflare tunnel → Traefik
* Internal port: 3000