DEV Community

TateLyman
TateLyman

Posted on

Every PDF Tool You Need, Running 100% in Your Browser

I got sick of PDF tools that require accounts, plaster watermarks on everything, or silently upload your files to some server in who-knows-where. So I built a full suite of PDF tools that run entirely client-side. No uploads. No accounts. No watermarks. Your files never leave your browser tab.

Here's what's in the toolkit and how each one works.

Merge PDFs

The most common thing people need. Drop in multiple PDFs, reorder them if you want, hit merge, get one file back.

Under the hood this uses pdf-lib to copy pages from each source document into a new one:

import { PDFDocument } from 'pdf-lib';

async function mergePDFs(files) {
  const merged = await PDFDocument.create();

  for (const file of files) {
    const bytes = await file.arrayBuffer();
    const doc = await PDFDocument.load(bytes);
    const pages = await merged.copyPages(doc, doc.getPageIndices());
    pages.forEach(page => merged.addPage(page));
  }

  return await merged.save();
}
Enter fullscreen mode Exit fullscreen mode

The copyPages method is the key — it brings over not just the page content but also fonts, images, and annotations embedded in those pages. The output is a proper PDF, not some stitched-together hack.

I use this weekly to combine invoices into single files for accounting. Handles 50+ files without breaking a sweat.

Try it: devtools-site-delta.vercel.app/merge-pdf

Split PDF

The reverse operation. Got a 200-page PDF and only need pages 15-30? Or want to extract every page as its own file?

You pick the page ranges and it pulls them out:

async function splitPDF(file, ranges) {
  const bytes = await file.arrayBuffer();
  const source = await PDFDocument.load(bytes);
  const results = [];

  for (const range of ranges) {
    const newDoc = await PDFDocument.create();
    const indices = [];
    for (let i = range.start - 1; i < range.end; i++) {
      indices.push(i);
    }
    const pages = await newDoc.copyPages(source, indices);
    pages.forEach(page => newDoc.addPage(page));
    results.push(await newDoc.save());
  }

  return results;
}
Enter fullscreen mode Exit fullscreen mode

It supports overlapping ranges too, so you can pull pages 1-10 and pages 5-15 as separate files in one go.

Try it: devtools-site-delta.vercel.app/split-pdf

Compress PDF

PDF compression in the browser is tricky. You can't do the same aggressive recompression that server-side tools like Ghostscript pull off. But there's still a lot of low-hanging fruit.

The approach: load the PDF, re-save it with pdf-lib's built-in optimization. This strips out redundant objects, deduplicates resources, and cleans up the cross-reference table. For PDFs exported from tools like Word or Google Docs that leave a lot of garbage in the file, this alone can cut size by 20-40%.

For image-heavy PDFs, the tool optionally renders pages to Canvas and rebuilds the PDF with compressed JPEG images. Lossy, sure, but when you're trying to get a 50MB scan under an email attachment limit, it does the job.

Try it: devtools-site-delta.vercel.app/compress-pdf

PDF to Images

Need to turn PDF pages into PNGs? This one uses pdf.js (Mozilla's PDF renderer) to render each page onto a Canvas, then exports as PNG or JPEG:

import * as pdfjsLib from 'pdfjs-dist';

async function pdfToImages(file, format = 'png', scale = 2) {
  const bytes = await file.arrayBuffer();
  const pdf = await pdfjsLib.getDocument({ data: bytes }).promise;
  const images = [];

  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i);
    const viewport = page.getViewport({ scale });

    const canvas = document.createElement('canvas');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    await page.render({
      canvasContext: canvas.getContext('2d'),
      viewport
    }).promise;

    const blob = await new Promise(resolve =>
      canvas.toBlob(resolve, `image/${format}`, 0.92)
    );
    images.push(blob);
  }

  return images;
}
Enter fullscreen mode Exit fullscreen mode

The scale parameter controls output resolution. Scale 1 gives you roughly 72 DPI (matches PDF points), scale 2 gives 144 DPI which is good for most uses, and scale 3 is high-res if you need print quality.

Try it: devtools-site-delta.vercel.app/pdf-to-image

Image to PDF

The reverse — throw a bunch of images in and get a PDF. Supports PNG, JPEG, WebP, and basically any format your browser can render. You pick the page size (A4, Letter, or auto-fit), set margins, and it handles the layout.

WebP doesn't work natively with pdf-lib, so the tool uses Canvas as a transcoding step — render the WebP to Canvas, export as PNG, then embed. The user never notices.

This one is great for converting photo sets into shareable documents, or turning a stack of scanned pages into a single file.

Try it: devtools-site-delta.vercel.app/image-to-pdf

Why 100% Client-Side Matters

Let me be blunt about this: most online PDF tools upload your files to their servers. Read their privacy policies (if they even have one). Your contracts, tax documents, medical records, and personal photos are sitting on someone else's infrastructure.

With client-side tools, the processing happens in your browser's JavaScript engine. The files exist as ArrayBuffer objects in memory. When you close the tab, they're gone. There's no network request carrying your data anywhere.

You can verify this yourself — open DevTools, go to the Network tab, and watch. Nothing gets sent out.

Performance Notes

Browser-based PDF processing is surprisingly fast. Merging 20 PDFs takes about 2 seconds on a modern machine. Splitting is nearly instant. PDF-to-image rendering depends on page complexity, but most documents convert in under a second per page.

The main limitation is memory. Browsers typically cap tab memory at 1-4 GB. For most workflows (documents under 100 pages, images under 10 MB each), you won't hit that ceiling. If you're trying to merge 500 high-res scanned documents, yeah, you might want a desktop tool.

For the other 99% of cases, these work great.

All the PDF Tools

Here's the full list in one place:

All free, no accounts, no watermarks. They're part of a larger collection of 200+ developer tools I maintain at devtools-site-delta.vercel.app. Everything runs in the browser.

If you find a bug or want a feature, I'm around.

Top comments (0)