A fast, private, and beautiful Image to PDF converter — built entirely in the browser.
Drag, drop, reorder, customize, and convert your images into a polished PDF — all without ever leaving your browser. No uploads. No servers. Just pure client-side magic.
https://hamzahossainx.github.io/ImgFold/
| Feature | Description |
|---|---|
| Live Camera Feed | Use device camera to scan documents |
| Auto Document Enhance | Automatically enhance scanned documents |
| Image Filters | Original, Grayscale, B&W, Auto Enhance, High Contrast |
| Image Crop | Crop any image before converting to PDF |
| Zoom & Rotate | Zoom 1x-3x and rotate crop area 0-360° |
| HD Quality | Resize to A4 at 300 DPI before PDF generation |
| Front/Back Camera | Switch between front and back camera |
| Filter Preview | See live filter previews before applying |
| # | Feature | Description |
|---|---|---|
| 1 | 🖼️ Multi-Image Upload | Upload JPG, PNG, and JPEG files via drag-and-drop, file picker, or clipboard paste (Ctrl+V) |
| 2 | 👁️ Live Preview Grid | Instantly see thumbnails of all uploaded images in a responsive grid |
| 3 | 🔀 Drag & Drop Reorder | Rearrange image order with smooth drag-and-drop powered by @dnd-kit |
| 4 | ❌ Remove Images | Hover over any image to reveal a quick-remove action |
| 5 | 🔍 Full-Screen Preview | Click any image to open a full-screen modal preview |
| 6 | ✏️ Custom Filename | Set a custom name for your output PDF file |
| 7 | 📐 Page Size Options | Auto (matches image aspect ratio), A4, or Letter |
| 8 | 🔄 Page Orientation | Choose between Portrait and Landscape |
| 9 | 📏 Image Fit Modes | Contain (preserves aspect ratio) or Fill (stretches to fit) |
| 10 | 📎 Margin Control | Adjustable margin slider from 0 to 60 pt |
| 11 | 🎚️ Quality Control | Image compression slider from 10% to 100% |
| 12 | ⏳ Live Progress Bar | Visual progress indicator with 4 generation stages |
| 13 | ⬇️ Smart Download | Download button appears only when the PDF is ready |
| 14 | 🌙 Dark Mode | Toggle dark/light theme — system preference–aware |
| 15 | 🔤 Font Size Switcher | Adjust UI font size: Small, Medium, or Large |
| 16 | 📱 Fully Responsive | Seamless experience on desktop and mobile |
| 17 | 📋 Clipboard Paste | Paste images directly from clipboard with Ctrl+V |
Your files never leave your device.
All image processing and PDF generation happen entirely in the browser using client-side JavaScript. No data is uploaded to any server — ever.
| Library | Version | Purpose |
|---|---|---|
| React | ^18.3.1 |
UI component framework |
| Vite | ^5.4.0 |
Lightning-fast build tool & dev server |
| Tailwind CSS | ^3.4.7 |
Utility-first CSS framework |
| Framer Motion | ^11.3.0 |
Declarative animations & transitions |
| pdf-lib | ^1.17.1 |
Client-side PDF generation |
| @dnd-kit | ^6.1.0 |
Accessible drag-and-drop toolkit |
| PostCSS | ^8.4.41 |
CSS transformations & Tailwind processing |
| Autoprefixer | ^10.4.20 |
Automatic vendor prefixes |
imgfold-react/
├── index.html # App entry point
├── package.json # Dependencies & scripts
├── vite.config.js # Vite config (includes pdf-lib alias fix)
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS plugins
└── src/
├── main.jsx # React DOM mount
├── App.jsx # Root application component
├── index.css # Global styles & Tailwind directives
├── components/
│ ├── Header.jsx # App header with dark mode & font size toggles
│ ├── ImageUploader.jsx # Drag-drop / file picker / paste upload zone
│ ├── ImagePreviewGrid.jsx# Sortable grid of uploaded images
│ ├── SortableImageCard.jsx # Individual draggable image card
│ ├── ControlsPanel.jsx # PDF settings (page size, margins, quality…)
│ ├── PDFGenerator.jsx # Generate & download PDF controls
│ └── ProgressBar.jsx # Multi-stage progress indicator
├── hooks/
│ └── usePDFGeneration.js # Custom hook for PDF generation logic
└── utils/
├── imageUtils.js # Image loading, compression & helpers
└── pdfUtils.js # PDF document assembly utilities
- Node.js ≥ 18
- npm ≥ 9
-
Clone the repository
git clone https://github.com/YOUR_USERNAME/imgfold-react.git cd imgfold-react -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open in your browser
http://localhost:5173
npm run build # Outputs optimized bundle to /dist
npm run preview # Preview the production build locallyFollow these steps to publish ImgFold as a static site on GitHub Pages:
-
Set the base path in
vite.config.js:export default defineConfig({ base: '/imgfold-react/', // ...existing config });
-
Install
gh-pages:npm install --save-dev gh-pages
-
Add deploy scripts to
package.json:"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d dist" }
-
Deploy:
npm run deploy
-
Enable GitHub Pages: Go to your repository Settings → Pages and select the
gh-pagesbranch as the source. -
Your app is live at:
https://YOUR_USERNAME.github.io/imgfold-react/
| Note | Details |
|---|---|
| pdf-lib ESM issue | The pdf-lib npm package ships a broken ESM build. This is already patched in vite.config.js by aliasing pdf-lib to its UMD bundle. No action is needed on your part. |
Contributions are welcome and appreciated! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- 🧪 Add unit tests with Vitest
- 🌍 Add i18n / multi-language support
- 🎨 Add more page size presets (Legal, Tabloid, etc.)
- 📄 Add multi-page layout options (2-up, 4-up grids)
- ♿ Improve accessibility (ARIA labels, keyboard navigation)
This project is licensed under the MIT License — see the LICENSE file for details.
MIT License
Copyright (c) 2026 ImgFold
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Made with ❤️ and React · Back to top ↑