How I Built a 52-Tool Client-Side PDF Suite with WebAssembly, OPFS, and $0 Server Costs

Rizwan — Thu, 12 Nov 2026 08:41:20 +0000

Online PDF tools have an uncomfortable default: to merge two bank statements or shrink a 3 MB certificate to 180 KB, you are expected to upload private identity documents to someone else's cloud server.

I wanted to know how far modern browser APIs could push that entire workflow locally—with $0 in backend compute, zero S3 storage, and zero server uploads. That experiment grew into EverydayPDF, a static Next.js 14 application hosting 52 client-side PDF and document tools on Cloudflare Pages.

Here is the architecture behind running 52 PDF utilities strictly in browser memory, and the real-world bottlenecks I ran into along the way.

1. Static Export First: Forcing Zero-Backend Discipline

The app is configured in Next.js 14 App Router with output: 'export'. Every route compiles down to static HTML, CSS, and client-side JavaScript bundles in ./out. Because there is no Node.js API route or upload server behind the scenes, it is architecturally impossible for a tool to sneak a file off the user's machine.

The core stack relies on four client-side pillars:

pdf-lib & pdf-lib-encrypt for vector page-tree operations (merging, splitting, rotating, flattening AcroForms, adding page numbers, and AES-256 encryption).
Mozilla pdfjs-dist for parsing PDF streams and rendering thumbnails or high-DPI canvases.
Tesseract.js (WebAssembly) for client-side OCR so scanned PDFs get a real Ctrl+F searchable text layer locally.
HTML5 Canvas + jszip / xlsx for image calibration, table extraction, and document bundling.

2. Keeping the UI at 60 FPS with Transferable Web Workers

Parsing and copying hundreds of PDF page objects on the main UI thread freezes scroll and click interactions. To prevent jank, heavy binary tasks like merging and splitting run inside a dedicated background worker (workers/pdf.worker.ts).

Instead of structured-cloning large Uint8Array payloads back to the main thread (which doubles peak RAM usage), the worker transfers ownership of the underlying ArrayBuffer:

const mergedBytes = await mergedPdf.save();
const buffer = mergedBytes.buffer;

ctx.postMessage(
  {
    taskId,
    type: 'SUCCESS',
    result: buffer,
  },
  [buffer]
);

This zero-copy handoff keeps memory spikes tight even on mid-range laptops and mobile browsers.

3. Handling Large Files via OPFS (Origin Private File System)

Standard File.arrayBuffer() calls work fine for 5 MB PDFs, but holding multiple 40 MB scanned documents simultaneously in JavaScript heap memory can crash mobile browser tabs.

When combined input sizes cross 30 MB in tools like Merge PDF, EverydayPDF falls back to the browser's Origin Private File System (OPFS) (navigator.storage.getDirectory()), staging large file streams in sandboxed local browser storage and reading buffers sequentially rather than pinning every file in heap RAM at once.

4. Solving High-Intent Real-World Constraints

Building generic "Merge" and "Split" pages wasn't enough—users repeatedly hit hyperspecific formatting walls on government, academic, and banking portals:

Strict Byte Ceilings: Portals like UPSC, SSC, and GATE reject certificates above 200 KB, 100 KB, or 50 KB. Naive compression destroys roll numbers and seals. In Compress PDF Under 200KB, a multi-pass canvas loop adjusts DPI scaling and JPEG chroma quality per page budget until the output lands strictly below the target KB threshold.
Photo & Signature Calibration: The Photo & Signature Resizer handles exact pixel/centimeter targets (3.5 × 4.5 cm), 20–50 KB byte targets, paper-background whitening for phone-photographed signatures, and optional candidate name/date stamps.
Printable Imposition & Banking Privacy: Tools like Admit Card / ID Card 2-in-1 A4 tile front-and-back IDs with dashed cutting lines, while Unlock & Merge Bank Statements decrypts a year's worth of password-locked statements locally before users pass them to Auto-Redact PII.

5. Connecting Tools with In-App Workflow Chaining

One subtle UX lesson: PDF tasks rarely happen in isolation. Someone who finishes merging 6 documents almost always needs to compress the bundle under a portal limit, add page numbers, or lock it with a password.

Rather than forcing users back to the homepage, a central workflow graph (lib/workflow-chains.ts) maps every one of the 52 tool routes to 3 logical next-step actions displayed right after download completion—turning single-tool visits into smooth multi-step document workflows while keeping every byte inside the browser.