--- title: "PDF custom overlays in JavaScript | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/samples/custom-overlay-items/" md_url: "https://www.nutrient.io/guides/web/samples/custom-overlay-items.md" last_updated: "2026-05-23T00:08:18.187Z" description: "Learn how to extend PDFs by adding custom elements using Nutrient Web SDK. Explore our guide for tips on customizing overlays in your viewer." --- # Create custom overlays on PDFs using JavaScript You can extend PDFs by placing your own custom elements on a page and rendering them with the help of Nutrient Web SDK. Get additional resources by visiting our guide about [customizing overlays in our viewer](/guides/web/customizing-the-interface/creating-custom-overlay-items.md). [Get Started](https://www.nutrient.io/sdk/web/getting-started.md) [All Samples](https://www.nutrient.io/guides/web/samples.md) [Download](https://www.nutrient.io/guides/web/downloads.md) [Launch Demo](https://www.nutrient.io/demo/) --- ```js import PSPDFKit from "@nutrient-sdk/viewer"; export function load(defaultConfiguration) { return PSPDFKit.load(defaultConfiguration).then((instance) => { console.log("Nutrient Web SDK successfully loaded!!", instance); // Every time a user clicks on the page, we show a custom overlay item on // this page. instance.addEventListener("page.press", (event) => { if (event.pageIndex === 0) { instance.setCustomOverlayItem(getOverlayItemForPage1()); } if (event.pageIndex === 1) { instance.setCustomOverlayItem(getOverlayItemForPage2()); } }); return instance; }); } function getOverlayItemForPage1() { // We create a div element with an emoji and a short text. const overlayElement = document.createElement("div"); overlayElement.style.cssText = "width: 300px;background: #FFF; border: 1px #333 solid; font-family: sans-serif; font-size: 14px; padding: 20px;"; overlayElement.innerHTML = "

👋 This is an overlay item that appears when clicking on the first page. Find out what happens when you click on the second page."; // Then we return a PSPDFKit.CustomOverlayItem which uses the overlayElement // that we created above as a node, the pageIndex we get from our onPress // event and define the position on the page. return new PSPDFKit.CustomOverlayItem({ id: "overlay-item-first-page", node: overlayElement, pageIndex: 0, position: new PSPDFKit.Geometry.Point({ x: 300, y: 50 }), }); } function getOverlayItemForPage2() { const overlayElement = document.createElement("div"); // In this case we embedd a video to the page overlayElement.innerHTML = ''; // Then we return a PSPDFKit.CustomOverlayItem which uses the overlayElement // that we created above as a node, the pageIndex we get from our onPress // event and define the position on the page. return new PSPDFKit.CustomOverlayItem({ id: "overlay-item-second-page", node: overlayElement, pageIndex: 1, position: new PSPDFKit.Geometry.Point({ x: 55, y: 220 }), }); } ``` This code sample is an example that illustrates how to use our SDK. Please adapt it to your specific use case. --- ## Related pages - [Add electronic signature images to PDFs using JavaScript](/guides/web/samples/adding-image-electronic-signatures.md) - [Open, view, and annotate on images using JavaScript](/guides/web/samples/annotating-images.md) - [Customize PDF annotation permissions using JavaScript](/guides/web/samples/custom-annotation-permissions.md) - [Customize PDF annotation tooltips using JavaScript](/guides/web/samples/custom-annotation-tooltip.md) - [Add watermarks to PDFs using JavaScript example](/guides/web/samples/add-watermarks-to-pdf-javascript.md) - [Customized Document Editor Toolbar](/guides/web/samples/customized-document-editor-toolbar.md) - [Custom HTML PDF annotations using JavaScript](/guides/web/samples/custom-annotations.md) - [View PDFs in dark mode using JavaScript](/guides/web/samples/dark-mode-pdf-viewer.md) - [Edit PDFs using JavaScript](/guides/web/samples/edit-pdf-javascript.md) - [Customizing PDF text search using JavaScript](/guides/web/samples/customized-pdf-search.md) - [Add electronic signatures to PDFs using JavaScript](/guides/web/samples/electronic-signatures-in-pdf.md) - [Customize the PDF toolbar using JavaScript](/guides/web/samples/customized-pdf-toolbar.md) - [Open PDFs using JavaScript](/guides/web/samples/open-pdf-using-javascript.md) - [PDF form support using JavaScript](/guides/web/samples/javascript-pdf-form.md) - [Handling password-protected PDFs in our JavaScript viewer](/guides/web/samples/password-protected-pdf.md) - [PDF presentation mode using JavaScript](/guides/web/samples/presentation-mode.md) - [Disable PDF editing and annotations](/guides/web/samples/open-read-only-pdf.md) - [PDF text selection using JavaScript](/guides/web/samples/pdf-text-selection-javascript.md) - [Zoom example for our JavaScript PDF viewer](/guides/web/samples/zooming.md) - [Customizing JavaScript PDF printing modes](/guides/web/samples/pdf-printing-modes.md) - [Storing electronic signatures in the browser using JavaScript](/guides/web/samples/stored-electronic-signatures.md) - [Flipbook PDF viewer using JavaScript](/guides/web/samples/flipbook.md) - [Collaborate on PDFs using JavaScript](/guides/web/samples/instant-pdf-collaboration.md) - [JavaScript PDF magazine viewer](/guides/web/samples/javascript-magazine-viewer.md) - [Hide or reveal area on PDFs using JavaScript](/guides/web/samples/hide-reveal-area-in-pdf.md) - [PDF annotation in JavaScript](/guides/web/samples/javascript-pdf-annotations.md) - [Digitally sign a PDF using JavaScript](/guides/web/samples/javascript-digital-signatures.md) - [PDF Collaboration permissions using JavaScript](/guides/web/samples/collaboration-permissions.md) - [Drag-and-drop UI in our JavaScript PDF viewer](/guides/web/samples/drag-and-drop.md) - [Redact PDFs using JavaScript](/guides/web/samples/javascript-pdf-redaction.md) - [Customize the UI for PDF annotations using JavaScript](/guides/web/samples/annotations-inspector.md)