close

DEV Community

armor229-ux
armor229-ux

Posted on

How I Built a Privacy-First PDF Toolkit That Runs Entirely in the Browser

Most "free" PDF tools online have a dirty secret: they upload your files to their servers. Some keep them. Some scan them. Some sell the data.

I wanted to build something different — a PDF toolkit where files never leave the user's browser.

The result is FileFlex — a free, browser-based file toolkit.

The Problem with Existing Tools

Open any popular online PDF tool and watch the Network tab in DevTools. You'll see your file getting uploaded to their servers within seconds. Then you wait. Then you download.

Why? Two reasons:

  1. They use server-side libraries (faster, but requires upload)
  2. They want to track your usage and show you ads

I wanted to flip this model.

The Stack

  • Next.js 14 (App Router)
  • TypeScript for type safety
  • Tailwind CSS for styling
  • pdf-lib for PDF operations
  • browser-image-compression for images
  • Web Crypto API for password protection
  • Vercel for hosting

The Magic: Browser-Based PDF Merge

The hardest part was getting PDF merge to work without a backend. Here's the core logic:

\`javascript
import { PDFDocument } from 'pdf-lib';

async function mergePDFs(files) {
const mergedPdf = await PDFDocument.create();

for (const file of files) {
const pdfBytes = await file.arrayBuffer();
const pdf = await PDFDocument.load(pdfBytes);
const pages = await mergedPdf.copyPages(
pdf,
pdf.getPageIndices()
);
pages.forEach((page) => mergedPdf.addPage(page));
}

const mergedBytes = await mergedPdf.save();
return new Blob([mergedBytes], { type: 'application/pdf' });
}
`\

That's it. No server. No upload. Just JavaScript in the browser.

What FileFlex Does

  • ✅ Merge PDFs
  • ✅ Compress PDFs (up to 80% smaller)
  • ✅ Password-protect PDFs
  • ✅ Compress images (JPEG/PNG/WebP)
  • ✅ Generate strong passwords

Why This Approach Wins

  1. Privacy: Your files never leave your device
  2. Speed: No upload/download wait
  3. No limits: No file size restrictions (browser memory aside)
  4. Free forever: No server costs = no need to charge

Try It

Live demo: https://file-flex-psi.vercel.app

It's free, no signup required.

Lessons Learned

  1. Browser APIs are surprisingly powerful — you can do way more than you'd think without a backend
  2. Privacy is a feature — users genuinely care
  3. Removing signup walls boosts usage — friction kills conversion

What's Next

I'm working on:

  • Split PDF feature
  • PDF to JPG conversion
  • HEIC to JPG converter
  • More languages

What other browser-only tools would you want? Let me know in the comments! 👇


If you liked this, follow me for more web dev posts. The full source approach is documented on the blog.

Top comments (0)