PDF Annotation App

A modern Next.js application for viewing and annotating PDF files with rectangle-based annotations.

Features

• PDF Viewing: High-quality PDF rendering with zoom and navigation controls
• Rectangle Annotations: Draw, edit, and delete rectangular annotations
• Responsive Design: Works seamlessly on desktop and mobile devices
• State Management: Persistent annotations using localStorage
• Keyboard Shortcuts: Efficient workflow with keyboard navigation
• Export/Import: Save and load annotations as JSON files

Tech Stack

• Framework: Next.js 14+ with App Router
• PDF Rendering: react-pdf library with PDF.js
• Styling: Tailwind CSS
• State Management: Custom React hooks
• TypeScript: Full type safety throughout

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone or download the project files
2. Install dependencies:

npm install
# or
yarn install

3. Run the development server:

npm run dev
# or
yarn dev

4. Open http://localhost:3000 in your browser

Usage

Loading a PDF

1. Click the "Open PDF" button in the toolbar
2. Select a PDF file from your computer
3. The PDF will load and display in the viewer

Creating Annotations

1. Select the Rectangle tool from the toolbar (or press R)
2. Click and drag on the PDF to create a rectangle annotation
3. Release the mouse to complete the annotation

Editing Annotations

1. Select the Select tool from the toolbar (or press S)
2. Click on an annotation to select it (blue border and handles appear)
3. Move: Drag the annotation body to move it
4. Resize: Drag any of the 8 resize handles (corners and edges) to change size
5. Delete:
   • Hover over annotation and click the red close icon (top-right corner)
   • Press Delete key when annotation is selected
   • Use the Delete tool to remove

Navigation Controls

• Zoom: Use the zoom buttons or scroll wheel
• Pages: Navigate with arrow buttons or type page numbers
• Keyboard: Use arrow keys for page navigation

Keyboard Shortcuts

• R - Rectangle annotation tool
• S - Select tool
• D - Delete tool
• ESC - Cancel current action
• ←/→ - Previous/Next page
• Delete - Remove selected annotation

Saving and Loading

• Auto-save: Annotations are automatically saved to localStorage
• Export: Download annotations as JSON file
• Import: Load previously exported annotations

File Structure

src/
├── app/
│   ├── page.tsx                 # Main application page
│   ├── layout.tsx               # Root layout component
│   └── globals.css              # Global styles and Tailwind
├── components/
│   ├── PDFAnnotationViewer.tsx  # Single comprehensive PDF annotation component
│   ├── ExampleUsage.tsx         # Usage examples
│   ├── PDFViewer.tsx           # (Legacy) Main PDF viewer component
│   ├── AnnotationLayer.tsx     # (Legacy) Annotation overlay component
│   ├── AnnotationToolbar.tsx   # (Legacy) Toolbar with controls
│   └── RectangleAnnotation.tsx # (Legacy) Individual annotation component
├── hooks/
│   ├── useAnnotations.ts       # (Legacy) Annotation state management
│   └── usePDFViewer.ts         # (Legacy) PDF viewer state management
├── types/
│   └── annotations.ts          # TypeScript type definitions
└── utils/
    ├── annotationUtils.ts      # Annotation helper functions
    └── pdfUtils.ts            # PDF-related utilities

Key Components

PDFAnnotationViewer (Recommended)

Single comprehensive component that includes all PDF viewing and annotation functionality in one self-contained React component.

Props:

• file?: File | string - PDF file or URL to load
• className?: string - Additional CSS classes
• onAnnotationsChange?: (annotations: Annotation[]) => void - Callback when annotations change
• initialAnnotations?: Annotation[] - Pre-existing annotations to display

Usage:

import PDFAnnotationViewer from '@/components/PDFAnnotationViewer';

function MyApp() {
  return (
    <PDFAnnotationViewer 
      file="/path/to/document.pdf"
      onAnnotationsChange={(annotations) => console.log(annotations)}
    />
  );
}

Legacy Components (Modular Approach)

PDFViewer

Main component that orchestrates PDF display and annotation functionality.

AnnotationLayer

Handles mouse/touch events for drawing and selecting annotations.

AnnotationToolbar

Provides tools for annotation creation, navigation, and file operations.

RectangleAnnotation

Renders individual annotations with selection and editing capabilities.

Coordinate System

The app uses a dual coordinate system:

• Canvas Coordinates: Screen pixels relative to the PDF display
• PDF Coordinates: Points in the PDF's native coordinate system

Coordinates are automatically converted to maintain accuracy across zoom levels.

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

Performance Considerations

• Efficient rendering with React optimization
• Debounced annotation updates
• Virtual scrolling for large PDFs
• Responsive image loading

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

Troubleshooting

PDF Not Loading

• Ensure the file is a valid PDF
• Check browser console for errors
• Try a different PDF file

Annotations Not Saving

• Check localStorage availability
• Ensure browser allows local storage
• Try clearing browser cache

Performance Issues

• Reduce zoom level for large PDFs
• Close other browser tabs
• Check available system memory

Future Enhancements

• Text annotations
• Collaborative editing
• Annotation comments
• Drawing tools (pen, highlighter)
• PDF form filling
• Cloud storage integration
• Real-time collaboration
• Annotation templates