PDF Editor

Browser-based PDF editor with no backend. It lets users edit text content and reposition text blocks directly in the browser.

Features

• Faithful page rendering through pdf.js on a <canvas>
• Inline text editing with double-click activation
• Drag-and-drop text block repositioning
• Rotation-aware overlays and export for non-horizontal text
• Font-family detection for serif, sans-serif, and monospace styles
• Text color extraction from the original PDF drawing operators
• PDF export through pdf-lib that hides original text and redraws modified content
• Multi-page navigation inside the editor toolbar
• Fully client-side workflow with no file uploads to any server

Usage

Drop a PDF -> double-click text to edit -> drag text to move -> download the updated PDF

Installation

Node.js 18 or newer is required.

git clone https://github.com/gafapa/pdfedit.git
cd pdfedit
npm install
npm run dev

The development server runs on http://localhost:5173.

npm run build
npm run preview

Project Structure

Path	Responsibility
src/App.jsx	Application entry flow, upload state, loading state, and error handling
src/components/Dropzone.jsx	File picker and drag-and-drop upload UI
src/components/PDFEditor.jsx	Page navigation, block mutation handlers, and export trigger
src/components/PDFPage.jsx	Page canvas rendering plus overlay composition
src/components/TextBlock.jsx	Individual text block drag and inline edit behavior
src/utils/pdfParser.js	pdf.js worker setup, text extraction, font parsing, and page rendering
src/utils/pdfExporter.js	pdf-lib export pipeline and standard-font mapping

Data Flow

1. The user selects or drops a PDF file.
2. parsePDF() loads the document with pdf.js, using a bundled local worker, then extracts text blocks, font hints, rotation, and text colors before preparing per-page view state.
3. renderPage() draws the selected page to a canvas.
4. React overlays each text block as an absolutely positioned editable layer on top of the canvas.
5. exportPDF() covers the original text with white rectangles and redraws only modified blocks into a downloadable PDF.

Coordinate Model

• PDF space uses a bottom-left origin and point units.
• Screen space uses a top-left origin and CSS pixels.
• Rendering and overlay placement use SCALE = 1.5.
• Drag updates are translated back into PDF coordinates before export.
• Parsed rotation is preserved in the overlay and in exported text.

Limitations

• Export uses PDF standard fonts as the closest approximation to embedded source fonts.
• Password-protected PDFs may fail to load.
• Complex color spaces can degrade to a simpler RGB fallback during export.

Documentation

• Architecture details: ARCHITECTURE.md
• Working conventions and repository rules: RULES.md

License

MIT