A minimal, browser-based drawing tool with a dark creative-studio aesthetic. Built for educators and trainers.
Whiteboard is a lightweight, zero-dependency drawing application designed for classroom and training environments. It runs entirely in the browser with no backend or build step required — just open index.html and start drawing.
| Feature | Description |
|---|---|
| Multi-page support | Add, delete, and navigate between pages with live thumbnail previews |
| Pen & Eraser | Drawing tools with keyboard shortcuts (B / E) |
| Color picker | Full color selection with visual swatch indicator |
| Adjustable brush size | Slider control from 1px to 50px |
| Undo | Per-page undo history (Ctrl/Cmd+Z, up to 30 states) |
| PDF export | All pages exported as a single landscape PDF document |
| Page navigation | PgUp/PgDn or Ctrl+Arrow keys to switch pages |
| Touch support | Full touch input for tablets and mobile devices |
| Coordinate tracking | Real-time cursor position in the status bar |
| Responsive layout | Adapts to any screen size with smooth animations |
| Category | Technology |
|---|---|
| Markup | HTML5 Canvas |
| Styling | CSS3 (custom properties, animations, responsive) |
| Logic | Vanilla JavaScript (ES6+) |
| PDF Export | jsPDF 3.0 (CDN) |
| Fonts | DM Sans + JetBrains Mono |
| Deployment | GitHub Pages |
┌─────────────────────────────────────────────────┐
│ Browser │
│ │
│ ┌──────────┐ ┌────────────┐ ┌────────────┐ │
│ │ Header │ │ Page Strip │ │ Status Bar │ │
│ │ Toolbar │ │ Thumbnails │ │ Coords │ │
│ └────┬─────┘ └──────┬─────┘ └────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────────────┐ │
│ │ HTML5 Canvas (1200×700) │
│ │ ├── Drawing Engine │ │
│ │ ├── Undo Stack (×30) │ │
│ │ └── Page State Mgmt │ │
│ └────────────┬────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────┐ │
│ │ jsPDF (CDN) │ │
│ │ └── Multi-page export │ │
│ └─────────────────────────┘ │
└─────────────────────────────────────────────────┘
whiteboard/
├── index.html # Main HTML with toolbar, canvas, page strip, and status bar
├── styles.css # Dark theme, responsive layout, animations
├── whiteboard.js # Drawing engine, page management, undo, PDF export
├── preview.png # Screenshot for README
└── README.md
- Any modern web browser (Chrome, Firefox, Safari, Edge)
git clone https://github.com/alfredang/whiteboard.git
cd whiteboardOpen index.html directly in your browser, or serve it locally:
# Using Python
python3 -m http.server 8000
# Using Node.js
npx serve .Then visit http://localhost:8000.
Or use the live version: https://alfredang.github.io/whiteboard/
| Shortcut | Action |
|---|---|
B |
Select Pen tool |
E |
Select Eraser tool |
Ctrl/Cmd + Z |
Undo |
PgUp / Ctrl + ← |
Previous page |
PgDn / Ctrl + → |
Next page |
This project is deployed to GitHub Pages directly from the main branch. No build step is needed — the site is served as static HTML.
To deploy your own fork:
- Fork this repository
- Go to Settings > Pages
- Set source to
Deploy from a branch→main→/ (root) - Your site will be live at
https://<your-username>.github.io/whiteboard/
Contributions are welcome!
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
For questions or suggestions, use GitHub Discussions.
Tertiary Infotech Academy Pte Ltd
- jsPDF — Client-side PDF generation
- DM Sans & JetBrains Mono — Typography
- Google Fonts — Font delivery
MIT
If you found this useful, please consider giving it a star!