---
title: "Open PDF in JavaScript | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/samples/open-pdf-using-javascript/"
md_url: "https://www.nutrient.io/guides/web/samples/open-pdf-using-javascript.md"
last_updated: "2026-05-23T00:08:18.187Z"
description: "Discover how to launch a default PDF viewer UI in a web browser and load documents with our JavaScript guide. Explore more resources today!"
---

# Open PDFs using JavaScript

Launch the default PDF viewer UI and load a PDF document in a web browser with our default configuration. Get additional resources by visiting our [JavaScript PDF viewer library](/guides/web/viewer.md) or our [open PDFs in a browser guide](/guides/web/open-a-document.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";

import { toolbarCustomBreakpoint } from "../../_server/components/example/utils";

export function load(defaultConfiguration) {
  // Nutrient Web SDK freezes the Options object to prevent changes after the first load
  if (!Object.isFrozen(PSPDFKit.Options)) {
    PSPDFKit.Options.BREAKPOINT_MD_TOOLBAR = toolbarCustomBreakpoint;
  }

  const items = defaultConfiguration.toolbarItems.concat([
    { type: "content-editor" },
  ]);

  return PSPDFKit.load({...defaultConfiguration,
    enableHistory: true,
    toolbarItems: items.reduce((acc, item) => {
        if (item.type === "polyline") {
          return acc.concat([item, { type: "undo" }, { type: "redo" }]);
        }

        if (item.type === "zoom-mode") {
          return acc.concat([
            item,
            { type: "undo", dropdownGroup: "history" },
            { type: "redo", dropdownGroup: "history" },
          ]);
        }

        return acc.concat([item]);
      }, []).concat([
        { type: "cloudy-rectangle", dropdownGroup: "shapes" },
        { type: "dashed-rectangle", dropdownGroup: "shapes" },
        { type: "cloudy-ellipse", dropdownGroup: "shapes" },
        { type: "dashed-ellipse", dropdownGroup: "shapes" },
        { type: "dashed-polygon", dropdownGroup: "shapes" },
        { type: "content-editor", dropdownGroup: "editor" },
        { type: "form-creator", dropdownGroup: "editor" },
        { type: "measure", dropdownGroup: "editor" },
        { type: "document-comparison", dropdownGroup: "editor" },
      ]),
  }).then((instance) => {
    console.log("Nutrient Web SDK successfully loaded!!", instance);

    return instance;
  });
}

```

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)
- [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)