PDF Page Reorder

Reordering pages in a PDF is one of those operations that sounds trivial and isn't, depending on the tool. Adobe Acrobat Pro can do it; the free Adobe Reader can't. macOS Preview can do it for free, but only if you're on a Mac. Online services can do it but you have to upload your PDF to their servers. Most people end up converting the PDF to images, reordering the images, and reassembling — three round trips for a one-click operation.

This tool does it directly. Drop a PDF, drag the thumbnails into the order you want, click save. Everything runs in your browser; the original file never leaves your tab.

The implementation has two stages. **pdf.js** renders each page as a small thumbnail (about 300px wide) so you can see what you're looking at. The thumbnails are drawn to canvas, exported as JPEG blobs, and displayed in a CSS grid. **pdf-lib** does the actual reordering when you save — it loads the source PDF, calls `copyPages` to extract just the pages you want in the order you want, and serializes the result.

The crucial property of `copyPages` is that it copies the **complete page content**: text streams, vector graphics, embedded images, fonts, annotations, form fields, links, hyperlinks. The pages in the output PDF are functionally identical to the pages in the input PDF — just in a different order. You're not re-rendering or re-rasterizing; you're rearranging.

**The drag-and-drop UI** uses HTML5 native drag-and-drop. Each thumbnail is a draggable card. Drag a card; the others highlight as drop targets in turn. Drop on any position and the order updates. The numbered badges in the top-left of each thumbnail show the new positions (1, 2, 3, …); the 'Original page N' label at the bottom shows where each thumbnail came from. So at any moment you can see both the new order and the source-page mapping.

**Deletion** is a hover action. Mousing over a thumbnail reveals a trash icon in the top-right; click it and the page is removed from the working order. The 'Reset to original order' button restores everything — useful if you experimented and want to start over. Deletions don't affect the source file (which you still have on disk); they only affect the output.

**Common workflows this enables:**

- **Cleaning up a scan.** You scanned a 20-page document but the scanner reversed pages 8–14. Reorder them in the grid, save, done. - **Reassembling after a merge.** You merged three PDFs (sections A, B, C) and want the order to be C, A, B instead. Drag the sections into place. - **Pulling a few pages out.** Drop a 50-page PDF, delete the 40 pages you don't need, save the remaining 10 in the order you want. (For pure extraction without reordering, the Split PDF tool is more direct.) - **Test ordering before committing.** You want to see what the PDF looks like with a different page order before deciding. Save with the new order, review, decide whether to keep that version.

**Performance.** Linear in page count. The thumbnail-rendering phase dominates for first load; rendering 100 pages takes a few seconds, 500 pages 20–30 seconds. After thumbnails are rendered, reordering is instant (just JavaScript state) and saving is fast (pdf-lib's serialization is well-optimized). Practical limit is browser tab memory — somewhere around 1000–2000 pages for typical desktop browsers.

**Edge cases handled:**

- **Single-page PDFs**: the grid shows one thumbnail. Reorder is a no-op; the user can still delete the page (producing an empty output, which pdf-lib correctly rejects with a clear error). - **Pages of mixed sizes**: thumbnails preserve aspect ratio. A document with both A4 and Letter pages thumbnails correctly. - **Rotated pages**: pages with `/Rotate` attributes are rendered with the rotation applied, so the thumbnails show what the page actually looks like, not the underlying coordinate space. - **Object URL lifecycle**: thumbnail URLs are revoked on unmount or new-file-load. The final download URL is also revoked. No memory leaks. - **Drag-and-drop on touch devices**: HTML5 native drag works on desktop pointer devices; touch drag has been less reliable across browsers historically, but iOS and Android Chrome support it adequately for typical phone-screen use. For tablets, a stylus or mouse is more reliable than finger drag.

**What it doesn't do:**

- **Rotate pages during reorder.** That's a separate concern — use the PDF Rotate tool first, then reorder. - **Add new pages**. To merge multiple PDFs, use the Merge PDF tool first, then reorder. - **Modify page content** (add text, redact, watermark). Use the dedicated tools for those.

**Privacy.** Everything runs in your tab. pdf.js renders thumbnails in-browser; pdf-lib reorders in-browser. The PDF never crosses the network. Verify in DevTools by watching the network panel — only the initial pdf.worker fetch happens, then silence. Your sensitive document stays sensitive.