Free Online PDF Watermarker Utility

Overview

A high-performance, browser-based tool designed to allow users to apply text or image watermarks to their PDF documents. The application guarantees privacy by performing all manipulations client-side using Web APIs and the pdf-lib library. It features a clean, professional aesthetic and a user-friendly interface optimized for efficiency.

Key Features

• Client-Side Processing: Files never leave the user's browser, ensuring total privacy.
• Dual Watermarking Options: Support for text-based watermarks (customizable font, size, color, rotation, and opacity) and image-based watermarks (PNG/JPG).
• Placement Controls: Granular control over positioning (Center, Corners, Diagonal) and repetition (single stamp or tiled pattern).
• Real-time Preview: Visual feedback before applying changes to the final document.
• Batch-Style Performance: Optimized to handle multipage documents efficiently without refreshing or server round-trips.

UI Layout & Design

• Header: Simple, clean navigation title "Free Online PDF Watermarker".
• Main Interface: A drag-and-drop file upload area with a visual state (idle/file-loaded).
• Configuration Panel: A sidebar (or distinct section for mobile) containing:
  • Watermark Type selector (Text vs Image).
  • Text input/Image upload field.
  • Slider controls for Opacity and Rotation.
  • Position alignment buttons (grid layout).
• Action Bar: Primary "Apply Watermark" button (Indigo primary color) and "Download Processed PDF" button.
• Aesthetic: Minimalist light-mode design using Tailwind-inspired spacing, soft gray shadows, and rounded corners (border-radius: 8px).

Color Palette

• Background: #FFFFFF (Pure White)
• Primary Actions: #4F46E5 (Indigo) for primary buttons.
• Surface/Card: #F9FAFB (Gray-50) for secondary sections.
• Text/Border: #374151 (Gray-700) for primary text; #D1D5DB (Gray-300) for borders.

Developer Constraints & Technical Requirements

• Architecture: Single-file HTML (include CSS/JS via internal style/script tags).
• Libraries: Use pdf-lib via CDN for PDF manipulation. Use FileSaver.js via CDN for triggering downloads.
• Sandboxing:
  • NO localStorage, sessionStorage, or cookies.
  • State must be managed via JavaScript objects in memory.
  • Use Blob URLs for previewing and downloading; do not rely on local persistent storage.
• Interactivity: Use CSS transitions for button hover states (0.2s ease-in-out). Implement a loading spinner overlay for the processing phase to ensure UX during heavy tasks.
• Responsiveness: Use Flexbox/Grid to collapse the Configuration Panel below the File Preview area on screens smaller than 768px.