A simple, responsive web application to merge multiple PDF files into a single PDF, sorted alphabetically by filename. Built using vanilla HTML, CSS, and JavaScript with the pdf-lib library.
- Drag & drop or file selection of multiple PDF files
- Automatic sorting of selected files by filename (A–Z)
- Preview list with option to remove individual files
- Responsive design for mobile, tablet, and desktop views
- Instant merge and download of the combined PDF
- Status indicator for merge progress
- A modern web browser (Chrome, Firefox, Edge, Safari)
- Internet connection to load the
pdf-lib
library via CDN
pdf-merger/
├── index.html # Main HTML page
├── style.css # Stylesheet for layout and responsiveness
└── script.js # JavaScript logic for file handling and PDF merging
-
Clone or download the repository:
git clone https://github.com/yourusername/pdf-merger.git cd pdf-merger
-
Open
index.html
in your preferred browser:-
Double-click the file, or
-
Run a local HTTP server (recommended for drag-and-drop consistency):
# Using Python 3.x python -m http.server 8000 # Open http://localhost:8000 in your browser
-
-
Select PDF files:
- Drag & drop them into the drop-zone area, or
- Click the drop zone to open the file dialog and select PDFs.
-
Reorder & remove files as needed using the file list controls.
-
Click "Merge & Download PDF" to combine and download the merged document.
- Sorting behavior: Change the
localeCompare
options inupdateFileList()
for different collation rules. - Styling: Modify
style.css
to update colors, fonts, or layout breakpoints. - Library: Swap out
pdf-lib
for another client-side PDF library if desired.
- If the merge operation fails, check the browser console for errors.
- Ensure all selected files are valid PDF documents.
- On iOS/Safari, drag-and-drop may behave inconsistently; use the file selector click instead.
This project is released under the MIT License. See LICENSE for details.
Happy Merging!