Skip to content

README.md

Latest commit

 

History

History
189 lines (140 loc) · 8.32 KB

README.md

File metadata and controls

189 lines (140 loc) · 8.32 KB
Raw

Whiteboard

HTML5 CSS3 JavaScript jsPDF License: MIT GitHub Pages

A minimal, browser-based whiteboard with freehand drawing and flowchart tools, in a dark creative-studio aesthetic. Built for educators and trainers.

Live Demo · Report Bug · Request Feature

Screenshot

Whiteboard Screenshot

About

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. Beyond freehand sketching, it includes a set of flowchart tools so you can build labelled diagrams (process boxes, decisions, connectors) right on the board.

Key Features

Feature Description
Freehand pen Smooth pressure-friendly drawing with a pencil cursor (B)
Flowchart shapes Process box (R), rounded terminator (G), and decision diamond (D) — drag to size, then type a centered, auto-wrapped label
Connector arrows Draw directional arrows to link shapes (A)
Line & circle Straight lines (I) and ellipses (O) with live preview
Eraser with size ring A circle cursor shows the exact eraser size as you erase (E)
Lasso delete Encircle any region to wipe it in one stroke (L)
Light / dark canvas Toggle between whiteboard and chalkboard modes (T) — existing work is inverted to match
Multi-page support Add, delete, navigate, and reset pages with live thumbnail previews
Color picker Full color selection with visual swatch indicator
Adjustable size Per-tool size slider (pen 1–50px, eraser 5–120px)
Undo Per-page undo history (Ctrl/Cmd+Z, up to 30 states)
PDF export All pages exported as a single landscape PDF document
Auto-save Pages persist to localStorage across refreshes
Touch support Full touch input for tablets and mobile devices
Responsive layout Adapts to any screen size with smooth animations

Tech Stack

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

Architecture

┌───────────────────────────────────────────────────────┐
│                        Browser                          │
│                                                         │
│  ┌──────────┐   ┌─────────────┐   ┌────────────┐        │
│  │  Header  │   │  Page Strip │   │ Status Bar │        │
│  │  Toolbar │   │  Thumbnails │   │  Coords    │        │
│  └────┬─────┘   └──────┬──────┘   └────────────┘        │
│       │                │                                │
│       ▼                ▼                                │
│  ┌──────────────────────────────────────────┐          │
│  │        HTML5 Canvas (1200×700)            │          │
│  │  ├── Freehand / Line / Circle             │          │
│  │  ├── Flowchart shapes + text labels       │          │
│  │  ├── Eraser (+ size ring) / Lasso delete  │          │
│  │  ├── Snapshot preview + Undo stack (×30)  │          │
│  │  └── Per-page state                       │          │
│  └───────┬───────────────────────┬───────────┘          │
│          │                       │                      │
│          ▼                       ▼                      │
│  ┌────────────────┐     ┌──────────────────┐            │
│  │  localStorage  │     │   jsPDF (CDN)    │            │
│  │  auto-save     │     │  multi-page PDF  │            │
│  └────────────────┘     └──────────────────┘            │
└───────────────────────────────────────────────────────┘

Project Structure

whiteboard/
├── index.html          # Toolbar, canvas, page strip, status bar, text editor overlay
├── styles.css          # Dark/light themes, responsive layout, animations, cursors
├── whiteboard.js       # Drawing engine, shapes & labels, pages, undo, PDF export
├── preview.png         # Screenshot for README
└── README.md

Getting Started

Prerequisites

  • Any modern web browser (Chrome, Firefox, Safari, Edge)

Installation

git clone https://github.com/alfredang/whiteboard.git
cd whiteboard

Usage

Open 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/

Keyboard Shortcuts

Shortcut Action
B Pen
E Eraser
L Lasso delete
I Line
O Circle
R Process box
G Rounded box
D Decision diamond
A Connector arrow
T Toggle light / dark canvas
Ctrl/Cmd + Z Undo
PgUp / Ctrl + ← Previous page
PgDn / Ctrl + → Next page

Tip: After drawing a box, rounded box, or diamond, a text field appears inside it — type your label and press Enter (Shift+Enter for a new line, Esc to leave it blank).

Deployment

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:

  1. Fork this repository
  2. Go to Settings > Pages
  3. Set source to Deploy from a branch → main → / (root)
  4. Your site will be live at https://<your-username>.github.io/whiteboard/

Contributing

Contributions are welcome!

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

For questions or suggestions, use GitHub Discussions.

Developed By

Tertiary Infotech Academy Pte Ltd

Acknowledgements

License

MIT

If you found this useful, please consider giving it a star!