📑 PDF Tools – Browser-based PDF Merger

Frontend-only PDF merger built with React + Vite + TypeScript.
Drag & drop PDFs, reorder them visually, and merge into a single file - all locally in your browser.
No server. No uploads. 100% client-side.

👉 Live demo: kraspel.com/pdf-tools

---

✨ Features

• 📂 Drag & Drop PDFs into the page
• 🔀 Reorder PDFs via drag-and-drop (powered by @dnd-kit)
• 📄 Thumbnail previews of the first page
• 📝 Rename output file before downloading
• ⚡ Fast & secure - all work is done in your browser using:
  • pdf-lib (merging pages)
  • pdfjs-dist (rendering thumbnails)
• 🛡️ Privacy-friendly - your PDFs never leave your device

---

🚀 Getting Started

Clone the repo and install dependencies:

git clone https://github.com/yourusername/pdf-tools.git
cd pdf-tools
npm install

Run in development mode:

npm run dev

Build for production:

npm run build

Preview the build:

npm run preview

---

📂 Project Structure

pdf-tools/
├── public/         # static assets (favicon, logo, etc.)
├── src/
│   ├── components/ # UI components (e.g. SortableCard)
│   ├── lib/        # PDF helpers (fileToBytes, makeThumb, types)
│   └── App.tsx     # main app logic
├── vite.config.ts
├── index.html
└── package.json

---

🛠️ Tech Stack

• React + Vite + TypeScript
• Tailwind CSS (utility-first styling)
• @dnd-kit (sortable drag & drop)
• pdf-lib (PDF manipulation)
• pdfjs-dist (PDF parsing + thumbnails)

---

📖 Usage

1. Open the app in your browser (demo link).
2. Drop one or more PDFs into the upload box.
3. Reorder them as needed.
4. Set an output filename (optional).
5. Click Merge PDFs and download the merged file.

---

📜 License

MIT License © 2025 \Tal Kramer