Skip to content
BranchesTags

Latest commit

 

History

40 Commits

Folders and files

NameName
Last commit message
Last commit date
frontend
frontend
 
 
.env.example
.env.example
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
robots.txt
robots.txt
 
 

Repository files navigation

GoEditPDF - Professional & Free Online PDF Editor

License Version JavaScript

GoEditPDF is a powerful, secure, and 100% client-side PDF editor built with modern web technologies. Edit, merge, sign, and secure PDF documents directly in your browser without uploading any data to a server.

🚀 Live Demo: https://goeditpdf.com

✨ Key Features

🛠 PDF Manipulation

  • Merge PDFs: Combine multiple documents into a single file
  • Page Management: Reorder, rotate, delete, or extract specific pages
  • Range Extraction: Split documents by selecting custom page ranges

✍️ Editing & Annotation

  • Add Text & Images: Insert content anywhere with customizable fonts and colors
  • Drawing Tools: Freehand drawing, highlighting, shapes (rectangles, circles, lines)
  • Whiteout: Redact sensitive information easily

🔐 Security & Compliance

  • Local Processing: Files processed entirely in browser using WebAssembly - no server upload
  • Encryption: Password-protect PDFs with AES-256 encryption
  • Watermarking: Add custom text watermarks to all pages
  • E-Signature: Draw and place signatures directly on documents

🧠 Advanced Capabilities

  • OCR (Optical Character Recognition): Extract text from scanned documents using Tesseract.js
  • Multilingual Support: Interface in English 🇬🇧, French 🇫🇷, and Spanish 🇪🇸
  • Responsive Design: Optimized for desktop, tablet, and mobile devices

📁 Project Structure

frontend/
├── assets/
│   ├── css/
│   │   ├── main.css          # Homepage & landing page styles
│   │   ├── editor.css        # PDF editor core styles
│   │   └── mobile.css        # Responsive mobile optimizations
│   ├── js/
│   │   ├── main.js           # Homepage interactions (mobile menu, etc.)
│   │   ├── article-loader.js # Blog article translation loader
│   │   └── articles-translations.js # Blog content translations
│   └── img/                  # Static assets (favicons, illustrations)
├── pages/
│   ├── editor.html           # 🎯 PDF Editor (main application)
│   ├── blog.html             # Blog listing page
│   ├── article.html          # Dynamic blog post viewer
│   ├── article-*.html        # Individual blog articles
│   ├── features.html         # Features showcase page
│   ├── about.html            # About page
│   ├── contact.html          # Contact form
│   └── privacy.html          # Legal pages
└── index.html                # Landing page with SEO optimization

🏗 Tech Stack

Built with Vanilla JavaScript for maximum performance and zero build-step complexity.

Technology Purpose Version
pdf-lib PDF creation & modification 1.17.1
pdf.js PDF rendering 3.11.174
fabric.js Interactive canvas editing 5.3.1
tesseract.js OCR text recognition 4.0+

🚀 Getting Started

Prerequisites

  • Modern web browser (Chrome, Firefox, Safari, Edge)
  • No Node.js or backend server required

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/goeditpdf.git
cd goeditpdf

  2. Run locally
    Use any static file server:

    # Option 1: Python
python3 -m http.server 8000

# Option 2: PHP
php -S localhost:8000

# Option 3: Node.js (http-server)
npx http-server -p 8000

  3. Access the app
    Open http://localhost:8000/frontend/index.html in your browser

🎯 How It Works

File Upload & Processing

User drops PDF → FileReader API reads bytes → pdf.js renders pages → 
fabric.js creates interactive canvas for each page → User edits → 
pdf-lib generates final PDF with edits → User downloads

OCR (Text Recognition)

User clicks OCR → Current page canvas exported as image → 
Tesseract.js analyzes image → Text extracted and displayed → 
User can copy/paste text

How OCR Works Technically:

  1. Canvas rendered page converted to PNG data URL
  2. Tesseract.js loads trained data for language recognition
  3. Image preprocessing (binarization, noise reduction)
  4. Character segmentation and pattern matching
  5. Text output with ~95% accuracy for good quality scans

Security & Encryption

User sets password → pdf-lib generates PDF → encrypt() method 
applies AES-256 encryption → Encrypted PDF downloaded → 
Password required to open

Note: Encryption relies on browser capabilities. Some browsers may not support all encryption features.

Signature Creation

User draws on HTML5 canvas → fabric.js captures signature → 
Converted to PNG image → Image embedded in PDF at specified 
coordinates → Signature becomes part of document

🌍 Deployment

Deploy on Vercel (Recommended)

  1. Push code to GitHub
  2. Import project into Vercel
  3. Set Root Directory to frontend
  4. Deploy!

Deploy on Netlify

  1. Connect GitHub repository
  2. Set Base directory to frontend
  3. Set Publish directory to . (current dir)
  4. Deploy!

Deploy on GitHub Pages

  1. Go to repository Settings → Pages
  2. Select branch main and folder /frontend
  3. Save and wait for deployment

🔒 Privacy & Security

GoEditPDF operates on a privacy-first architecture:

  • ✅ No Server Upload: All processing happens in browser memory
  • ✅ No Tracking: No analytics or user document storage
  • ✅ Open Source: Full code transparency
  • ✅ HTTPS Only: Secure connection required for production

Security Best Practices:

  • Files never leave your device
  • WebAssembly sandboxed execution
  • Local encryption for sensitive documents
  • No third-party data sharing

📚 Key Files Explained

editor.html - The PDF Editor

Main application file containing:

  • Canvas rendering logic for PDF pages
  • fabric.js integration for interactive editing
  • Tool state management (text, draw, shapes, etc.)
  • File merge, rotate, delete operations
  • Download/export functionality

Key Functions:

  • loadPdfSource() - Loads and renders PDF using pdf.js
  • createPageCanvas() - Creates editable canvas per page
  • generatePDF() - Compiles edits and exports final PDF
  • performOCR() - Runs Tesseract.js text extraction
  • addWatermark() - Applies text watermark to all pages

main.css - Homepage Styles

Contains styles for:

  • Landing page hero section
  • Feature cards and grids
  • Navigation bar
  • Footer
  • Responsive breakpoints
  • Call-to-action sections

editor.css - Editor Core Styles

Contains styles for:

  • PDF viewer area (.scroll-area)
  • Toolbar and sidebar (.sidebar)
  • Floating properties panel (.floating-props)
  • Canvas wrappers (.page-wrapper)
  • Button styles (.btn-tool, .btn-primary)
  • Upload screen (.upload-zone)

mobile.css - Responsive Styles

Mobile-specific optimizations:

  • Hamburger menu sidebar overlay
  • Bottom sheet properties panel
  • Touch-friendly button sizes (44px minimum)
  • Safe area insets for iPhone X+
  • Landscape mode adjustments

🤝 Contributing

Contributions welcome! Please follow these guidelines:

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Code Style:

  • Use vanilla JavaScript (no frameworks)
  • Follow existing code formatting
  • Add comments for complex logic
  • Test on mobile and desktop

📝 License

Distributed under the MIT License. See LICENSE for more information.

👨‍💻 Author

[IDRISSI Hafid]

🙏 Acknowledgments

🎓 Learn More

Made with ❤️ for the open-source community

About

Privacy-first PDF editor — 100% in-browser, zero upload, WebAssembly + Fabric.js + local OCR (Tesseract.js).

goeditpdf.com

Resources

Readme
MIT license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages