A local-first collaborative whiteboard. Write with a pen, stylus, or mouse on any device and another screen renders your strokes live over the local network, no screen mirroring or AirPlay lag. Everything is saved on-device, so it works offline too.
Live: https://shravangoswami.com/DrawShare/
- Vue 3, TypeScript, Vite
- Pinia for state, vue-router for routing
perfect-freehandfor stroke smoothingidbfor IndexedDB persistence- WebRTC for live sharing
- A small hand-written service worker for offline/PWA support
npm install
npm run devTo draw from another device, open the dev URL with the machine's LAN IP instead of localhost, on the same Wi-Fi.
npm run buildOutput goes to dist/. The base path can be set with the BASE_PATH env var so the same build deploys under any path.
Pushing to main runs .github/workflows/deploy.yml, which builds and publishes dist/ to the gh-pages branch. Pull requests get their own preview deploy via .github/workflows/preview.yml.
| Type | IndexedDB store | Notes |
|---|---|---|
| Project | projects |
name, page order, timestamps |
| Page | pages (by project) |
size, background, text boxes |
| Stroke | strokes (by page) |
points [{x, y, p, t}] |
Each stroke is written as soon as it is finished, so a refresh or crash loses at most the stroke in progress.
| Key | Action |
|---|---|
1 |
Pen |
2 |
Highlighter |
3 |
Eraser |
Cmd/Ctrl+Z |
Undo |
Cmd/Ctrl+Shift+Z or Cmd/Ctrl+Y |
Redo |
A Dev Mode toggle in the sidebar opens an on-screen debug terminal, useful on devices without devtools.
MIT, © 2026 Shravan Goswami. See LICENSE.