Building a Client-Side PDF Compressor with pdfjs-dist and pdf-lib

We needed a PDF compressor for Ultimate Tools that would run entirely in the browser — no server uploads, no file size limits, no privacy concerns. Here's how we built it using two complementary libraries: pdfjs-dist for rendering and pdf-lib for assembly. The Core Idea The compression strategy is straightforward: Render each PDF page to a Canvas at a controlled resolution Export the Canvas as a JPEG with a quality parameter Embed those JPEGs into a brand-new PDF This approach replaces vector graphics, embedded fonts, metadata, and uncompressed images with compressed raster images. The trade-off is that text becomes non-selectable in the output — acceptable for most use cases like emailing, printing, or archiving. Setting Up pdfjs-dist pdfjs-dist is Mozilla's PDF rendering library. It needs a web worker for parsing, which we load from a CDN: import type * as PdfjsLibType from " pdfjs-dist " ; const pdfjsRef = useRef < typeof PdfjsLibType | null > ( null ); useEffect (() => { import ( "