How I Wrote a Client-Side Annotate PDF tool Without a Backend and Messed It Up in Pursuit of Improvements

#pdf #browser #webdev #programming

Hey DEV community! 👋

I want to share a story about how my simple IT bootcamp project unexpectedly gained organic traction on Google, and why sometimes "simplicity" wins over complex architecture. The project is Annotate PDF — a minimalist tool for working with documents directly in the browser.

💡 The Idea: Why build another PDF editor?

Let's be honest: working with PDFs is often annoying. Someone sends you a contract, an invoice, or a textbook. To just highlight some text, redact a passport number, or add a signature, you either have to download heavy software like Adobe Acrobat or rely on "free" online tools.

But we all know how those online services work: you spend 10 minutes carefully editing your file, click "Download," and suddenly get hit with a popup saying "Pay $9.99 to export" or your document gets stamped with a massive watermark.

For my bootcamp project, I decided to build an honest, 100% free alternative for regular users like me.

🛠 The Tech Stack: Nothing extra

I didn't reinvent the wheel. Under the hood, it's pretty straightforward:

Framework: Next.js
Styling: Tailwind CSS
Export & Generation: pdf-lib
Canvas & Drawing: fabric.js

Integrating fabric.js made it easy to create a layer on top of the document where users can draw shapes, type text, add freehand signatures, and highlight text seamlessly.

🔒 The Killer Feature: No Backend (Privacy by Design)

Initially, I just didn't want to deal with setting up a server, a database, and file storage. But this constraint turned out to be the project's biggest advantage!

The application is completely client-side. When a user uploads a file (like an NDA, a financial report, or an ID scan), it is never sent over the network.

The document is parsed locally in your browser.
You make your edits (add text, black out sensitive data).
When you hit save, pdf-lib generates the new PDF directly in the browser's RAM and triggers a download.

No servers. No data leaks. 100% privacy out of the box.

📉 My Lesson in SEO

Over time, the project started getting organic traffic from Google. I guess the algorithms (and the users) appreciated that the service is actually free and solves a problem in just a couple of clicks.

At one point, I decided it was time to make the project "grown-up" and tried to roll out a much more serious, complex version. It was a complete failure. Search engines heavily penalized the site — it turns out Google really doesn't like it when a domain's content and structure change drastically all at once.

In the end, I realized an important lesson: sometimes people just need a tool that works. I rolled everything back to the basic version, just slightly polishing the UI.

🚀 Final Thoughts

I perfectly understand that today, AI could write similar code in a couple of hours. But Annotate PDF lives on and brings value precisely because it has zero friction: drop a file -> sign/redact -> download. No registrations, no hidden fees.

If you ever need to quickly edit a PDF without the risk of leaking your data to a third-party server, feel free to bookmark it: annotatepdf.io.

I’d love to hear your feedback or answer any questions in the comments! What libraries do you prefer for handling PDFs?