DEV Community

Cover image for Building a Serverless PDF Merger & Editor using React and pdf-lib (No Backend!)
opzozi
opzozi

Posted on

Building a Serverless PDF Merger & Editor using React and pdf-lib (No Backend!)

I merge PDFs about twice a week. Not enough to pay for an Adobe subscription, but enough to be annoyed by online tools.

You know the drill:

Google "merge pdf free".

Upload your private bank statement to a random server.

Get hit with a "Daily Limit Reached" popup just when you need to download the result.

I got tired of this. I realized that modern browsers and WebAssembly are fast enough to handle PDF manipulation client-side. We don't actually need a backend for this anymore.

So, I built Simple VaultPDF.

The Tech Stack
I wanted to keep it lightweight and 100% offline.

Framework: React (Vite)

PDF Engine: pdf-lib (for merging/splitting) & pdf.js (for rendering)

OCR: tesseract.js

State: Just React hooks, kept it simple.

The Code (How it works)
The coolest part is that pdf-lib lets you manipulate binary data directly in the browser memory. Here is the core function that merges files without sending a single byte to a server:

JavaScript

import { PDFDocument } from 'pdf-lib';

const mergeFiles = async (files) => {
  const mergedPdf = await PDFDocument.create();

  for (const file of files) {
    const fileBuffer = await file.arrayBuffer();

    const pdf = await PDFDocument.load(fileBuffer);

    const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());

    copiedPages.forEach((page) => mergedPdf.addPage(page));
  }

  const pdfBytes = await mergedPdf.save();
  return pdfBytes;
};
Enter fullscreen mode Exit fullscreen mode

Why Local-First?
Building it as a Chrome Extension instead of a website had huge benefits:

Zero Server Costs: Since I don't process the files, I don't pay for AWS/Cloud functions.

Privacy: Users don't have to trust me with their data, because the data never leaves their machine.

Speed: No upload/download latency.

The Result
It's currently an MVP. It handles merging, reordering, and rotation perfectly. I also added basic OCR because why not.

I just published it to the Chrome Web Store. If you are tired of paywalls or just want to see how pdf-lib performs in a real extension, give it a try.

Link: Simple VaultPDF on Chrome Web Store

Let me know if you find any bugs! I'm still optimizing the memory usage for large files.

Happy coding!

Top comments (3)

Collapse
 
sanjay_kumar_584 profile image
sanjay kumar

Really great work done opzozi. I have learnt how simple is to create our own PDF mergers

Collapse
 
opzozi profile image
opzozi

Thanks Sanjay! I'm glad you found it useful. Keeping things simple and offline was my main goal with this project. Let me know if you decide to build something similar!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.