Canon is a self-hosted email client that treats your inbox as a space for thoughtful reading and writing. A local Express proxy caches every message in SQLite — search, read, and compose happen instantly, with no dependency on remote servers. The interface is shaped like a literary journal: clean typography, a calm three-pane layout, and a dark mode that feels like reading by lamplight.
- Local-first — every message cached in SQLite. Instant load, offline-capable.
- Real-time sync — IMAP IDLE and Gmail History API converge within 1–3 seconds.
- Encrypted search — MiniSearch engine runs in a Web Worker over encrypted IndexedDB.
- Rich compose — TipTap editor with markdown shortcuts, tables, and badge-based recipients.
Under the hood, the crypto libraries inherited from Skiff provide ChaCha20-Poly1305 encryption and OpenPGP key management.
Prerequisites: Node.js ≥ 18, pnpm ≥ 9
pnpm install# Terminal 1 — Backend
cd packages/backend
cp .env.example .env # edit with your OAuth credentials
pnpm dev # → http://localhost:4000# Terminal 2 — Frontend
cd packages/mail-client
pnpm dev # → http://localhost:5173Gmail
- Go to Google Cloud Console and create a project
- Enable the Gmail API, then configure the OAuth consent screen
- Create an OAuth 2.0 Client ID (Web application)
- Add
http://localhost:4000/auth/google/callbackas a redirect URI - Copy the Client ID and Secret into
packages/backend/.env
163.com
- Log into 163.com mail
- Settings → POP3/SMTP/IMAP → Enable IMAP/SMTP
- Generate an app-specific password
- Sign in with your email and app password on the login screen
| Package | Description |
|---|---|
mail-client |
React 18 frontend — three-pane layout, TipTap editor |
backend |
Express proxy — OAuth + IMAP/SMTP, REST + WebSocket, SQLite |
crypto |
ChaCha20-Poly1305 AEAD, NaCl box, Argon2 key derivation |
crypto-v2 |
OpenPGP.js v5 — key gen, encrypt/decrypt, WKD lookup |
search |
Encrypted full-text search — MiniSearch + Workers + IndexedDB |
ics |
iCalendar (RFC 5545) parse/generate with recurrence rules |
theme-tokens |
CSS custom properties design system (light/dark) |
| Layer | Technology |
|---|---|
| Frontend | React 18, Vite, Zustand, TanStack React Query, TipTap, DOMPurify |
| UI | Tailwind CSS 3, Radix primitives, Framer Motion, Lucide icons |
| Backend | Node.js, Express, better-sqlite3, googleapis, imapflow, nodemailer |
| Crypto | NaCl, ChaCha20-Poly1305, OpenPGP.js v5, Argon2 |
| Search | MiniSearch, Web Workers, Comlink, IndexedDB |
The crypto and search libraries are based on Skiff's open-source code (CC BY-NC-SA 4.0). Skiff was an innovative encrypted workspace acquired by Notion in 2024.