Leed_pdf_viewer
An open-source, privacy-first PDF annotation tool that turns any PDF into an infinite drawing canvas. Draw, sketch, and annotate with natural pen-like precision - all in your browser
LeedPDF ✏️
A modern, open-source PDF annotation tool that runs entirely in your browser
Transform any PDF into an interactive canvas. Draw, annotate, and collaborate without uploading your documents to external servers.
Try it now → | Report Issues | Contribute
✨ Features
🎨 Drawing & Annotation
- Freehand drawing with customizable pencil and highlighter tools
- Shape tools including rectangles, circles, arrows, and stars
- Text annotations with inline editing
- Sticky notes for quick comments
- Smart eraser that removes intersecting elements
📱 Universal Access
- Works on any device - desktop, tablet, or phone
- Touch-optimized with Apple Pencil support
- No installation required - runs in your browser
- Offline capable after first visit (PWA)
🔒 Privacy First
- 100% client-side - your PDFs never leave your device
- No account required - start annotating immediately
- Local auto-save - your work is preserved automatically
⚡ Performance
- Instant loading from URLs (including Dropbox links)
- High-DPI rendering for crisp display on all screens
- Infinite canvas - pan and zoom without limits
- Full undo/redo with keyboard shortcuts
🚀 Quick Start
Option 1: Use Online
Visit leed.my and start annotating immediately.
Option 2: Load from URL
Share annotated PDFs by adding ?pdf= to any URL:
https://leed.my?pdf=https://example.com/document.pdf
Option 3: Run Locally
git clone https://github.com/rudi-q/leed_pdf_viewer.git
cd leed_pdf_viewer
pnpm install
pnpm build && pnpm preview
Open http://localhost:5173 in your browser.
🛠️ Tech Stack
- Framework: SvelteKit + TypeScript
- PDF Rendering: PDF.js
- Drawing Engine: HTML5 Canvas + Konva.js
- Styling: Tailwind CSS
- Build: Vite
- PWA: @vite-pwa/sveltekit
📖 Usage
Basic Controls
- Upload: Drag & drop a PDF or click the folder icon
- Draw: Select pencil tool and start drawing
- Navigate: Use arrow keys or toolbar buttons
- Zoom: Ctrl + scroll wheel or toolbar buttons
- Pan: Ctrl + drag (or just drag outside PDF area)
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Tools | 1-9 (pencil, eraser, text, etc.) |
| Navigation | ←/→ for pages, W/H for fit |
| Zoom | Ctrl +/-, Ctrl 0 to reset |
| Actions | Ctrl Z/Y for undo/redo |
| Upload | U to choose file |
| Help | ? or F1 |
🎯 Perfect For
- Students reviewing lecture slides and textbooks
- Professionals annotating contracts and reports
- Researchers marking up papers and documentation
- Teams collaborating on design mockups
- Anyone who needs to mark up PDFs quickly
🔧 Development
Prerequisites
- Node.js 18+
- npm/pnpm/yarn
Setup
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Preview production build
pnpm preview
Project Structure
src/
├── lib/
│ ├── components/ # Svelte components
│ ├── stores/ # State management
│ └── utils/ # PDF and drawing utilities
├── routes/ # SvelteKit routes
└── app.html # App template
🤝 Contributing
We welcome contributions! Here's how to get started:
- Fork the repository
- Create a feature branch:
git checkout -b feature/awesome-feature - Commit your changes:
git commit -m 'Add awesome feature' - Push to the branch:
git push origin feature/awesome-feature - Open a Pull Request
Development Guidelines
- Follow the existing code style (ESLint + Prettier configured)
- Test your changes across different devices/browsers
- Update documentation for new features
- Keep commits atomic and well-described
📄 License
MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- PDF.js - Mozilla's excellent PDF rendering engine
- SvelteKit - The framework that makes this possible
- Konva.js - Powerful 2D canvas library
- Vite - Lightning-fast build tool
- Tauri - For building lightweight desktop apps
- Tailwind CSS - Utility-first CSS framework
Built with ❤️ for the open web
Privacy-focused • Lightweight • No tracking • No accounts • No servers
