Add and Edit Watermark Showcase Demo Code Sample

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKPackage: SecurityLive demo

Easily add and edit watermarks on PDF documents. Watermark text is displayed as an overlay text on top of the original document.

This demo allows you to:

• Choose your own PDF file
• Add and edit watermark text
• Customize styles of the watermark text

Implementation steps To add watermarking capability with WebViewer:

Step 1: Follow get started guide in your preferred web stack for WebViewer Step 2: Add the ES6 JavaScript sample code provided in this guide

Once you generate your license key, it will automatically be included in your sample code below.

index.js

// ES6 Compliant Syntax
// GitHub Copilot v1.0, GPT-4.1, September 22, 2025
// File: index.js

import WebViewer from '@pdftron/webviewer';

// Add Watermark Demo
// 
// This code demonstrates the document watermarking capability in WebViewer, a JavaScript-based PDF SDK for web applications.
// It allows the user to update the text and easily place an overlay text on top of the original document.
//

const defaultDoc = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/arrest-warrant-signed.pdf';

// Default colors for color picker
const DEFAULT_COLORS = [
    '#EB7532', // Orange
    '#F7D038', // Yellow
    '#A3E048', // Green
    '#519A64', // Dark Green
    '#33BBE6', // Blue
    '#4355DB', // Dark Blue
    '#D23BE7', // Purple
    '#E6261F', // Red
];

// Default watermark properties
let text = 'Hello World!';
let size = 60;
let opacity = 50;
let color = DEFAULT_COLORS[0];
let showTimestamp = true;

// Customize UI section
const customizeUI = async (instance) => {
    // Load default document
    await instance.Core.documentViewer.loadDocument(defaultDoc, {
        extension: 'pdf'
    });

    drawWatermark(instance);
};

const drawWatermark = async (instance) => {
    let watermarks = {
        diagonal: {
            text: text,
            fontSize: size,
            color: color,
            opacity: opacity,
        },
        header: {
            center: '',
            fontSize: 10,
            color: color,
            opacity: 100,
        }
    };

    if (showTimestamp) {
        watermarks.header.center = `${new Date(Date.UTC(2000,0,0,0,0,0,0)).toTimeString()}`;
    }

    instance.Core.documentViewer.setWatermark({
        ...watermarks,
    });

    instance.Core.documentViewer.refreshAll();
    instance.Core.documentViewer.updateView();
};


// WebViewer section
// 
// This code initializes the WebViewer with the basic settings
// that are found in the default showcase WebViewer
//

const searchParams = new URLSearchParams(window.location.search);
const history = window.history || window.parent.history || window.top.history;
const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
const element = document.getElementById('viewer');

WebViewer({
    path: '/lib',
    licenseKey: licenseKey,
}, element).then((instance) => {
    // Enable the measurement toolbar so it appears with all the other tools, and disable Cloudy rectangular tool
    const cloudyTools = [
        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT,
        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT2,
        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT3,
        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT4,
    ];
    instance.UI.enableFeatures([instance.UI.Feature.Measurement, instance.UI.Feature.Initials]);
    instance.UI.disableTools(cloudyTools);

    // Set default toolbar group to Annotate
    instance.UI.setToolbarGroup('toolbarGroup-Annotate');

    // Set default tool on mobile devices to Pan.
    // https://apryse.atlassian.net/browse/WVR-3134
    if (isMobileDevice()) {
        instance.UI.setToolMode(instance.Core.Tools.ToolNames.PAN);
    }

    instance.Core.documentViewer.addEventListener('documentUnloaded', () => {
        if (searchParams.has('file')) {
            searchParams.delete('file');
            history.replaceState(null, '', '?' + searchParams.toString());
        }
    });

    instance.Core.annotationManager.enableAnnotationNumbering();

    instance.UI.NotesPanel.enableAttachmentPreview();

    // Add the demo-specific functionality
    customizeUI(instance).then(() => {
        // Create UI controls after demo is initialized
        createUIControls(instance);
    });
});

// Function to check if the user is on a mobile device
const isMobileDevice = () => {
    return (
        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
            window.navigator.userAgent
        ) ||
        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
            window.navigator.userAgent.substring(0, 4)
        )
    );
}

// Cleanup function for when the demo is closed or page is unloaded
const cleanup = (instance) => {
    if (typeof instance !== 'undefined' && instance.UI) {
        // Clean up any resources if needed
        console.log('Cleaning up complex-generation demo');
    }
};

