Serverless PDF Toolset: Merge & Edit PDFs Client-Side in Browser

Project Specifications & Benefits

• $0 Hosting Costs: Deploys to Vercel Hobby plan for free with no credit card registration.
• 100% Client-Side Processing: No files are uploaded to any third-party servers. Data is processed strictly in your local browser sandbox.
• No Document Size Caps: Handles gigabyte-sized PDF files effortlessly based only on your device RAM.
• Modern PDF Utilities: Instantly merge, split, or apply custom text watermarks to any document.

How It Works: Browser-Based PDF Manipulation

Instead of converting documents on a remote backend server, our serverless toolset uses pdf-lib to modify the document’s binary structures directly inside the browser using `ArrayBuffers`. The files are loaded, decrypted, edited, and downloaded locally, preserving absolute data privacy:

Pipeline Architecture: Uploaded PDFs are parsed, modified in local browser RAM, and downloaded directly.

Client-Side JavaScript Editor Logic

The logic handles document reading, merging copied pages, and drawing text diagonal watermarks using canvas coordinates. Here is the implementation:

// Merge Multiple PDFs

async function processMerge() {

 const { PDFDocument } = PDFLib;

 const mergedPdf = await PDFDocument.create();



 for (let file of mergeFiles) {

 const bytes = await file.arrayBuffer();

 const pdf = await PDFDocument.load(bytes);

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

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

 }

 const mergedPdfBytes = await mergedPdf.save();

 downloadFile(mergedPdfBytes, "merged_document.pdf");

}



// Add Watermark Diagonally

async function processWatermark() {

 const { PDFDocument, rgb, StandardFonts, degrees } = PDFLib;

 const bytes = await watermarkFile.arrayBuffer();

 const pdf = await PDFDocument.load(bytes);

 const font = await pdf.embedFont(StandardFonts.HelveticaBold);



 const pages = pdf.getPages();

 for (let page of pages) {

 const { width, height } = page.getSize();

 page.drawText(text, {

 x: width / 2 - (text.length * (size / 4)),

 y: height / 2,

 size: size,

 font: font,

 color: rgb(0.7, 0.7, 0.7),

 opacity: opacity,

 rotate: degrees(45)

 });

 }

 const watermarkedPdfBytes = await pdf.save();

 downloadFile(watermarkedPdfBytes, "watermarked.pdf");

}

Deploying Your PDF Toolset to Vercel

Follow these steps to deploy your own private web-based PDF toolset to Vercel for free:

Step 1: Get the Project Files

Run the automated installer script above or create a folder with index.html (containing the web UI code) and vercel.json:

{

 "rewrites": [

 { "source": "/(.*)", "destination": "/index.html" }

 ]

}

Step 2: Link & Import to Vercel

Link your project to get your live editor:

1. Create a free account on Vercel.com.
2. Push your project folder to your GitHub account as a new repository.
3. In your Vercel Dashboard, click Add New > Project, select your repository, and click Deploy.
4. Your PDF editor is instantly live at a free `vercel.app` subdomain!

Terminal Output: Verification and packaging of the serverless PDF toolset assets.

PDF Toolset Web Interface Overview

The responsive dark-mode dashboard provides a clean layout. Switching between tabs allows you to load files, configure watermarks, specify split page indices, and trigger downloads instantly:

PDF Toolset Dashboard: Select your operations, drag files, and run tasks with no server-side limits.

Frequently Asked Questions (FAQs)