LeedPDF - Draw on PDFs | Free PDF Annotation Tool
Add drawings and notes to any PDF with LeedPDF. Free, browser-based PDF annotation tool that works on any device. No uploads required - your files stay private.
leed.my
When I started building LeedPDF, my goal was simple: make working with PDFs feel less clunky and more natural. A tool where highlighting and sketching felt smooth, not like wrestling with old-school document viewers.
Choosing the right framework mattered a lot because PDF rendering is already heavy. I didn’t want the framework itself to get in the way. After trying a few options, I settled on SvelteKit. Here’s why it made sense for this project.
Performance with PDF Rendering
Working with PDFs means rendering multiple canvases, text layers, and annotations at once. Even a small amount of overhead adds up fast.
Svelte compiles components to plain JavaScript, which means smaller bundles and quicker hydration compared to frameworks that carry larger runtimes. That extra efficiency matters when you’re stacking it on top of PDF.js, which is already resource hungry.
In practice, this kept LeedPDF responsive even on low-end machines.
State Management Without Extra Libraries
A PDF annotation app has constant state updates:
- Which tool is active (pen, highlight, text)
- Which page you’re on
- Which annotations belong to which page
Instead of wiring up a whole state library, Svelte’s built-in stores and reactive syntax were enough. Stores let me share state across components without ceremony, and reactivity worked without boilerplate.
This let me focus on annotation logic rather than Redux-style plumbing.
SSR and Client Rendering Together
Parts of the project benefit from server-side rendering (landing pages, previews) while others are purely client-side (the actual annotation workspace).
SvelteKit made it easy to mix both. I could render the marketing pages on the server for speed and SEO, while keeping the core app fully interactive in the browser.
Routing That Fits the App
LeedPDF has separate modes: view, annotate, settings. I wanted clear routes but not extra config files to maintain.
SvelteKit’s file-based routing worked well. I could set up routes like /view/[id] or /annotate/[id] quickly, and layouts helped me avoid repeating UI elements.
Integrating with PDF.js
The real backbone of the app is Mozilla’s PDF.js. Wrapping it into reusable components can get messy in some frameworks because of lifecycle quirks.
With Svelte, I could map PDF.js rendering outputs (canvas, text layers) directly into reactive components. This kept the integration clean and easier to maintain.
Developer Experience
Since LeedPDF started as a Friday hack project, speed of iteration mattered. SvelteKit, powered by Vite, gave me quick reloads and a straightforward project setup.
That low friction meant I could spend weekends adding features instead of debugging configs.
Closing Thoughts
I didn’t pick SvelteKit because it was trendy. It turned out to be the right fit because it handled the performance demands, reduced boilerplate, and played nicely with the specific needs of a PDF annotation tool.
If you’re curious about the implementation, the full source code is here 👇
rudi-q
/
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 - Free PDF Annotation Tool
Add drawings and notes to any PDF.
Works with mouse, touch, or stylus - completely free and private.
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
🔍 PDF Search & Discovery
- Web-wide PDF search powered by Brave Search API
- Direct PDF opening from search results
- Smart filtering for PDF documents only
- Pagination through search results
- Real-time search with instant results
- Setup guide: See docs/SEARCH_FEATURE.md for configuration
🎨 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 -…
Feel free to explore (and maybe leave a star ⭐).
For anyone who just wants to try it out, the live web version is here: leed.my
.
LeedPDF is open source under AGPL, and the web version will always be free.
Top comments (1)
this is really insightful, thanks for sharing!