// Register cleanup for page unload
window.addEventListener('beforeunload', () => cleanup(instance));
window.addEventListener('unload', () => cleanup(instance));

// UI section
//
// Helper code to add controls to the viewer holding the buttons
// This code creates a container for the buttons, styles them, and adds them to the viewer
//

// Watermark text input
const watermarkTextSection = (instance) => {
    const section = document.createElement('div');
    section.className = 'watermark-Text-Section';

    const label = document.createElement('label');
    label.textContent = 'Text';

    section.appendChild(label);

    const input = document.createElement('input');
    input.className = 'watermark-text-input';
    input.type = 'text';
    input.value = text;

    input.addEventListener('input', (e) => {
        text = e.target.value;
        drawWatermark(instance);
    });

    section.appendChild(input);

    return section;
};

// Font Size slider
const fontSizeSlider = (instance) => {
    const section = document.createElement('div');
    section.className = 'font-size-slider-section';

    const label = document.createElement('label');
    label.textContent = 'Font Size';

    section.appendChild(label);

    const slider = document.createElement('input');
    slider.className = 'font-size-slider';
    slider.type = 'range';
    slider.defaultValue = '48';
    slider.value = '48';
    slider.min = '14';
    slider.max = '200';
    slider.step = '1';

    slider.addEventListener('input', (e) => {
        size = parseInt(e.target.value, 10);
        drawWatermark(instance);
    });

    section.appendChild(slider);


    return section;
};

// Opacity slider
const opacitySlider = (instance) => {
    const section = document.createElement('div');
    section.className = 'opacity-slider-section';

    const label = document.createElement('label');
    label.textContent = 'Opacity';

    section.appendChild(label);

    const slider = document.createElement('input');
    slider.className = 'font-size-slider';
    slider.type = 'range';
    slider.defaultValue = '48';
    slider.value = '48';
    slider.min = '0';
    slider.max = '100';
    slider.step = '1';

    slider.addEventListener('input', (e) => {
        opacity = parseInt(e.target.value, 10);
        drawWatermark(instance);
    });


    section.appendChild(slider);

    return section;
};

// Color picker
const colorPicker = (instance) => {
    const wrapper = document.createElement('div');

    const colorDisplay = document.createElement('div');
    colorDisplay.className = 'color-display';

    const colorDisplayLabel = document.createElement('p');
    colorDisplayLabel.className = 'color-display-label';
    colorDisplayLabel.textContent = 'Color:';

    const colorDisplayInput = document.createElement('input');
    colorDisplayInput.className = 'color-display-input';
    colorDisplayInput.type = 'text';
    colorDisplayInput.readOnly = true;

    colorDisplayInput.addEventListener('input', (e) => {
        color = e.target.value;
        drawWatermark(instance);
    });

    colorDisplay.appendChild(colorDisplayLabel);
    colorDisplay.appendChild(colorDisplayInput);

    wrapper.appendChild(colorDisplay);

    const checkboxContainer = document.createElement('div');
    checkboxContainer.className = 'checkbox-container';

    DEFAULT_COLORS.forEach((default_color) => {
        // Actual radio/checkbox input
        const checkbox = document.createElement('input');
        checkbox.className = 'checkbox-input';
        checkbox.name = 'watermark-color';
        checkbox.id = `checkbox-watermark-color-${default_color.replace('#', '')}`;
        checkbox.type = 'radio';
        checkbox.value = default_color;

        if (default_color === color) {
            checkbox.checked = true;
            colorDisplayInput.value = `${default_color}`;
        }

        checkbox.onchange = (e) => {
            if (e.target.checked) {
                colorDisplayInput.value = `${e.target.value}`;
                colorDisplayInput.dispatchEvent(new Event('input'));
            }
        };

        // Hide to use custom checkbox instead
        checkbox.style.display = 'none'; 

        checkboxContainer.appendChild(checkbox);

        // Custom checkbox
        const span = document.createElement('span');
        span.className = 'checkbox-checkmark';
        span.id = `checkmark-watermark-color-${default_color.replace('#', '')}`;

        if (checkbox.checked) {
            span.textContent = '✓'; // U+2713
        }

        span.onclick = () => {
            
            // Update all checkmarks of the same group
            document.querySelectorAll(`input[name=watermark-color]`).forEach((cb) => {
                const checkmark = document.getElementById(`checkmark-watermark-color-${cb.value.replace('#', '')}`);
                if (checkmark) checkmark.textContent = '';
            });
            document.getElementById(`checkmark-watermark-color-${default_color.replace('#', '')}`).textContent = '✓'; // U+2713

            checkbox.checked = true;
            checkbox.onchange({ target: checkbox });
        };

        // Set each checkbox's color to a color in the default colors array
        span.style.backgroundColor = default_color;
        span.style.border = `3px solid ${default_color}`;

        checkboxContainer.appendChild(span);
    });

    wrapper.appendChild(checkboxContainer);

    return wrapper;
};


