--- title: "PDF presentation mode | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/samples/presentation-mode/" md_url: "https://www.nutrient.io/guides/web/samples/presentation-mode.md" last_updated: "2026-05-23T00:08:18.187Z" description: "Learn how to customize the Nutrient Web SDK UI into a fullscreen presentation slide viewer. Visit our guide for additional resources and examples." --- # PDF presentation mode using JavaScript Customize Nutrient Web SDK’s UI into a fullscreen-capable presentation slide viewer. Get additional resources by visiting our guide about [customizing the presentation mode in our JavaScript viewer](/guides/web/viewer/viewing-options/presentation-mode.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"; let _instance; export function load(defaultConfiguration) { const initialViewState = new PSPDFKit.ViewState({ scrollMode: PSPDFKit.ScrollMode.PER_SPREAD, layoutMode: PSPDFKit.LayoutMode.SINGLE, }); let fullscreenElement = defaultConfiguration.container.parentNode; registerFullscreenChangeEvents(); const toolbarItems = [ { type: "pager", }, { type: "spacer", }, { type: "sidebar-thumbnails", }, { type: "search", }, { type: "highlighter", }, ]; // A custom toolbar item to toggle full screen mode. const fullScreenToolbarItem = { type: "custom", title: "Toggle full screen mode", onPress: () => { // You can implement the fullscreen mode on your own. Either see our // functions below how to activate it or look at our guides: // https://www.nutrient.io/guides/web/features/fullscreen-mode/ if (isFullscreenEnabled()) { exitFullscreen(); } else { requestFullScreen(fullscreenElement); } }, }; if (isFullScreenSupported()) { toolbarItems.push(fullScreenToolbarItem); } return PSPDFKit.load({...defaultConfiguration, toolbarItems, toolbarPlacement: PSPDFKit.ToolbarPlacement.BOTTOM, initialViewState, }).then((instance) => { _instance = instance; console.log("Nutrient Web SDK successfully loaded!!", instance); return instance; }); } export function unload() { removeFullscreenChangeEvents(); } function onFullScreenChange() { _instance.setViewState( _instance.viewState.set("showToolbar",!isFullscreenEnabled()) ); } function registerFullscreenChangeEvents() { document.addEventListener("fullscreenchange", onFullScreenChange); document.addEventListener("webkitfullscreenchange", onFullScreenChange); document.addEventListener("mozfullscreenchange", onFullScreenChange); document.addEventListener("MSFullscreenChange", onFullScreenChange); } function removeFullscreenChangeEvents() { document.removeEventListener("fullscreenchange", onFullScreenChange); document.removeEventListener("webkitfullscreenchange", onFullScreenChange); document.removeEventListener("mozfullscreenchange", onFullScreenChange); document.removeEventListener("MSFullscreenChange", onFullScreenChange); } function isFullscreenEnabled() { return ( document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement ); } function isFullScreenSupported() { return ( document.fullscreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled || document.webkitFullscreenEnabled ); } function requestFullScreen(element) { iOSFullscreenFix(element); if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } function exitFullscreen() { if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.exitFullscreen) { document.exitFullscreen(); } } // On iOS we have to make some tweaks to the element since the platform will // overlay specific controls. // // We add padding top so that the element is pushed to the bottom and add a // background color so that the controls become visible. function iOSFullscreenFix(element) { const iOS =!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); if (!iOS) { return; } let firstInvocation = true; function cleanup() { if (firstInvocation) { element.style.paddingTop = "76px"; element.style.backgroundColor = "black"; firstInvocation = false; return; } element.style.paddingTop = "0"; element.style.backgroundColor = "transparent"; document.removeEventListener("webkitfullscreenchange", cleanup); } document.addEventListener("webkitfullscreenchange", cleanup); } ``` 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) - [Create custom overlays on PDFs using JavaScript](/guides/web/samples/custom-overlay-items.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) - [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)