Implement PDF Knife: Client-side PDF manipulation web app

[Copilot]

Built a vanilla JS web application for merging, reordering, rotating, and editing PDFs entirely in the browser with no server dependencies.

Implementation

Core Architecture

• index.html - Structure with upload controls and page grid container
• style.css - Responsive grid layout with drag-and-drop visual feedback
• script.js - Page management using unified array: {id, sourceIndex, pageNumber, rotation, pdfDoc}

Libraries (local)

• pdf.js (ES module) - Canvas-based thumbnail rendering
• pdf-lib (UMD) - PDF assembly and export

Key Features

• Multi-PDF upload with aggregated page view
• HTML5 native drag-and-drop for reordering
• CSS transform for rotation preview, setRotation() for actual PDF modification
• copyPages() workflow: load → reorder → rotate → assemble → download

Technical Details

ES module integration:

// Import pdf.js as module
import * as pdfjsLib from './lib/pdf.min.mjs';

// Access pdf-lib from window (loaded via script tag)
const { PDFDocument, degrees } = window.PDFLib;

Page state management maintains source references for later assembly:

pages = [{
  id: 0,
  sourceIndex: 0,        // Which uploaded PDF
  pageNumber: 1,         // Original page number
  rotation: 90,          // Current rotation
  pdfDoc: PDFDocument,   // Source document reference
  thumbnail: Canvas      // Rendered preview
}]

Screenshots

Empty state:

Working with pages:

Rotation applied:

Page deletion:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• cdnjs.cloudflare.com
  • Triggering command: /usr/bin/curl curl -L -o pdf.min.js REDACTED (dns block)
• unpkg.com
  • Triggering command: /usr/bin/curl curl -L -o pdf.min.js REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Build a client-side web app called “PDF Knife” that can upload multiple PDFs, display page thumbnails, allow drag-and-drop reordering, page deletion, and rotation, and export a new combined PDF.
Requirements:

Use vanilla HTML/CSS/JS (no framework).

Use pdf.js for rendering thumbnails and pdf-lib for assembling the output PDF.

After uploading 1+ PDFs, load each using PDFDocument.load, generate thumbnails with pdf.js, and create a unified “pages” array containing objects: {id, sourceIndex, pageNumber, rotation, pdfDoc}.

Show all pages in one scrollable grid; each page card shows the thumbnail, page number, delete button, and rotate button.

Implement drag-and-drop reordering with native HTML5 DnD. Updates must reorder the pages array.

Clicking rotate updates rotation by +90° and visually rotates the thumbnail using CSS.

Delete removes the page object from pages array and re-renders.

“Download PDF” button creates a new PDFDocument, copies pages from their source PDF via copyPages, applies rotation, and exports as output.pdf using a browser download.

All processing must be client-side only; no backend.

Include a simple clean UI (top bar with Upload, Clear All, Download PDF).

Write all code in separate files: index.html, style.css, script.js.

Minimize dependencies and keep the UI minimal and modern.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

This PR implements PDF Knife, a client-side web application for manipulating PDFs (merging, reordering, rotating, and deleting pages) entirely in the browser without server dependencies.

Key Changes:

• Created a vanilla JavaScript web app using pdf.js for rendering thumbnails and pdf-lib for PDF assembly
• Implemented HTML5 drag-and-drop for page reordering with visual feedback
• Added page rotation (90° increments) with CSS transforms for preview and pdf-lib for actual PDF modification

Reviewed changes

Copilot reviewed 6 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
index.html	Defines the app structure with navbar controls and page grid container
style.css	Provides responsive grid layout with drag-and-drop styling and rotation classes
script.js	Implements core functionality: PDF loading, thumbnail rendering, drag-and-drop, rotation, and export
package.json	Declares dependencies for pdf.js and pdf-lib libraries
README.md	Documents features, installation, usage, and technical architecture
USAGE.md	Provides quick start guide and troubleshooting tips
.gitignore	Excludes node_modules and package-lock.json

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The pdfjsPage property is stored in each page object but is never used in the codebase. This stores potentially large objects in memory unnecessarily. Consider removing this property unless it's needed for future functionality.

Suggested change

	thumbnail: thumbnail,
	pdfjsPage: page
	thumbnail: thumbnail

[Copilot]

[nitpick] The magic number 200px for minimum card width lacks context. Consider defining this as a CSS custom property (e.g., --card-min-width: 200px) at the root level for easier maintenance and consistency with the responsive breakpoint at line 267 which uses 150px.