AI-Enhanced PDF Annotation Tool with Markdown Support
Built entirely through vibe coding - rapid prototyping meets production quality
- Rich Text Support: Basic Markdown syntax including headers, lists, tables, code blocks, and math equations (KaTeX)
- Auto-Scaling: Text boxes automatically scale content to fit, maintaining readability
- Live Preview: Real-time Markdown rendering as you type
- Color Customization: 7 color options for text annotations
- Drag & Resize: Ctrl+Drag to move, resize handles for precise positioning
- One-Click Integration: Click "Insert" on any AI response to place it directly into your PDF
- Context-Aware: AI analyzes your document with configurable page ranges
- Multi-Model Support: Works with OpenAI (GPT-4, GPT-4o) and Google Gemini
- Smart Positioning: Click anywhere on the page to place AI-generated content
- Markdown Output: AI responses are formatted in Markdown for rich formatting
- Pen Tool: Smooth, pressure-sensitive drawing with optimized stroke rendering
- Highlighter: Semi-transparent highlighting
- Eraser: Precise stroke removal
- Color & Width: Customizable colors and stroke widths
- Overwrite Original: Save directly to the source file (File System Access API)
- Save As: Export to a new PDF file
- Download: Traditional browser download
- Embedded Annotations: All annotations are permanently embedded in the PDF
- Node.js 18+ and npm
# Clone the repository
git clone https://github.com/dog-last/MarkPDF.git
cd MarkPDF
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:3000 to start annotating!
- Open PDF: Click "Open" or drag & drop a PDF file
- Add Annotations:
- Select Text Tool (T) to add Markdown text boxes
- Select Pen or Highlighter to draw
- Use AI Assistant:
- Click the AI sidebar button (toggle) to open the assistant
- Ask questions about your document
- Click Insert to place AI responses on the page
- Edit & Customize:
- Double-click text boxes to edit
- Change colors, resize, and reposition
- Save: Click "Save" to export your annotated PDF
Esc- Cancel insert modeCtrl + Drag- Move text annotations- Double-click - Edit annotation
- Frontend: React 18 + TypeScript
- Build Tool: Vite 5
- PDF Rendering: PDF.js
- PDF Editing: pdf-lib
- AI Integration: OpenAI API, Google Gemini API
- Markdown: react-markdown, remark-gfm, KaTeX
- Styling: Tailwind CSS
- Icons: Lucide React
- Supports basic Markdown syntax including:
- Headers (H1-H6)
- Bold, italic, strikethrough
- Lists (ordered & unordered)
- Tables with styling
- Code blocks with syntax highlighting
- Math equations (inline & block)
- Auto-scaling algorithm ensures text fits perfectly in boxes
- Real-time preview with syntax highlighting
- Context Selection: Choose specific page ranges for AI analysis
- Multi-Model Support: Switch between OpenAI and Gemini models
- Conversation History: Maintain context across multiple queries
- Insert Mode: Visual indicator when placing AI content
- Custom Prompts: Save and reuse common prompts
- Canvas-based rendering with optimized performance
- Smooth pen strokes with circular joints for solid appearance
- Highlighter with natural transparency
- Eraser with precise stroke detection
- All drawings embedded as vector graphics in final PDF
# Build for production
npm run build
# Preview production build
npm run previewThe build output will be in the dist/ directory, ready for deployment to any static hosting service.
Contributions are welcome! This project was built with vibe coding, embracing rapid iteration and creative problem-solving.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Vibe Coding methodology
- Inspired by modern PDF editors like Edge PDF Reader
- PDF.js and pdf-lib communities for excellent libraries