Watermarks

A watermark is text stamped diagonally across every page of the PDF. Add one by setting the watermark field in PDFConfig.

Basic Watermark

import { useEasyPdf } from "@easypdf/react";

const WithWatermark = () => {
  const { pdfRef, downloadPDF, isLoading } = useEasyPdf({
    watermark: {
      text: "CONFIDENTIAL",
      fontSize: 60,
      color: "#FF0000",
      opacity: 0.15,
      angle: -45,
    },
  });

  return (
    <div>
      <button onClick={() => downloadPDF(pdfRef)} disabled={isLoading}>
        {isLoading ? "Generating..." : "Download PDF"}
      </button>

      <div ref={pdfRef}>
        <h1>Confidential Document</h1>
        <p>This document contains sensitive information.</p>
      </div>
    </div>
  );
};

Watermark Options

Option	Type	Default	Description
text	string	—	Watermark text (required)
fontSize	number	20	Font size in pt
color	string	"#888888"	Hex color
opacity	number	0.3	0 = invisible, 1 = solid
angle	number	-45	Rotation in degrees

Common Presets

Draft

watermark: {
  text: "DRAFT",
  fontSize: 72,
  color: "#FF0000",
  opacity: 0.12,
  angle: -45,
}

Sample / Proof

watermark: {
  text: "SAMPLE",
  fontSize: 60,
  color: "#888888",
  opacity: 0.2,
  angle: -30,
}

Paid

watermark: {
  text: "PAID",
  fontSize: 80,
  color: "#00AA00",
  opacity: 0.15,
  angle: -45,
}

Conditional Watermark

Apply different watermarks based on document status:

function DocumentExporter({ status }: { status: "draft" | "final" }) {
  const watermarkConfig =
    status === "draft"
      ? { text: "DRAFT", color: "#FF0000", opacity: 0.15 }
      : { text: "CONFIDENTIAL", color: "#888888", opacity: 0.12 };

  const { pdfRef, downloadPDF, isLoading } = useEasyPdf({
    watermark: watermarkConfig,
  });

  return (
    <div>
      <button onClick={() => downloadPDF(pdfRef)} disabled={isLoading}>
        {isLoading ? "Generating..." : "Download"}
      </button>
      <div ref={pdfRef}>{/* content */}</div>
    </div>
  );
}

Watermark at Call Level

Override the watermark per individual download without changing the hook default:

const { pdfRef, downloadPDF } = useEasyPdf();

// Regular download
await downloadPDF(pdfRef, { filename: "document.pdf" });

// Draft download with watermark
await downloadPDF(pdfRef, {
  filename: "draft.pdf",
  watermark: { text: "DRAFT", opacity: 0.2 },
});

Best Practices

• Opacity 0.1–0.2 — subtle enough not to obscure text
• Angle -45° — standard diagonal; use 0° for a horizontal stamp
• Font size 60–80pt — large enough to be visible across the full page

Related

• Configuration Guide
• Headers and Footers
• Basic Usage