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

opzozi — Mon, 22 Dec 2025 21:33:08 +0000

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;
};

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!

I hate WebP files. So I built a Chrome extension to kill them.

opzozi — Tue, 16 Dec 2025 11:26:10 +0000

Okay, look. I know WebP is technically superior. Smaller file sizes, better compression, Google loves it. Great for the web performance.

But for me? It's a nightmare.

Every time I try to save an image for a presentation or just to share a meme, it saves as .webp. Then I try to open it in an older version of Photoshop? Error. Try to upload it to a CMS? "Invalid file format." Try to send it to a non-tech friend? "I can't open this."

I got tired of googling "online webp to png converter," uploading my files to random shady servers, and hoping for the best.

So, I decided to fix it myself.

The "Rage-Code" Solution

I built a tiny Chrome extension called Simple Image Converter.

It does exactly one thing: adds a "Save Image as PNG" button to your right-click menu.

No "cloud processing." It just grabs the image, converts it locally, and hands you a PNG.

(Update: I also added a "Copy Image as PNG" option to the clipboard, because saving files is sometimes too much effort for a quick Discord paste.)

The Tech Bit (Manifest V3 + Offscreen API)

If you've tried building Chrome extensions lately, you know Manifest V3 can be... let's say, interesting.

Since we can't use background pages with DOM access anymore, I couldn't just throw the image onto a canvas in the background script like in the good old days.

I had to use the chrome.offscreen API. Basically, the extension spins up a hidden HTML document for a split second, draws the WebP image onto a canvas there, converts it to a PNG blob, and sends it back to the download manager.

It sounds complicated, but it keeps everything:

Offline: Your images never leave your machine.
Fast: No server latency.
Private: I don't want your data.

It's Open Source

I just want this problem to go away for everyone else too.

If you also have a burning hatred for WebP files (or just want to see how the Offscreen API works in practice), check it out.

GitHub Repo:
https://github.com/opzozi/simple-image-converter

Chrome Web Store:
https://chromewebstore.google.com/detail/simple-image-converter/clinbfiephmemllcffpddoabnknkaeki

Let me know if it breaks (or if you have a better way to handle the Offscreen API, I'm all ears).

Cheers,
Opzozi

DEV Community: opzozi

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

I hate WebP files. So I built a Chrome extension to kill them.

The "Rage-Code" Solution

The Tech Bit (Manifest V3 + Offscreen API)

It's Open Source