How to Self-Host Excalidraw: Collaborative Virtual Whiteboard 2026

TL;DR

Excalidraw (MIT, ~85K GitHub stars, TypeScript) is a virtual whiteboard with a distinctive hand-drawn sketch aesthetic. Diagrams, wireframes, flowcharts, architecture sketches — all with real-time collaboration and end-to-end encryption. Miro charges $8/member/month; FigJam charges $3/editor/month. Self-hosted Excalidraw gives unlimited boards and collaborators for free.

Key Takeaways

Excalidraw: MIT, ~85K stars, TypeScript — most popular open source whiteboard
Hand-drawn style: Distinctive sketch aesthetic that makes diagrams feel informal and approachable
Real-time collaboration: Share a link → anyone can draw simultaneously with live cursors
End-to-end encryption: Room data encrypted in the browser — server can't read your drawings
Libraries: Thousands of pre-built shapes — AWS architecture, flowcharts, UI wireframes, icons
Export: PNG, SVG, clipboard — embed diagrams in docs, PRs, and presentations

Excalidraw vs Miro vs FigJam vs draw.io

Feature	Excalidraw	Miro	FigJam	draw.io
Price	Free (self-host)	$8/member/mo	$3/editor/mo	Free
Style	Hand-drawn	Clean	Hand-drawn	Technical
Real-time collab	Yes (E2E encrypted)	Yes	Yes	Limited
Self-hostable	Yes	No	No	Yes
Shape libraries	Community	Extensive	Figma	Built-in
Offline	Yes (.excalidraw files)	No	No	Yes
Export formats	PNG, SVG, JSON	PNG, PDF	PNG, PDF	PNG, SVG, XML

Part 1: Docker Setup (Excalidraw + Collaboration Server)

For the full self-hosted experience with real-time collaboration, you need two components:

Excalidraw — the web app (frontend)
Excalidraw Room — the collaboration server (WebSocket backend)

# docker-compose.yml
services:
  excalidraw:
    image: excalidraw/excalidraw:latest
    container_name: excalidraw
    restart: unless-stopped
    ports:
      - "3000:80"
    environment:
      VITE_APP_WS_SERVER_URL: "https://collab.yourdomain.com"

  excalidraw-room:
    image: excalidraw/excalidraw-room:latest
    container_name: excalidraw-room
    restart: unless-stopped
    ports:
      - "3002:80"

docker compose up -d

Part 2: HTTPS with Caddy

# Excalidraw web app:
draw.yourdomain.com {
    reverse_proxy localhost:3000
}

# Collaboration server (WebSocket):
collab.yourdomain.com {
    reverse_proxy localhost:3002
}

Part 3: Using Excalidraw

Drawing basics

Rectangle/Ellipse/Diamond: Click a shape tool → drag to draw
Arrow/Line: Connect shapes for flowcharts and diagrams
Text: Click anywhere → type (supports multiline)
Free draw: Pencil tool for freehand sketching
Selection: Click to select, drag to multi-select

Keyboard shortcuts

Shortcut	Action
`R`	Rectangle
`D`	Diamond
`O`	Ellipse
`A`	Arrow
`L`	Line
`P`	Pencil (free draw)
`T`	Text
`E`	Eraser
`Ctrl+D`	Duplicate selection
`Ctrl+G`	Group selection
`Ctrl+Shift+G`	Ungroup
`Alt+drag`	Clone while dragging
`Ctrl+A`	Select all
`Ctrl+Z`	Undo
`Ctrl+Shift+Z`	Redo

Style controls

Stroke color: Any color for outlines
Fill: Hachure (diagonal lines), cross-hatch, solid, or none
Stroke width: Thin, bold, extra bold
Stroke style: Solid, dashed, dotted
Edge: Sharp or round corners
Opacity: 0-100% transparency
Font: Hand-drawn, normal, code

Part 4: Real-Time Collaboration

Start a live session

Click Live collaboration button (people icon)
Start session → generates a unique room URL
Share the URL → anyone with the link can draw simultaneously
Live cursors show other users' positions

Collaboration features

Live cursors: See where collaborators are pointing and drawing
Laser pointer: Present ideas by pointing (press K)
User names: Set your name for identification
End-to-end encryption: The room key is in the URL hash — the server never sees your drawing data

Security model

URL: https://draw.yourdomain.com/#room=abc123,key=xyz789
                                       ↑ room ID   ↑ encryption key

The encryption key stays in the browser (URL hash is never sent to the server). Even the collaboration server only sees encrypted data.

Part 5: Libraries

Install community libraries

Click the Library icon (book) in the toolbar
Browse libraries → opens the community library catalog
Categories: AWS, GCP, Azure architecture, networking, flowcharts, UI mockups, etc.
Click Add to Excalidraw → shapes appear in your library panel

Popular libraries

Library	Contains
AWS Architecture Icons	EC2, S3, Lambda, VPC, etc.
Kubernetes Icons	Pods, services, deployments, ingress
System Design	Load balancers, databases, queues, caches
UI Wireframe	Buttons, forms, navigation, cards
Software Architecture	Microservices, APIs, databases, clients
Network Diagrams	Routers, switches, firewalls, servers

Create custom libraries

Select shapes you've drawn
Library → Add to library
Name your library → reuse across sessions
Export as .excalidrawlib file to share

Part 6: Export Options

Image export

Menu → Export:
  - PNG: with or without background, scale 1x-4x
  - SVG: vector format, scalable
  - Clipboard: paste directly into Slack, Notion, etc.

File export

Menu → Save to disk:
  - .excalidraw: full editable file (JSON format)
  - .excalidraw.png: PNG with embedded scene data (re-editable!)
  - .excalidraw.svg: SVG with embedded scene data

The .excalidraw.png format is powerful — it looks like a regular PNG but contains the full drawing data. Drag it back into Excalidraw to continue editing.

Embed in documentation

<!-- In Markdown docs or GitHub READMEs: -->
![Architecture Diagram](./architecture.excalidraw.png)

Embed in websites

<!-- As an SVG: -->
<img src="/diagrams/architecture.svg" alt="Architecture" />

<!-- As an interactive embed (using Excalidraw React component): -->
<iframe src="https://draw.yourdomain.com/#json=..." width="800" height="600"></iframe>

Part 7: Excalidraw for Development

Architecture diagrams

Perfect for:

System design documents
Microservice architecture maps
Database schema sketches
API flow diagrams
Infrastructure diagrams

PR documentation

Include .excalidraw.png files in pull requests to visually explain changes:

docs/
  architecture.excalidraw.png    # Editable diagram
  data-flow.excalidraw.svg       # Vector diagram

VS Code integration

Install the Excalidraw VS Code extension:

Edit .excalidraw files directly in VS Code
Preview rendered diagrams
Auto-save

Part 8: Excalidraw+ Alternative (Storage Backend)

For persistent storage of drawings (without the paid Excalidraw+ service), use a file sync solution:

Option 1: Git-backed diagrams

# Save .excalidraw files in your repo:
diagrams/
  system-architecture.excalidraw
  deployment-flow.excalidraw
  database-schema.excalidraw

# Team members open them at: draw.yourdomain.com → File → Open

# Update:
docker compose pull
docker compose up -d

# No backup needed for the app itself (stateless)
# Back up your .excalidraw files wherever you store them

# Logs:
docker compose logs -f excalidraw
docker compose logs -f excalidraw-room

See all open source design tools at OSSAlt.com/categories/design.