A clean, modern whiteboard webapp — text, headings, sticky notes, images, and connected lines on an infinite canvas. Vanilla HTML + CSS + JS. No build step. Deploys to Vercel as a static site.
Open index.html in any modern browser, or run a local server:
npx serve .- Push this repo to GitHub
- Import it at vercel.com/new
- No build settings needed — it's a static site
Or via CLI:
npm i -g vercel
vercel- Text — body, heading, sticky note presets with full typography controls (font, size, weight, italic, underline, alignment, color, fill)
- Images — drag-and-drop, paste from clipboard, or click to upload
- Lines —
Ctrl + dragto draw a connected line between nodes (smart edge snapping, follows nodes when they move) - Multi-select — drag empty space to marquee-select,
Shift+clickto add/remove,Ctrl+Ato select all - Group ops — move, duplicate, delete, restyle the whole selection at once
- Undo / Redo with full history
- Auto-save to
localStorage - PNG export of the whole board
| Action | Shortcut |
|---|---|
| Select area | Drag empty |
| Pan | Space + drag |
| Zoom | Scroll |
| Reset view | 0 |
| Edit text | Double-click |
| Draw line | Ctrl + drag |
| Multi-select | Shift + click |
| Select all | Ctrl + A |
| Duplicate | Ctrl + D |
| Copy / Paste | Ctrl + C / V |
| Undo / Redo | Ctrl + Z / Ctrl + Shift + Z |
| Bold / Italic / Underline | Ctrl + B / I / U |
| Delete | Del |
| Nudge | Arrows (Shift = 10px) |
| Shortcuts panel | ? |
All visual tokens live at the top of styles.css under :root — colors, spacing, radii, shadows, typography. Re-skin the whole app by editing those variables.
The current theme uses the warm-paper Mercury/Ramp palette with Geist typography and a forest-green accent.