# JavaScript PDF magazine viewer

Create a PDF magazine viewer that supports text highlight, PDF bookmarks, page thumbnails, page zoom, keyboard navigation, and fullscreen mode. Get additional resources by visiting our other relevant guides: [JavaScript magazine viewer](/guides/web/viewer/viewing-options/magazine-viewer.md), [viewer zooming options](/guides/web/viewer/zooming.md), and [PDF thumbnail preview](/guides/web/user-interface/sidebar/thumbnail-preview.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) {
  // Disable continuous scroll and default to double page mode.
  const initialViewState = new PSPDFKit.ViewState({
    scrollMode: PSPDFKit.ScrollMode.PER_SPREAD,
    layoutMode: PSPDFKit.LayoutMode.DOUBLE,
    keepFirstSpreadAsSinglePage: true,
  });

  // A custom toolbar item to toggle full screen mode.
  const fullScreenToolbarItem = {
    type: "custom",
    title: "Toggle full screen mode",
    onPress: () => {
      // We use the parent container of our mount node. This is necessary for
      // the iOS specific fixes applied in the iOSFullscreenFix() function.
      const container = defaultConfiguration.container.parentNode;

      // 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(container);
      }
    },
  };

  // Customize the toolbar.
  let toolbarItems = [
    { type: "sidebar-bookmarks", dropdownGroup: null },
    { type: "sidebar-thumbnails", dropdownGroup: null },
    { type: "highlighter" },
    { type: "zoom-in" },
    { type: "zoom-out" },
    { type: "spacer" },
    { type: "search" },
  ];

  // Only add the fullscreenToolbarItem if the browser supports fullscreen mode
  if (isFullScreenSupported()) {
    toolbarItems.push(fullScreenToolbarItem);
  }

  return PSPDFKit.load({...defaultConfiguration,
    toolbarPlacement: PSPDFKit.ToolbarPlacement.BOTTOM,
    initialViewState,
    toolbarItems,
  }).then((instance) => {
    console.log(
      "Nutrient Web SDK successfully loaded!!",
      instance,
      "\nWhen fullscreen is supported the toolbar should be placed to the bottom to improve usability"
    );

    return instance;
  });
}

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

- [Handling password-protected PDFs in our JavaScript viewer](/guides/web/samples/password-protected-pdf.md)
- [Storing electronic signatures in the browser using JavaScript](/guides/web/samples/stored-electronic-signatures.md)
- [PDF text selection using JavaScript](/guides/web/samples/pdf-text-selection-javascript.md)
- [PDF presentation mode using JavaScript](/guides/web/samples/presentation-mode.md)
- [Open, view, and annotate on images using JavaScript](/guides/web/samples/annotating-images.md)
- [Add electronic signature images to PDFs using JavaScript](/guides/web/samples/adding-image-electronic-signatures.md)
- [Add watermarks to PDFs using JavaScript example](/guides/web/samples/add-watermarks-to-pdf-javascript.md)
- [Custom HTML PDF annotations using JavaScript](/guides/web/samples/custom-annotations.md)
- [Customizing PDF text search using JavaScript](/guides/web/samples/customized-pdf-search.md)
- [Customized Document Editor Toolbar](/guides/web/samples/customized-document-editor-toolbar.md)
- [Collaborate on PDFs using JavaScript](/guides/web/samples/instant-pdf-collaboration.md)
- [PDF Collaboration permissions using JavaScript](/guides/web/samples/collaboration-permissions.md)
- [Open PDFs using JavaScript](/guides/web/samples/open-pdf-using-javascript.md)
- [Zoom example for our JavaScript PDF viewer](/guides/web/samples/zooming.md)
- [Create custom overlays on PDFs using JavaScript](/guides/web/samples/custom-overlay-items.md)
- [Edit PDFs using JavaScript](/guides/web/samples/edit-pdf-javascript.md)
- [Disable PDF editing and annotations](/guides/web/samples/open-read-only-pdf.md)
- [Customize the PDF toolbar using JavaScript](/guides/web/samples/customized-pdf-toolbar.md)
- [Add electronic signatures to PDFs using JavaScript](/guides/web/samples/electronic-signatures-in-pdf.md)
- [Customize PDF annotation tooltips using JavaScript](/guides/web/samples/custom-annotation-tooltip.md)
- [Customizing JavaScript PDF printing modes](/guides/web/samples/pdf-printing-modes.md)
- [Customize PDF annotation permissions using JavaScript](/guides/web/samples/custom-annotation-permissions.md)
- [View PDFs in dark mode using JavaScript](/guides/web/samples/dark-mode-pdf-viewer.md)
- [PDF form support using JavaScript](/guides/web/samples/javascript-pdf-form.md)
- [PDF annotation in JavaScript](/guides/web/samples/javascript-pdf-annotations.md)
- [Flipbook PDF viewer using JavaScript](/guides/web/samples/flipbook.md)
- [Hide or reveal area on PDFs using JavaScript](/guides/web/samples/hide-reveal-area-in-pdf.md)
- [Digitally sign a PDF using JavaScript](/guides/web/samples/javascript-digital-signatures.md)
- [Redact PDFs using JavaScript](/guides/web/samples/javascript-pdf-redaction.md)
- [Drag-and-drop UI in our JavaScript PDF viewer](/guides/web/samples/drag-and-drop.md)
- [Customize the UI for PDF annotations using JavaScript](/guides/web/samples/annotations-inspector.md)