DEV Community

Cover image for All the tools you need, right in your browser.
Rishav Deshwal
Rishav Deshwal

Posted on

All the tools you need, right in your browser.

How I Built a Free iLovePDF Alternative That Never Uploads Your Files

As developers, we handle sensitive documents all the time—invoices, API documentation, and confidential contracts. Yet, when we need to quickly merge, split, or compress a PDF, we usually resort to uploading our sensitive data to third-party cloud servers like iLovePDF or Adobe.

As a Cyber Security student, that always felt wrong to me. I wanted a tool that was lightning fast, completely free, and most importantly: processed everything entirely in the browser.

So, I built FluxTools, a suite of 60+ developer utilities and document analyzers that never touch a backend server. Here is how I built the PDF processing engine using React, Vite, and pdf-lib.

The Architecture: Moving the Backend to the Frontend

Traditionally, PDF manipulation requires heavy backend processing using tools like Ghostscript or Poppler. But modern browsers are incredibly powerful.

By leveraging WebAssembly (WASM) and the pdf-lib JavaScript library, I was able to move the entire processing pipeline to the client side.

Here is a simplified snippet of how FluxTools merges multiple PDFs directly in your browser's memory without a single network request:


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

async function mergePDFsLocally(fileArray) {
  // 1. Create a new, blank PDF in the browser memory
  const mergedPdf = await PDFDocument.create();

  // 2. Loop through the user's local files
  for (const file of fileArray) {
    const fileBytes = await file.arrayBuffer();
    const pdf = await PDFDocument.load(fileBytes);
    const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());

    // 3. Append pages to our new document
    copiedPages.forEach((page) => {
      mergedPdf.addPage(page);
    });
  }

  // 4. Save and trigger a local download!
  const mergedPdfBytes = await mergedPdf.save();
  return mergedPdfBytes; 
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)