Split PDF Pages in the Browser with pdf-lib — No Uploads, No Server
A few weeks ago I built a free online Merge PDF tool that runs 100% in the browser. Today I’m sharing its sibling: a Split PDF tool using the same library — pdf-lib — with zero file uploads, zero watermark, and zero server code. You can try it live here: https://yourutilityhub.com/pdf/split-pdf Why split PDFs in the browser? Most online PDF tools upload your file to a server — which means your document is never truly private. Splitting pages locally means: No uploads — nothing leaves your device No watermark or signup Free — no per-page charges Works offline, fast, for files of any size (limited by your browser’s memory) The plan We’ll load the PDF, pick a page range (or specific pages), copy those pages into a fresh PDFDocument, and save the result — all with pdf-lib. Let’s walk through the full working component. 1. Install and import npm install pdf-lib import { PDFDocument } from “pdf-lib”; 2. Load the uploaded file const arrayBuffer = await file.arrayBuffer(); const pdf = await PDFDocument.load(arrayBuffer); const totalPages = pdf.getPageCount(); PDFDocument.load() accepts an ArrayBuffer. We read it straight from the File object — no server involved. 3. Split by page range (e.g. 1-5 or 3-) const parts = pageRange.split(”-”); const startRaw = parseInt(parts[0].trim(), 10); const endRaw = parts[1].trim() === "" ? totalPages : parseInt(parts[1].trim(), 10); // validate 1..totalPages const startPage = Math.min(startRaw, endRaw) - 1; // 0-based const endPage = Math.max(startRaw, endRaw) - 1; const newPdf = await PDFDocument.create(); const pageIndices = []; for (let i = startPage; i <= endPage; i++) { pageIndices.push(i); } const copiedPages = await newPdf.copyPages(pdf, pageIndices); copiedPages.forEach(page => newPdf.addPage(page)); The trick: copyPages() wants 0-based indices, but users type 1-based page numbers, so we subtract 1. “3-” with an empty end means “to the last page.” 4. Or extract specific pages (e.g. 1,3,5) const pages = extractPages .split(”,”) .map(s => parseInt(s.trim())) .filter(n => !isNaN(n) && n > 0 && n <= totalPages); const newPdf = await PDFDocument.create(); const copiedPages = await newPdf.copyPages(pdf, pages.map(p => p - 1)); copiedPages.forEach(page => newPdf.addPage(page)); We parse comma-separated numbers, filter out anything out of range, then map to 0-based before copying. 5. Save, download, and clean up const pdfBytes = await newPdf.save(); const blob = new Blob([pdfBytes], { type: “application/pdf” }); const url = URL.createObjectURL(blob); const link = document.createElement(“a”); link.href = url; link.download = “split_” + file.name; link.click(); Blob + URL.createObjectURL() lets the user download the split file without the bytes ever touching a server. Full component The complete, production-ready React component (mode toggle, validation, error handling, and download) is live here: https://yourutilityhub.com/pdf/split-pdf The full source is also on GitHub: https://github.com/Jalal-khn/utilityhub- Caveats worth knowing copyPages reuses the existing page content — it does not re-parse fonts/images per page, so quality is preserved. Very large PDFs are limited by browser memory. For giant files, consider a server-side approach instead. The extracted pages keep their original dimensions and orientation. Why combine this with Merge PDF? Many users need both halves of the same workflow — split a big PDF apart, then merge specific pages back into one. Pairing them means users never have to send their documents to a third-party server for either task. Try it free: https://yourutilityhub.com/pdf/split-pdf