How to Build a Browser-Based PDF Rotator Using JavaScript

How to Build a Browser-Based PDF Rotator Using JavaScript

Bhavin Sheth

Sometimes PDF pages appear upside down, sideways, or in the wrong orientation after scanning or exporting documents. Instead of re-creating the document manually, users usually just need a quick way to rotate pages and save the corrected version. Modern browsers make this possible directly with JavaScript. In this tutorial, you’ll build a browser-based PDF rotator using JavaScript. The tool will allow users to upload PDF files, preview pages, rotate selected pages, change orientation, generate an updated PDF, preview the final result, rename the file, and download everything directly from the browser. Everything works entirely client-side without a backend server.

Table of Contents

How PDF Rotation Works

Project Setup

What Library Are We Using?

Creating the Upload Interface

Previewing Uploaded PDF Pages

Selecting Pages to Rotate

Applying Rotation Options

Generating the Rotated PDF

Previewing and Downloading the Final PDF

Why PDF Rotation Is Useful in Real-World Documents

Demo: How the PDF Rotator Tool Works

Important Notes from Real-World Use

Common Mistakes to Avoid

Conclusion

How PDF Rotation Works PDF rotation works by updating the orientation data of PDF pages. Instead of modifying the actual content manually, JavaScript libraries can rotate pages programmatically and export an updated version of the document. The browser loads the PDF file, reads page information, applies rotation values like 90°, 180°, or landscape orientation, and then generates a new downloadable PDF. Everything happens directly inside the browser. This keeps the process fast, private, and easy to use without uploading files to external servers. Project Setup This project is intentionally simple. You only need an HTML file, a JavaScript file, and a PDF processing library. Everything runs entirely inside the browser using JavaScript. No backend server or database is required. What Library Are We Using? We’ll use the PDF-lib library for editing PDF files directly in the browser. Add it using a CDN:

This library allows us to:

load PDF documents

rotate pages

modify orientation

export updated PDFs

Creating the Upload Interface Start with a basic upload input:

Rotate PDF

This allows users to upload PDF files directly from the browser. Here’s what the upload section looks like inside the tool:

Previewing Uploaded PDF Pages After uploading a PDF file, users can preview pages directly inside the browser before applying rotations. The preview section also includes rotation controls so users can rotate pages individually as needed before generating the final PDF. To render previews, we first load the uploaded PDF document: const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);

const totalPages = pdfDoc.getPageCount();

Next, we render page previews dynamically: for (let i = 0; i { rotatePage(currentPage, -90); });

rotateRightBtn.addEventListener("click", () => { rotatePage(currentPage, 90); });

This makes it easier to verify page orientation before generating the updated PDF. Here’s what the page preview section looks like:

Selecting Pages to Rotate Not every document needs all pages rotated. Some users may only want to rotate even-numbered pages, odd-numbered pages, or specific pages within the document. The tool allows users to select which pages should receive the rotation changes before generating the final PDF. For example, users can choose the rotation scope like this: const selectedMode = document.querySelector( 'input[name="pageMode"]:checked' ).value;

Specific page ranges can also be supported: const customPages = document .getElementById("customPages") .value;

This gives users more control over which document pages are modified. Here’s how the page selection controls look inside the tool:

Applying Rotation Options Once the pages are selected, users can apply different rotation actions directly inside the browser. Pages can be rotated left by 90 degrees, rotated right by 90 degrees, flipped by 180 degrees, or converted into portrait or landscape orientation. Here’s a simple example using PDF-lib: const page = pdfDoc.getPage(pageIndex);

page.setRotation( PDFLib.degrees(90) );

To rotate pages left: page.setRotation( PDFLib.degrees(-90) );

You can also apply orientation presets dynamically: if (orientation === "landscape") { page.setRotation(PDFLib.degrees(90)); }

These controls allow users to fix scanned documents and incorrect page layouts directly inside the browser. Here’s what the rotation controls look like inside the tool:

Generating the Rotated PDF After the rotation settings are configured, users can generate the updated PDF directly inside the browser. The tool processes selected pages, applies rotation changes, and exports a new downloadable PDF file instantly. For example: const pdfBytes = await pdfDoc.save();

Next, create a downloadable file: const blob = new Blob( [pdfBytes], { type: "application/pdf" } );

const url = URL.createObjectURL(blob);

Finally, trigger the download: const link = document.createElement("a");

link.href = url; link.download = "rotated-document.pdf";

link.click();

This entire workflow runs locally inside the browser without requiring a backend server. Here’s what the generate button looks like inside the tool:

Previewing and Downloading the Final PDF Once processing is complete, the tool displays a live preview of the rotated document. Users can review updated pages before downloading the final file. The interface also shows additional document details such as total pages and file size. A rename option is available before downloading the generated PDF. For example, users can rename the file like this: const fileName = prompt( "Enter PDF name:", "rotated-document" );

The preview section also includes left and right navigation controls so users can browse through rotated pages directly inside the browser. Document details can also be displayed dynamically: fileSizeElement.textContent = formatFileSize(blob.size);

pageCountElement.textContent = pdfDoc.getPageCount();

This improves usability and helps users verify the final output before downloading. Here’s what the final output section looks like:

Why PDF Rotation Is Useful in Real-World Documents PDF rotation may seem like a small feature, but it solves a very common problem in everyday document handling. Many scanned documents, mobile scans, invoices, certificates, and office files are saved with incorrect orientation. Some pages appear sideways, upside down, or mixed between portrait and landscape layouts. Instead of reopening and rescanning those files, users can quickly fix page orientation directly inside the browser. For example, PDF rotation is commonly used for:

scanned agreements

invoices and bills

government forms

academic documents

construction drawings

landscape reports

mobile camera scans

This becomes especially useful when working with multi-page PDFs where only certain pages need correction. Some users may only want to rotate:

even-numbered pages

odd-numbered pages

specific pages

landscape pages only

That’s why page-based rotation controls are important in modern PDF tools. Browser-based PDF rotation also improves privacy because uploaded documents stay on the user’s device instead of being sent to external servers. Demo: How the PDF Rotator Tool Works Step 1: Upload the PDF Users first upload a PDF document directly into the browser-based tool. The upload section supports drag-and-drop along with manual file selection. Here’s what the upload interface looks like:

Step 2: Preview PDF Pages After uploading the document, the tool generates page previews automatically. The preview section also includes a rotation option so users can rotate document pages as per required. Here’s the preview section inside the tool:

Step 3: Configure Rotation Settings Users can now choose how the PDF pages should rotate. The tool supports:

rotate left

rotate right

flip 180 degrees

portrait orientation

landscape orientation

Users can also choose whether rotations apply to all pages or just certain pages. Here’s what the rotation settings panel looks like:

Step 4: Generate the Rotated PDF Once everything is configured, users click the generate button to apply the rotations. The browser processes the document locally and creates the updated PDF instantly. Here’s the generate button inside the tool:

Step 5: Preview the Final Output After processing is complete, the tool displays the rotated PDF preview directly inside the browser. Users can navigate page-by-page using the left and right controls to verify the final output. The interface also shows:

total pages

file size

output filename

Here’s the final preview section:

Step 6: Rename and Download the PDF Before downloading, users can rename the generated PDF file directly inside the browser. Once renamed, the updated document can be downloaded instantly. Here’s the rename and download section: Important Notes from Real-World Use When working with scanned PDFs, page orientation issues are very common. Some documents may contain mixed orientations where certain pages are portrait while others are landscape. Applying rotat