Client-Side PDF Toolkit, 3D Marketing Mockups & Image Watermarking: The All-in-One Publishing Suite

Creating high-performing digital products does not end with content generation. To drive sales on competitive marketplaces like Amazon KDP, Etsy, and Gumroad, sellers must package their documents, generate photorealistic 3D product display mockups, and protect preview images with watermarks.

Digital Products Maker bundles three dedicated browser-based utility engines:

1. The PDF Toolkit (PdfToolkit.tsx): Zero-upload, client-side PDF document merging and individual page splitting powered by pdf-lib.
2. The 3D Marketing Mockup Generator (MockupGenerator.tsx): High-resolution $1200 \times 900\text{ px}$ canvas renderer creating photorealistic product display graphics across 3 styles.
3. The Image Toolkit (ImageToolkit.tsx): In-browser image resizing, format conversion (JPG/PNG/WebP), and diagonal anti-theft text watermarking.

This technical guide explores the architecture and practical workflows of each tool.

---

1. Zero-Upload Client-Side PDF Toolkit

Traditional online PDF editors require you to upload proprietary manuscript files to external third-party servers, posing intellectual property and privacy risks. The PDF Toolkit in Digital Products Maker executes all operations strictly within the client's WebAssembly / JavaScript runtime using pdf-lib:

graph TD
    A[Upload Source PDFs] --> B{Operation Mode}
    B -->|Merge Mode: >= 2 Files| C[Initialize Master PDFDocument]
    C --> D[Loop ArrayBuffers & copyPages]
    D --> E[Export: merged_document.pdf]
    B -->|Split Mode: Exactly 1 File| F[Read Total Page Count N]
    F --> G[Extract Independent Pages 1..N]
    G --> H[Export: page_1.pdf, page_2.pdf ... page_N.pdf]

A. PDF Merging Algorithm

1. Validation: Checks that files.length >= 2.
2. Document Initialization: Calls PDFDocument.create().
3. Page Array Aggregation: Sequentially reads each uploaded file as an ArrayBuffer, loads it via PDFDocument.load(), copies all page indices via copyPages(), and appends them to the master document.
4. Binary Save & Trigger: Saves the compiled bytes into an application/pdf Blob and triggers a direct browser download as merged_document.pdf.

B. PDF Splitting Algorithm

1. Validation: Validates that exactly 1 PDF is supplied.
2. Sequential Extraction: Determines pageCount and loops from $i = 0$ to $\text{pageCount} - 1$.
3. Single-Page Isolation: For each index, creates an isolated PDFDocument, copies page $i$, and triggers a download of page_{i+1}.pdf.

---

2. 3D Marketing Mockup Generator Architecture

Eye-catching listing images are the #1 driver of click-through rates (CTR) on Etsy and Gumroad. The Mockup Generator renders $1200 \times 900\text{ px}$ high-resolution commercial mockups using procedural HTML5 Canvas rendering across three distinct display templates:

graph TD
    A[Cover Image Data] --> B{Selected Template}
    B -->|Template 1: Book Flat Lay| C[380x540px Book, -0.05 rad Tilt, Particle BG, 40px Shadow]
    B -->|Template 2: Book Standing 3D| D[340x500px Book, 30px Left Spine Perspective, 12% Floor Reflection]
    B -->|Template 3: Tablet Screen| E[520x700px Chassis, 24px Bezel, Diagonal Glass Glare]
    C --> F[Canvas toBlob Export: mockup-style.png]
    D --> F
    E --> F

Template Breakdown & Canvas Specs

Template ID	Canvas Resolution	Visual Framing & Geometry	Lighting, Shadows & Special Effects
Book Flat Lay (book-flat)	1200 x 900 px	$380 \times 540\text{ px}$ book centered, rotated by -0.05 radians (-2.86° tilt)	Radial gradient background (#1a1a2e to #16213e) with 200 procedural dust particles, 40px blur drop shadow (rgba(0,0,0,0.5)), and 2px stroke border.
Book Standing 3D (book-standing)	1200 x 900 px	$340 \times 500\text{ px}$ front cover + 30px left perspective spine polygon	Slate studio backdrop (#0f172a to #1e293b), 50px drop shadow, and mirrored floor reflection scaled at (1, -0.3) with 12% opacity.
Tablet Screen (tablet)	1200 x 900 px	$520 \times 700\text{ px}$ device chassis with 24px rounded corners & 20px screen bezel	Deep dark gradient (#111827 to #1f2937), 40px chassis elevation shadow, and a diagonal glass glare gradient simulating screen reflections.

---

3. Image Toolkit: Resizing, Conversion & Diagonal Watermarking

The Image Toolkit (ImageToolkit.tsx) solves three common digital asset preparation tasks:

1. Pixel-Perfect Resizing: Enforce exact pixel dimensions (Width $\times$ Height) for marketplace thumbnail guidelines (e.g., $2000 \times 2000\text{ px}$ for Etsy square listings).
2. Instant Format Conversion: Converts heavy PNGs or uncompressed JPGs into modern, lightweight WebP (0.90 quality), reducing file sizes by up to 75% without perceptible visual loss.
3. Diagonal Anti-Theft Watermarking:
   • Automatically calculates dynamic font sizing: $\text{FontSize} = \max(20,; \text{Width} \times 0.05)\text{ px}$.
   • Rotates text by -45 degrees across the canvas center.
   • Applies semi-transparent white text (rgba(255, 255, 255, 0.30)) with a dark outline stroke (rgba(0, 0, 0, 0.20)) to ensure readability over both light and dark imagery.

---

4. Step-by-Step Publishing Workflow

1. Prepare Your Book Interior: Generate your content and use the PDF Toolkit to merge custom copyright/intro pages with your generated chapters.
2. Generate Listing Mockups: Upload your finished cover artwork to the Mockup Generator, switch between the 3D Standing Book and Tablet styles, and click Download Mockup (PNG) for your primary Etsy listing photo.
3. Protect Preview Samples: Open the Image Toolkit, upload interior teaser pages, add your brand URL as a diagonal watermark, and export lightweight WebP images for your product listing gallery.