Design a PDF Viewer – Frontend System Design

We’ll walk through the frontend system design for a PDF viewer: a document with hundreds of pages that must scroll smoothly, let the user select and copy text, highlight passages, find a phrase, zoom, rotate, and print, without running out of memory. You’ll see why pixels, text, and annotations are three different layers, why the file is parsed in a worker, and why the viewport can only keep a handful of page canvases alive.

This is not “drop pdf.js on a canvas and call render”. A 12-page spec works that way. The interviewer says “assume 500 pages, an 80 MB file, find-in-document, and highlights that survive zoom”, and a canvas-per-page design dies on memory. Chrome uses PDFium natively; a web app typically uses pdf.js or PDFium-in-Wasm. Either way the engine is a worker and the main thread is a viewport.

Problem Statement

Design the frontend for a PDF viewer in the browser.

Requirements:

• Open a local file or an HTTPS URL, including files of 80 MB and 500+... premium content.