Document Signer is a web-based PDF annotation tool that allows users to upload PDF documents and add various annotations like highlights, underlines, comments, and signatures.
- Node.js (v16 or higher)
- npm or yarn package manager
- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open your browser and navigate to
http://localhost:3000
- PDF Upload: Upload and view PDF documents
- Page Navigation: Navigate through PDF pages
- Zoom Controls: Zoom in and out to adjust the document view
- Annotation Tools:
- Highlight text
- Underline text
- Add comments to specific locations
- Add signatures to the document
- Undo Functionality: Revert the last annotation
- Export: Save annotated documents
- React: Frontend library for building user interfaces
- TypeScript: For static type checking
- Vite: Fast development server and build tool
- Tailwind CSS: Utility-first CSS framework for styling
- shadcn/ui: Component library built on top of Tailwind CSS
- react-pdf: PDF rendering library for React
- pdf-lib: Library for creating and modifying PDF documents
- react-dropzone: For file upload functionality
- uuid: For generating unique identifiers for annotations
- lucide-react: Icon library
- React & TypeScript: Provides a robust foundation with type safety
- Tailwind CSS & shadcn/ui: Enables rapid UI development with consistent design
- react-pdf: Offers powerful PDF rendering capabilities in the browser
- pdf-lib: Provides necessary tools for document manipulation without server-side processing
- react-dropzone: Simplifies file upload with drag-and-drop functionality
The application follows a component-based architecture:
- Index: Main page that orchestrates the application flow
- UploadArea: Handles file uploads
- DocumentViewer: Container for PDF viewing and annotation
- DocumentControls: Navigation and zoom controls
- DocumentPage: PDF page renderer and interaction handler
- AnnotationLayer: Renders annotations on top of PDF pages
- AnnotationTools: Toolbar for selecting annotation types and colors
- Modal Components:
- CommentModal: For adding text comments
- SignatureModal: For drawing signatures
Challenge: Aligning annotations correctly with PDF content, especially when zooming and navigating.
Solution: Implemented a coordinate system based on the PDF's viewport. Created a separate annotation layer that overlays the PDF content and adjusts position based on scale.
Challenge: Creating a smooth drawing experience for signatures.
Solution: Used HTML5 Canvas for drawing capabilities. Implemented touch and mouse event handlers for cross-device compatibility.
Challenge: Applying annotations to the PDF for export.
Solution: Used pdf-lib to modify the original PDF. Each annotation type required different handling to correctly apply it to the document.
Challenge: Managing the state of annotations across different pages and tools.
Solution: Centralized annotation state in the main component, allowing for easier undo functionality and consistent rendering across pages.
If given more time, these features would be valuable additions:
- Text Selection: Enable true text selection for more accurate highlighting and underlining
- Annotation Editing: Allow users to move, resize, or delete specific annotations
- Persistent Storage: Save annotation data to local storage or a database
- Collaboration: Real-time collaborative annotation with multiple users
- More Annotation Types: Add shapes, arrows, freehand drawing, and text boxes
- Search Functionality: Search within the PDF content
- Annotation Summary: Create a summary panel showing all annotations with navigation
- Mobile Optimization: Further improvements for touch devices
- Performance Optimization: For handling large documents or many annotations
- Customizable Themes: Allow users to customize the interface appearance