// Timestamp checkbox
const timestampCheckbox = (instance) => {
    const section = document.createElement('div');
    section.className = 'timestamp-checkbox-section';

    const checkbox = document.createElement('input');
    checkbox.className = 'timestamp-checkbox';
    checkbox.type = 'checkbox';
    checkbox.checked = showTimestamp;

    checkbox.onchange = (e) => {
        showTimestamp = e.target.checked;
        drawWatermark(instance);
    };

    checkbox.onchange = (e) => {
        showTimestamp = e.target.checked;
        drawWatermark(instance);
    };

    section.appendChild(checkbox);

    const label = document.createElement('label');
    label.className = 'timestamp-label';
    label.textContent = 'Show timestamp';

    section.appendChild(label);

    return section;
};

const createUIControls = (instance) => {
    // Create a container for all controls (label, dropdown, and buttons)
    const controlsContainer = document.createElement('div');
    controlsContainer.className = 'controls-container';

    controlsContainer.appendChild(watermarkTextSection(instance));
    controlsContainer.appendChild(fontSizeSlider(instance));
    controlsContainer.appendChild(opacitySlider(instance));
    controlsContainer.appendChild(colorPicker(instance));
    controlsContainer.appendChild(timestampCheckbox(instance));

    // Add the controls container to the viewer
    element.insertBefore(controlsContainer, element.firstChild);
};

index.css

index.css

/* CSS Standards Compliant Syntax */
/* GitHub Copilot v1.0, GPT-4.1, September 22, 2025 */
/* File: index.css */

.picker-title {
    font-weight: 900;
    font-size: 14px;
    line-height: 125%;
    color: #334250;
    letter-spacing: 0;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.watermark-Text-Section label,
.font-size-slider-section label,
.opacity-slider-section label {
  font-weight: 900;
  font-size: 14px;
  line-height: 125%;
  color: #334250;
  letter-spacing: 0;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.color-display {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.color-display-label {
    font-size: 14px;
    line-height: 20px;
    color: #485056;
    letter-spacing: -0.3px;
    margin-right: 5px;
    font-weight: 700;
}

.color-display-input {
    width: 100%;
    min-width: 0px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 200ms;
    border-radius: 6px;
    background-color: #FFFFFF;
    color: #485056;
    border: 1px solid;
    box-sizing: border-box;
    font-size: 14px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    height: 40px;
}

.watermark-text-input {
  width: 100%;
  min-width: 0px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  position: relative;
  appearance: none;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 200ms;
  border-radius: 6px;
  background-color: #FFFFFF;
  color: #485056;
  border: 1px solid;
  box-sizing: border-box;
  font-size: 14px;
  padding-inline-start: 16px;
  padding-inline-end: 16px;
  height: 40px;
}

.font-size-slider-section,
.opacity-slider-section {
  display: flex;
  flex-direction: column;
}

.font-size-slider,
.opacity-slider-section input[type="range"] {
  width: 100%;
}

.checkbox-container {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-checkmark {
    border-radius: 6px;
    width: 24px;
    height: 24px;
    margin: 3px;
    cursor: pointer;
    text-align: center;
    line-height: 18px;
    display: inline-block;
    /* The following will be set dynamically in JS:
     background-color, color, border */
}

.timestamp-checkbox-section {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  position: relative;
  padding-bottom: 10px;
}

.timestamp-checkbox {
  fill: none;
  stroke-width: 2;
  stroke: currentColor;
  stroke-dasharray: 16;
  opacity: 1;
  stroke-dashoffset: 0;
  font-size: 10px;
  transition-property: transform;
  transition-duration: 200ms;
}

.timestamp-label {
  font-size: 14px;
  line-height: 20px;
  color: #485056;
  letter-spacing: -0.3px;
  font-weight: 700;
  margin-inline-start: 8px;
}

.controls-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

View the full sample on GitHub