PDF Studio

PDF Studio is a browser-based document workspace for creating rich-text documents and annotating existing PDFs. Files are processed locally in the browser; no backend upload is required.

Features

• Rich Text Editing: Compose documents with Draft.js and use the formatting toolbar for headings, lists, alignment, links, colors, and inline styles.
• Hindi PDF Export: Export editor content as a PDF with the bundled Devanagari font support.
• Annotate PDF Mode: Open an existing PDF locally and work on a focused annotation canvas.
• Highlighting: Click and drag across a page to create a highlight. Highlights can be moved, resized, undone, redone, or deleted.
• Electronic Signatures: Draw a signature with multiple strokes, place it anywhere on the page, drag it, resize it, or delete it before export.
• Hand and Zoom Controls: Pan around the current page and zoom in, zoom out, or fit the page to the viewer.
• Page Navigation: Move through multi-page PDFs while rendering only the active page for a smoother browser experience.
• Non-destructive Export: The original PDF remains unchanged. Annotated files download as a new edited PDF.
• Local Processing: PDF.js runs in a web worker for page loading and rendering. PDF export is performed only when requested.
• Theme Support: Use the built-in dark/light mode switch, with dark mode as the default.
• Toast Notifications: Get clear feedback for loading, placement, export, and error states.

Technologies Used

• React.js: A JavaScript library for building user interfaces.
• Draft.js: A rich text editor framework for React.
• jspdf: A JavaScript library for generating PDF documents in the browser.
• pdfjs-dist: PDF parsing and page rendering with a web worker.
• pdf-lib: Local PDF annotation and export.
• react-toastify: A library for adding toast notifications to React applications.

Getting Started

To run the project locally, follow these steps:

1. Clone this repository to your local machine.
2. Navigate to the project directory in your terminal.
3. Run npm install to install the dependencies.
4. Run npm run dev to start the development server.
5. Open your browser and navigate to PDF Generator React JS Application to view the application.

Usage

Create a Document

1. Select Create document.
2. Compose and format content in the rich-text editor.
3. Click Generate PDF to export the document.

Annotate a PDF

1. Select Annotate PDF.
2. Choose Choose PDF, or drag and drop a PDF into the upload area.
3. Use Hand to pan around the current page.
4. Use Highlight, then click and drag across the area to mark.
5. Draw your signature in the signature panel.
6. Click Place signature on page, then click the target location. You can also drag the signature chip onto the page.
7. Drag a selected mark to move it. Use the purple corner handle to resize it.
8. Use Undo, Redo, or Delete selected mark if needed.
9. Click Export PDF to download a new annotated copy.

Browser-Only Scope

The annotation workspace adds overlays to the original PDF. It does not rewrite existing PDF text line by line. Exact text editing requires a separate text-extraction and reconstruction workflow, and scanned documents additionally require OCR. Keeping this first version overlay-based makes signatures and highlights reliable without a backend server.

Contributing

Contributions are welcome! If you find any bugs or have suggestions for improvements, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by Ali Imran Adil