A user-friendly, in-browser PDF annotation tool that allows you to open, view, annotate, and save PDF files. Built with HTML, CSS, and JavaScript, and leveraging the PDF.js library for rendering and jsPDF for generating PDF documents.
- Open and view PDFs in the browser
- Pen, highlighter, text, and eraser annotation tools
- Customizable drawing tools with size control and color options
- Collapsible toolbar to maximize viewing area
- Zoom, navigate, and save annotated PDFs with quality options
- Keyboard shortcuts for all major functions
- Responsive design for different screen sizes
- AI-powered document processing (DeepSeek LLM integration)
- Text translation to multiple languages
- Document summarization
- Information extraction
- OCR for scanned documents (via Tesseract.js)
- Intelligent text extraction with preserved formatting
- User notifications system for operation feedback
- Docker support for easy deployment and consistency
Clone the repository and open the index.html file in a web browser:
git clone https://github.com/adiKhan12/pdf-annotator-javascript.git
cd pdf-annotation-tool
Then, open the index.html file in your preferred web browser.
If you have Docker installed, you can run the application in a container:
- Clone the repository:
git clone https://github.com/adiKhan12/pdf-annotator-javascript.git
cd pdf-annotation-tool
- Using Docker Compose (recommended):
docker-compose up -d
- Or build and run with Docker directly:
docker build -t pdf-annotation-tool .
docker run -p 8080:80 pdf-annotation-tool
- Access the application in your browser at
http://localhost:8080
- Click the "Open PDF" button in the toolbar to select and open a PDF file.
- Use the annotation tools:
- Pen Tool (P): Draw with customizable size and color
- Highlighter Tool (H): Highlight text with adjustable size and color
- Text Tool (T): Add text annotations with customizable font and color
- Eraser Tool (E): Remove annotations
- Adjust drawing size using the size control panel
- Navigate between pages using the navigation buttons or arrow keys
- Zoom in/out or fit to width using the zoom controls
- Toggle the toolbar visibility with the (F) key or the toggle button
- Save the annotated PDF by clicking the "Save" button and selecting quality options
- Access AI tools by clicking the respective buttons in the toolbar:
- Translate: Translate selected text or entire pages to different languages
- Summarize: Generate concise summaries of PDF content
- Extract Info: Extract specific information from the document
- Use OCR for scanned documents:
- The tool automatically detects when a document needs OCR
- Text extraction preserves original formatting and layout
| Key | Function |
|---|---|
| P | Pen Tool |
| H | Highlighter Tool |
| T | Text Tool |
| E | Eraser Tool |
| ← | Previous Page |
| → | Next Page |
| + | Zoom In |
| - | Zoom Out |
| W | Fit to Width |
| F | Toggle Toolbar |
| L | Toggle AI Panel |
| Ctrl+S | Save PDF |
For development, you can use the Docker setup with volumes to see your changes immediately:
docker-compose up
This will mount your local directory to the container, so any changes you make to the files will be reflected immediately in the browser.
For production deployment:
docker build -t pdf-annotation-tool:production --no-cache .
docker run -p 80:80 pdf-annotation-tool:production
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. You are free to use, modify, and distribute this software for non-commercial purposes with proper attribution. Commercial use requires separate licensing - see the LICENSE file for full details.