Open and display PDFs in the browser using JavaScript

Use JavaScript to open PDFs from a number of input sources, including remote URLs, blobs, array buffers, local storage, and Base64 data. Opened PDFs can be rendered in the viewer, annotated, and edited.

Quick start

Open a PDF document in a few lines of code:

NutrientViewer.load({
  container: "#pspdfkit",
  document: "/path/to/document.pdf"
})
  .then((instance) => {
    console.log("Document loaded successfully");
  })
  .catch((error) => {
    console.error("Failed to load document:", error.message);
  });

The container property specifies the DOM element where the viewer will be rendered. The document property can be a URL, ArrayBuffer, Blob, or Base64 data URL.

Integration checklist

Use the checklist below to validate your setup before moving to production.

• Verify asset mode/path (useCDN or baseUrl).
• Confirm entrypoint import and viewer mount container.
• Unload before reload when switching documents.
• Reapply toolbar/custom UI configuration after each load.
• Confirm export behavior matches your workflow.

For a complete production flow (app-shell layout, switch lifecycle, and runnable project setup), refer to the embedding Web SDK in a dashboard/app shell guide.

Key capabilities

• Local storage or remote URL — Open files that are stored anywhere
• Input data types — Load from a blob, ArrayBuffer, or Base64
• Secured PDFs — Open encrypted or password-protected files
• Client-side — Open PDFs directly in the browser (no server needed)
• Extendable — Add annotation, signing, editing, forms, and more

Guides for opening a document

Open from a remote URL
How to open a PDF document from a remote URL

Open from a blob
How to open a PDF document from a blob

Open from an ArrayBuffer
How to open a PDF document from an ArrayBuffer

Open from local storage
How to open a PDF document from local storage

Open from Base64 data
How to open a PDF document from Base64 data

Open from Document Engine
How to open a PDF document from Document Engine

Temporary storage for PDF downloads
How temporary storage works for URL-loaded PDFs in the browser

Open password-protected PDFs
How to transparently open password-protected PDFs

Open HTTP authenticated PDFs
How to transparently open PDFs protected by HTTP authentication

Open encrypted PDFs
How to decrypt a PDF that uses custom encryption

Open on a specific page
How to open a PDF and show a specific page after loading

File type support

• PDF, PDF/A (1, 2, 3, 4)
• MS Office documents (DOCX, DOC, DOTX, DOCM, XLSX, XLS, XLSM, PPTX, PPT, PPTM)
• PNG, JPEG, JPG, TIFF, TIF
• Text (TXT)

Framework support

Nutrient Web SDK is compatible with all JavaScript frameworks, including React, Angular, Vue.js, Svelte, Blazor, Next.js, Nuxt.js, TypeScript, and jQuery. It’s also compatible with Electron, ASP.NET, PHP, Laravel, Ruby on Rails, and HTML5. It just needs a DOM container to append the viewer, which is possible with any framework.