ExcaliDash v0.1.6

A self-hosted dashboard and organizer for Excalidraw with live collaboration features.

Screenshots

Table of Contents

• Screenshots
• Features
• Upgrading
• Installation
  • Docker Hub (Recommended)
  • Docker Build
• Development
  • Clone the Repository
  • Frontend
  • Backend
  • Project Structure
• Credits

Features

Persistent storage for all your drawings

Real time collaboration

Search your drawings

Drag and drop drawings into collections

Export/import your drawings and databases for backup

Upgrading

See release notes for a specific release.

Installation

Caution

NOT for production use. While attempts have been made at hardening (XSS/dompurify, CORS, rate-limiting, sanitization), they are inadequate for public deployment. Do not expose any ports. Currently lacking CSRF.

Caution

ExcaliDash is in BETA. Please backup your data regularly (e.g. with cron).

Docker Hub (Recommended)

Install Docker

# Download docker-compose.prod.yml
curl -OL https://raw.githubusercontent.com/ZimengXiong/ExcaliDash/refs/heads/main/docker-compose.prod.yml

# Pull images
docker compose -f docker-compose.prod.yml pull

# Run container
docker compose -f docker-compose.prod.yml up -d

# Access the frontend at localhost:6767

Docker Build

Install Docker

# Clone the repository (recommended)
git clone git@github.com:ZimengXiong/ExcaliDash.git

# or, clone with HTTPS
# git clone https://github.com/ZimengXiong/ExcaliDash.git

docker compose build
docker compose up -d

# Access the frontend at localhost:6767

Reverse proxy / Traefik setups

When ExcaliDash runs behind Traefik, Nginx, or another reverse proxy, configure both containers so that API + WebSocket calls resolve correctly:

• FRONTEND_URL (backend) must match the public URL that users hit (e.g. https://excalidraw.example.com). This controls CORS and Socket.IO origin checks.
• BACKEND_URL (frontend) tells the Nginx container how to reach the backend from inside Docker/Kubernetes. Override it if your reverse proxy exposes the backend under a different hostname.

frontend:
  environment:
    - BACKEND_URL=excalidash-backend.default.svc.cluster.local:8000
backend:
  environment:
    - FRONTEND_URL=https://excalidraw.example.com

Development

Clone the Repository

# Clone the repository (recommended)
git clone git@github.com:ZimengXiong/ExcaliDash.git

# or, clone with HTTPS
# git clone https://github.com/ZimengXiong/ExcaliDash.git

Frontend

cd ExcaliDash/frontend
npm install

# Copy environment file and customize if needed
cp .env.example .env

npm run dev

Backend

cd ExcaliDash/backend
npm install

# Copy environment file and customize if needed
cp .env.example .env

# Generate Prisma client and setup database
npx prisma generate
npx prisma db push

npm run dev

Project Structure

ExcaliDash/
├── backend/                 # Node.js + Express + Prisma
│   ├── src/
│   │   └── index.ts        # Main server file
│   ├── prisma/
│   │   ├── schema.prisma   # Database schema
│   │   └── dev.db         # SQLite database
│   └── package.json
├── frontend/               # React + TypeScript + Vite
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/         # Page components
│   │   ├── hooks/         # Custom hooks
│   │   └── api/           # API client
│   └── package.json
└── README.md

Credits

• Example designs from:
  • https://github.com/Prakash-sa/system-design-ultimatum/tree/main
  • https://github.com/kitsteam/excalidraw-examples/tree/main
• The Amazing work of Excalidraw developers