pdfiles is a 100% free and open-source online PDF editor that runs entirely in your browser. Built with modern web technologies (Next.js, TypeScript, React, PDF.js, pdf-lib), it provides professional PDF editing capabilities without requiring installation, signup, or data uploads.
All processing happens locally on your device. Your PDF files never leave your browser, ensuring complete privacy and security.
- Quick PDF edits without software installation
- Privacy-conscious users who don't want to upload sensitive documents
- Developers looking for an open-source PDF editor to study or fork
- Organizations needing a self-hosted PDF editing solution
# Clone the repository
git clone https://github.com/affsquadDevs/editora2.git
cd your-repo
# Install dependencies
npm install
# Run development server
npm run devOpen http://localhost:3000 to see the app.
- High-Quality Rendering: Crystal-clear PDF rendering using Mozilla's PDF.js
- Zoom Controls: Smooth zoom from 50% to 300%
- Thumbnail Sidebar: Visual page overview with drag-to-reorder
- Responsive Design: Works on desktop, tablet, and mobile
- Extract & Edit Original Text: Automatically extracts all text from PDF
- Edit Content: Click any text to modify content, size, and color
- Add New Text: Place text overlays anywhere on pages
- Multi-line Support: Create paragraphs with line breaks
- Hide Original Text: Replace existing text seamlessly
- Upload Images: Add PNG, JPEG, and other image formats
- Resize & Position: Drag and resize images freely
- Delete Images: Remove unwanted images
- Rectangles: Draw boxes for emphasis
- Circles/Ellipses: Highlight circular areas
- Lines & Arrows: Point to specific content
- Highlights: Semi-transparent overlays
- Customization: Adjust colors and line widths
- Rotate Pages: 90° increments with live preview
- Delete Pages: Remove unwanted pages (with confirmation)
- Reorder Pages: Drag thumbnails to rearrange
- Export PDF: Download with all changes applied
| Technology | Purpose | Version |
|---|---|---|
| Next.js | React framework with App Router | 14.x |
| TypeScript | Type-safe JavaScript | 5.x |
| React | UI library | 18.x |
| Tailwind CSS | Utility-first CSS framework | 3.x |
| Zustand | Lightweight state management | 4.x |
| PDF.js | PDF rendering engine (Mozilla) | 3.x |
| pdf-lib | PDF manipulation library | 1.x |
- Node.js 18+ and npm/yarn/pnpm
- Modern browser: Chrome, Firefox, Edge, or Safari (latest versions)
# Clone the repo
git clone https://github.com/affsquadDevs/editora2.git
cd your-repo
# Install dependencies
npm install
# Start development server (with hot reload)
npm run dev# Build optimized production bundle
npm run build
# Start production server
npm run start# Generate static export
npm run build
# Deploy the 'out' directory to your hosting providerThis project includes comprehensive SEO optimizations following 2026 best practices:
- ✅ Complete metadata (Open Graph, Twitter Cards, structured data)
- ✅ JSON-LD schemas (WebApplication, SoftwareSourceCode, Organization, Breadcrumb)
- ✅ Dynamic sitemap & robots.txt
- ✅ PWA manifest for app stores
- ✅ Performance headers & caching
- ✅ Semantic HTML5 & ARIA accessibility
- ✅ Mobile-first responsive design
- ✅ Open-source schema with GitHub integration
📚 SEO Documentation: See SEO_IMPLEMENTATION.md, SEO_CHECKLIST.md, and IMAGE_REQUIREMENTS.md for complete setup guide.
pdfeditor/
├── app/
│ ├── components/
│ │ ├── UploadArea.tsx # File upload with drag & drop
│ │ ├── Toolbar.tsx # Main controls (zoom, rotate, delete)
│ │ ├── EditToolbar.tsx # ✨ NEW: Tool selector (text, image, shape)
│ │ ├── Thumbnails.tsx # Page thumbnail list with drag-to-reorder
│ │ ├── PdfViewer.tsx # Main page canvas viewer
│ │ ├── AdvancedOverlayLayer.tsx # ✨ NEW: All editing (text, images, shapes)
│ │ ├── TextOverlayLayer.tsx # Legacy text overlay (still available)
│ │ └── ExportButton.tsx # PDF export and download
│ ├── lib/
│ │ └── pdf/
│ │ ├── pdfRender.ts # PDF.js rendering utilities
│ │ ├── pdfExtract.ts # ✨ NEW: Text & image extraction
│ │ └── exportPdf.ts # pdf-lib export logic (enhanced)
│ ├── store/
│ │ └── pdfStore.ts # Zustand state management (enhanced)
│ ├── layout.tsx
│ ├── page.tsx # Main page / entry point
│ └── globals.css
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.js
- File is validated (type, size) and loaded into memory
- PDF.js parses the PDF and extracts page information
- Text Extraction: Automatically extracts all text with positioning
- Thumbnails are generated for all pages
The app maintains:
- originalFile: Uploaded PDF file
- pages[]: Array of page objects with:
- Original index
- Rotation (0, 90, 180, 270)
- Deleted flag
- Text overlays (original + new, with normalized coordinates)
- Image overlays (with data URLs)
- Shape overlays (rectangles, circles, lines, arrows, highlights)
- selectedPageId: Current page being viewed
- zoom: Current zoom level (0.5 - 3.0)
- editMode: Current tool (select, text, image, shape)
- PDF.js
getTextContent()extracts all text with positioning - Text items are converted to editable overlays
- Original text can be edited or hidden
- New text can be added anywhere
- PDF.js renders pages to HTML5 canvas
- Multiple overlay layers positioned absolutely:
- Text layer (original + new)
- Image layer (uploaded images)
- Shape layer (drawn shapes)
- Coordinates are normalized (0-1) so they scale with zoom
- Interactive editing with drag-and-drop
- pdf-lib loads the original PDF
- Creates a new PDF document
- Copies pages in the new order (skipping deleted pages)
- Applies rotations
- Hides replaced text (white rectangles over originals)
- Burns edited text into the PDF pages
- Embeds images (PNG/JPEG)
- Draws shapes (SVG-like rendering)
- Generates downloadable file
- Max file size: 25MB (browser memory constraint)
- Recommended page count: < 50 pages for smooth performance
- No password-protected PDFs: Encrypted files not supported
- No undo/redo: Doesn't include history management (TODO: implement)
- Basic text rendering: Only standard fonts (Helvetica), no custom fonts
- Text positioning: Extracted text positioning may not be perfect for complex layouts
- Original text replacement: Hides original with white rectangles (works best on white backgrounds)
- Form field editing: Forms are flattened on export
- Image extraction: Currently limited (can add new images, but extracting existing images from PDF is complex)
- Modern browsers only: Chrome, Firefox, Edge, Safari (latest versions)
- Large PDFs: May cause performance issues or memory errors
- Mobile: Works but not optimized for touch interactions
- Extract and edit original PDF text
- Image overlays (upload and place images)
- Draw shapes (rectangles, circles, lines, arrows, highlights)
- Multi-line text support
- Hide/replace original text
- Comprehensive export (all overlay types)
- Undo/redo functionality
- More text formatting options (bold, italic, font family selection)
- Extract existing images from PDF (currently can only add new images)
- Freehand drawing/signature
- Page merging from multiple PDFs
- Extract/split pages to separate PDFs
- OCR for scanned PDFs
- Optimize large file handling
- Mobile-responsive touch controls
- Keyboard shortcuts
- Collaborative editing (cloud sync)
- Check if the file is a valid PDF
- Ensure the PDF is not encrypted or password-protected
- Try a smaller file (< 25MB)
- Some complex PDFs with unusual structure may not export correctly
- Try with a simpler PDF to verify the feature works
- Check browser console for specific errors
- Large PDFs (> 50 pages) may render slowly
- Try reducing zoom level
- Close other browser tabs to free up memory
- The app loads the PDF.js worker from a CDN
- Ensure you have internet connectivity (even though processing is local)
- In production, consider bundling the worker locally
- Privacy: User files never leave their machine
- Simplicity: No backend infrastructure needed
- Cost: Free hosting on static platforms
- Speed: No network latency for processing
- Zustand over Redux: Simpler state management for MVP
- Canvas rendering: Better performance than SVG for PDF pages
- Normalized coordinates: Makes overlays zoom-independent
- pdf-lib for export: Browser-compatible, unlike Node-based alternatives
- Add state to
pdfStore.tsif needed - Create component in
app/components/ - Add helper functions in
app/lib/pdf/if manipulating PDFs - Update export logic in
exportPdf.tsto persist changes
We welcome contributions from the community! Whether you're fixing bugs, adding features, improving documentation, or spreading the word, your help is appreciated.
Please read our Contributing Guide to get started.
- 🐛 Report bugs and suggest features via GitHub Issues
- 💻 Submit pull requests with bug fixes or new features
- 📖 Improve documentation and add examples
- ⭐ Star the repo to show your support
- 🔗 Share the project with others who might find it useful
MIT License - This project is completely free and open source. You can use, modify, and distribute it for any purpose, including commercial projects.
See the LICENSE file for full details.
pdfiles is built on the shoulders of giants:
- Next.js - The React framework for production
- PDF.js - PDF rendering by Mozilla
- pdf-lib - PDF manipulation library
- Zustand - Lightweight state management
- Tailwind CSS - Utility-first CSS framework
- Website: set
NEXT_PUBLIC_SITE_URLfor production URLs (dev: http://localhost:3000) - GitHub: affsquadDevs/editora2
- Issues: Report bugs or request features
- Email: hello@example.com
If you find pdfiles useful, please consider:
- ⭐ Starring the repo on GitHub
- 🐦 Sharing on social media
- 📝 Writing a blog post about the project
- 💬 Recommending it to friends and colleagues
Every bit of support helps the project grow and improve!
Made with ❤️ by the pdfiles Team