PDF watermarks are commonly used for branding, document protection, approvals, confidential files, and internal document tracking.
Whether it’s adding a company logo, a “CONFIDENTIAL” label, or a draft watermark, users often need a quick way to modify PDFs without uploading files to external servers.
Modern browsers make this much easier than before. Instead of sending documents to a backend, we can process PDF files directly inside the browser using JavaScript. This keeps documents private while making the tool fast and easy to use.
In this tutorial, you’ll build a browser-based PDF watermark tool using JavaScript.
The tool will support both text and image watermarks, adjustable opacity, rotation, page selection, positioning controls, and downloadable PDF output directly from the browser.
Everything works entirely client-side without any backend.
Table of Contents
How PDF Watermarking Works
A PDF watermark is simply additional text or an image layered on top of an existing PDF page.
In the browser, JavaScript libraries can load PDF pages, modify them visually, and export a new downloadable version.
The process starts when the user uploads a PDF file into the tool. JavaScript then reads the document, loads each page, and applies watermark elements like text or logos on top of the existing content. After positioning and opacity settings are applied, the updated PDF is generated and downloaded directly from the browser.
Everything happens locally inside the browser. This means uploaded documents never leave the user’s device, which improves privacy and security.
Project Setup
This project is intentionally simple. Everything runs directly inside the browser using JavaScript, so no backend server is required.
You only need:
-
an HTML file
-
a JavaScript file
-
a PDF processing library
What Library Are We Using?
We’ll use the PDF-lib library for editing existing PDF documents inside the browser.
Add it using a CDN:
This library allows us to load PDF files directly in the browser, modify existing pages, insert custom text or image watermarks, and finally export the updated document as a new downloadable PDF.
Because everything runs client-side with JavaScript, users can edit PDFs without uploading files to a server.
How to Create the Upload Interface
Start with a basic upload input:
This allows users to upload PDF files directly from the browser.
The tool also includes watermark settings like text input, image upload, opacity controls, positioning, and page selection.
Here’s what the watermark settings panel looks like inside the tool:
How to Add Text Watermarks
Text watermarks are commonly used for labels like “CONFIDENTIAL”, “DRAFT”, or “APPROVED”.
For example:
page.drawText("CONFIDENTIAL", {
x: 200,
y: 300,
size: 48,
opacity: 0.5
});
This inserts watermark text directly onto the PDF page. Users can also customize the appearance of the watermark directly inside the tool.
For text watermarks, users can adjust the font size, change the text color, apply bold or italic styling, control opacity levels, and rotate the watermark at different angles for better visibility and protection.
Here’s an example of text watermark controls inside the tool:
How to Add Image Watermarks
Some users may want to apply logos or branded graphics instead of plain text.
For example:
const image = await pdfDoc.embedPng(imageBytes);
page.drawImage(image, {
x: 180,
y: 250,
width: 120,
height: 120,
opacity: 0.5
});
This inserts an image watermark onto the PDF page.
The tool also supports image scaling controls so users can resize uploaded logos before applying them.
Here’s an example of image watermark settings inside the tool:
Positioning and Opacity Controls
Watermark placement is important for readability and document appearance.
Users may want centered watermarks, corner positioning, or diagonal overlays depending on the document type.
For example:
page.drawText("CONFIDENTIAL", {
x: 220,
y: 250,
rotate: degrees(45),
opacity: 0.5
});
This creates a rotated semi-transparent watermark.
The tool also allows users to adjust watermark positioning and appearance directly inside the browser.
Users can control the X and Y position, change opacity levels, rotate the watermark at different angles, and quickly move the watermark using directional placement controls.
This makes it easier to place watermarks correctly without manually editing the PDF in external software.
Here’s an example of positioning controls inside the tool:
How to Select Pages to Apply
Not every watermark needs to appear on every page. Some users may only want watermarks on specific pages.
For example:
const selectedPages = [1, 3, 5];
The tool allows users to control exactly where the watermark should appear.
For example, a watermark can be applied to every page in the document, only even-numbered pages, only odd-numbered pages, or specific custom page ranges like 1-3,5.
This makes the tool more flexible for real-world use cases such as contracts, invoices, reports, certificates, and branded documents..
Here’s an example of page selection options inside the tool:
How to Generate and Download the Final PDF
Once watermark settings are configured, the browser generates the updated PDF directly inside the browser.
For example:
const pdfBytes = await pdfDoc.save();
Then the updated file becomes downloadable:
download(pdfBytes, "watermarked.pdf");
This process happens locally without uploading files to external servers.
For this example, we’ll apply a custom watermark directly inside the browser.
Step 1: Upload the PDF
Users upload a PDF document into the watermark tool.
Step 2: Preview the Uploaded PDF
After uploading the PDF, the tool generates a live preview directly inside the browser.
Users can navigate through pages using the left and right arrow buttons to review the document before applying the watermark.
This page-by-page preview helps users verify the correct file, check page content, and decide where the watermark should appear.
Here’s how the PDF preview section looks inside the tool:
Step 3: Configure Watermark Settings
Users can choose between text or image watermark mode.
For text watermarks, users can customize font size, color, opacity, and rotation.
For image watermarks, users can upload a logo and adjust image scale before applying it.
Step 4: Position and Apply the Watermark
Users can reposition the watermark visually before generating the final file.
The tool also allows users to control where the watermark should be applied within the document. For example, the watermark can appear on all pages, only even-numbered pages, only odd-numbered pages, or specific custom page ranges.
Opacity and rotation controls help improve visibility without blocking important document content.
This gives users more flexibility when watermarking contracts, invoices, reports, certificates, or branded PDFs.
Step 5: Generate the Watermarked PDF
Once the watermark settings are configured, users can click the generate button to process the document directly inside the browser.
The tool applies the watermark to the selected pages and prepares the updated PDF instantly.
Here’s how the generate PDF button looks inside the tool:
Step 6: Preview and Download the Updated PDF
After processing is complete, the tool displays a live preview of the final watermarked PDF.
Users can review the updated document before downloading it. The interface also shows useful file details such as total pages and final file size.
A rename option is available before downloading the generated PDF.
Here’s an example of the final output preview section:
Important Notes from Real-World Use
When working with large PDF documents, performance and rendering speed become important.
Applying watermarks page-by-page is usually more stable than modifying everything simultaneously.
For example:
for (const page of pdfDoc.getPages()) {
// apply watermark
}
Another useful optimization is lowering image watermark size before embedding large logos. This reduces output file size and improves processing speed.
Opacity is also important. Very dark watermarks can make documents difficult to read, especially on printed pages. Keeping watermark opacity between 0.3 and 0.5 usually works well in real-world situations.
Since everything runs locally inside the browser, uploaded documents remain private and never leave the user’s device.
Common Mistakes to Avoid
One common mistake is applying watermarks at full opacity. This can make the document difficult to read.
For example:
opacity: 1
Instead, use lower opacity values:
opacity: 0.4
Another issue is incorrect watermark positioning. If coordinates are hardcoded incorrectly, the watermark may appear outside the visible page area.
Dynamic positioning usually works better across different page sizes. Large image watermarks can also increase PDF file size significantly. Resizing images before embedding them helps improve performance.
Another common mistake is forgetting to validate uploaded files:
if (!file || file.type !== "application/pdf") {
alert("Please upload a valid PDF file.");
return;
}
This prevents unsupported files from breaking the tool.
Conclusion
In this tutorial, you built a browser-based PDF watermark tool using JavaScript.
You learned how to upload PDF files, apply text or image watermarks, control positioning and opacity, and generate downloadable PDFs directly inside the browser.
More importantly, you saw how modern browsers can handle document editing tasks locally without relying on a backend server.
This approach keeps the tool fast, private, and easy to use.
You can also try the live tool here: All In One Tools PDF Watermark Tool
Once you understand this workflow, you can extend it further with features like digital signatures, PDF annotations, stamping tools, password protection, or advanced document editing.
And that’s where things start getting really interesting.
