# JavaScript PDF viewer library

Nutrient Web SDK provides a powerful JavaScript PDF viewer with client-side rendering support for PDF, Word, Excel, PowerPoint, JPEG, PNG, and TIFF files. Files render directly in any [modern browser](https://www.nutrient.io/guides/web/pspdfkit-for-web/browser-support.md) without requiring external dependencies or MS Office licenses. Developers can embed a customizable PDF viewer into any JavaScript-based web application, with high performance and flexibility.

[Try for free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch demo](https://www.nutrient.io/demo/)

## Limitations and known issues

- **Browser support** — Requires modern evergreen browsers with WebAssembly and worker support; legacy browsers and older embedded WebViews aren’t supported.

- **Large file performance** — Very large PDFs or Office files can take longer to load and render; initial render time grows with page count, images, and complex vectors.

- **Memory usage** — Rendering is client-side, so large documents or multiple instances can consume significant RAM and may cause tab reloads on memory-constrained devices.

For detailed workarounds, see [troubleshooting](https://www.nutrient.io/guides/web/troubleshoot.md).

## Essential guides

---

**Embed in app shell**

Canonical integration flow for dashboard layouts, switching lifecycle, and runnable setup

[Read more](https://www.nutrient.io/guides/web/viewer/embed-in-dashboard-app-shell.md)

---

**Streaming**

Stream document pages to the viewer for instant on-demand access and lightning-fast viewing, searching, and scrolling in the browser

[Read more](https://www.nutrient.io/guides/web/viewer/streaming.md)

---

**Page layout and scroll**

Configure single-page or double-page spreads, and customize scrolling modes for a responsive, customizable document viewer interface

[Read more](https://www.nutrient.io/guides/web/customizing-the-interface/document-presentation-options.md)

---

**Mobile responsive**

Explore the mobile-friendly viewer capabilities, ensuring optimal viewing and usability across devices of all sizes and orientations

[Read more](https://www.nutrient.io/guides/web/viewer/mobile-responsive.md)

---

**Accessibility**

Learn about built-in assistive technology-friendly features that make your document viewer accessible and inclusive

[Read more](https://www.nutrient.io/guides/web/viewer/accessibility.md)

---

**Zooming**

Manage zoom levels and configure automatic zoom to enhance usability in the document viewer

[Read more](https://www.nutrient.io/guides/web/viewer/zooming.md)

## Performance

---

**Best practices for performance**

Discover the most effective ways to build a fast and responsive JavaScript PDF viewer

[Read more](https://www.nutrient.io/guides/web/best-practices/performance.md)

---

**Efficient annotation handling**

Learn how to transfer and synchronize PDF annotations efficiently

[Read more](https://www.nutrient.io/guides/web/performance/annotation-diff.md)

---

**Advanced caching techniques**

Improve load times with smart asset caching strategies for seamless document viewing

[Read more](https://www.nutrient.io/guides/web/best-practices/caching-on-the-web.md)

## Viewing options

---

**Fullscreen PDF viewer**

Implement a fullscreen mode using the fullscreen API for an immersive document viewing experience

[Read more](https://www.nutrient.io/guides/web/features/fullscreen-mode.md)

---

**Magazine-style PDF viewer**

Create a flipbook-style magazine viewer for smooth, interactive page transitions

[Read more](https://www.nutrient.io/guides/web/viewer/viewing-options/magazine-viewer.md)

---

**Presentation mode for PDFs**

Display presentation slides in a PDF viewer, optimizing readability and navigation

[Read more](https://www.nutrient.io/guides/web/viewer/viewing-options/presentation-mode.md)

## Fonts

---

**Understanding fonts in PDFs**

Learn how fonts impact text rendering, formatting, and display in a JavaScript PDF viewer

[Read more](https://www.nutrient.io/guides/web/viewer/fonts/introduction.md)

---

**Supported PDF fonts**

Explore supported fonts in Nutrient Web SDK, ensuring accurate text representation

[Read more](https://www.nutrient.io/guides/web/viewer/fonts/support.md)

---

**Dynamic font substitution**

Learn how to replace missing fonts in PDFs dynamically for seamless rendering

[Read more](https://www.nutrient.io/guides/web/viewer/fonts/substitution.md)

---

**Custom fonts in PDFs**

Configure and integrate custom fonts for precise PDF text rendering in your web application

[Read more](https://www.nutrient.io/guides/web/features/custom-fonts.md)

## Rendering

---

**Rendering PDF pages**

Learn how to convert and display PDF pages as images for seamless viewing

[Read more](https://www.nutrient.io/guides/web/features/rendering-pdf-pages.md)

---

**Rendering canvas-based PDFs**

Render a single PDF page as an image and insert it into a canvas element

[Read more](https://www.nutrient.io/guides/web/viewer/rendering/render-in-canvas.md)

---

**PDF coordinate space**

Understand how to map and convert coordinates within a PDF document for precise placement

[Read more](https://www.nutrient.io/guides/web/pspdfkit-for-web/coordinate-spaces.md)

---

**Rendering watermarks in PDFs**

Add and customize watermarks on PDF documents for branding and security

[Read more](https://www.nutrient.io/guides/web/features/watermarks.md)

## Additional viewer features

---

**Open Office documents**

Learn how to view Word, Excel, and PowerPoint files seamlessly in the PDF viewer

[Read more](https://www.nutrient.io/guides/web/viewer/office-documents.md)

---

**Displaying images in the viewer**

Render high-resolution images and photos directly within the document viewer

[Read more](https://www.nutrient.io/guides/web/viewer/images.md)

---

**PDF JavaScript support**

Enable interactive PDF functionality with JavaScript support

[Read more](https://www.nutrient.io/guides/web/features/javascript.md)

---

**Document permissions**

Configure fine-grained access controls and security settings for your documents

[Read more](https://www.nutrient.io/guides/web/features/document-permissions.md)

## File type support

Nutrient Web SDK enables you to load, save, convert, and edit 15 different [PDF](https://www.nutrient.io/guides/web/viewer/pdf.md), document, [Office](https://www.nutrient.io/guides/web/viewer/office-documents.md), and [image](https://www.nutrient.io/guides/web/viewer/images.md) file types.

Opening MS Office and image files requires the **Office Files and Image Documents** components to be enabled in your license.

`PDF documents`

`Images`

`Office documents`

## Framework support

The document viewer is compatible with any JavaScript framework, including React, Angular, Vue.js, Svelte, Blazor, Next.js, TypeScript, Nuxt.js, and jQuery. It’s also compatible with Electron, ASP.NET, PHP, Laravel, Rails, and HTML5.

## Open and view PDFs with Nutrient Web SDK

To load PDFs, use the `load` method, which takes a [`Configuration` object](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html) as its parameter. This object specifies where the document is loaded on the page, the path to the source document, the license key, and more. For more information, refer to the [guides on loading a document](https://www.nutrient.io/guides/web/open-a-document.md#guides-for-opening-a-document).

```js

NutrientViewer.load({
	container: "#pspdfkit",

	document: "source.pdf",
	licenseKey: "YOUR_LICENSE_KEY"
});

```

## FAQ

#### What is Nutrient Web SDK?

Nutrient Web SDK is a powerful JavaScript PDF rendering engine that offers a customizable and responsive PDF viewer for web applications.

#### What file types does Nutrient Web SDK support?

Nutrient Web SDK supports PDF, PDF/A, Word, Excel, PowerPoint, TIFF, PNG, and JPG file types for seamless viewing.

#### Is Nutrient Web SDK compatible with all browsers?

Yes, it’s fully compatible with [all modern browsers and devices](/guides/web/pspdfkit-for-web/browser-support.md).

#### Can I customize the UI of Nutrient’s PDF viewer?

Absolutely! Adjust buttons, layouts, and the design to suit your application’s needs.

#### Do I need a server to use Nutrient Web SDK?

No, Nutrient Web SDK can run locally in the browser, eliminating the need for server dependency. If you want more enhanced functionalities, you can combine Nutrient Web SDK with [Document Engine](/guides/document-engine.md) — either self-hosted or managed — to offload document storing, rendering, and editing from the browser, streaming only essential data to the web viewer.

**Call to Action**

Start your free trial for unlimited access and expert support.

[Learn More](https://www.nutrient.io/sdk/web/getting-started/other-frameworks/javascript.md)
---

## Related pages

- [Embed Web SDK in a dashboard/app shell](/guides/web/viewer/embed-in-dashboard-app-shell.md)
- [JavaScript image viewer library](/guides/web/viewer/images.md)
- [Enhance PDF viewing with linearized downloading](/guides/web/viewer/linearized-downloads.md)
- [Client authentication and session renewal](/guides/web/viewer/client-authentication.md)
- [Office document viewing in JavaScript](/guides/web/viewer/office-documents.md)
- [Mobile responsive JavaScript PDF viewer](/guides/web/viewer/mobile-responsive.md)
- [Create custom annotation toggle button](/guides/web/viewer/custom-annotation-toggle.md)
- [Page layout and scroll options in our JavaScript PDF viewer](/guides/web/customizing-the-interface/document-presentation-options.md)
- [JavaScript PDF viewer library](/guides/web/viewer/pdf.md)
- [JavaScript Support in our PDF viewer](/guides/web/features/javascript.md)
- [macOS/Linux](/guides/web/viewer/troubleshooting.md)
- [PDF document streaming in JavaScript](/guides/web/viewer/streaming.md)
- [Enable or disable permissions in our JavaScript viewer](/guides/web/features/document-permissions.md)
- [Zoom options in our JavaScript PDF viewer](/guides/web/viewer/zooming.md)

## Pages in this section

- [Fullscreen mode in our JavaScript PDF viewer](/guides/web/features/fullscreen-mode.md)
- [Magazine viewer using JavaScript](/guides/web/viewer/viewing-options/magazine-viewer.md)
- [Customizing the presentation mode in our JavaScript viewer](/guides/web/viewer/viewing-options/presentation-mode.md)
- [Text-to-speech conversion from PDF using JavaScript](/guides/web/viewer/accessibility/text-to-speech.md)
- [Accessibility support for our JavaScript PDF viewer](/guides/web/viewer/accessibility.md)
- [Load fonts on demand in PDFs using JavaScript](/guides/web/viewer/fonts/dynamic-fonts.md)
- [Embed custom fonts in our JavaScript PDF viewer](/guides/web/features/custom-fonts.md)
- [Substitute fonts in PDFs using JavaScript](/guides/web/viewer/fonts/substitution.md)
- [Introduction to PDF fonts](/guides/web/viewer/fonts/introduction.md)
- [PDF viewer supported fonts](/guides/web/viewer/fonts/support.md)
- [Rendering PDF pages in our JavaScript PDF viewer](/guides/web/features/rendering-pdf-pages.md)
- [Find and convert PDF coordinates with JavaScript](/guides/web/pspdfkit-for-web/coordinate-spaces.md)
- [View and edit PDF forms online](/guides/web/viewer/rendering/pdf-forms.md)
- [Render watermarks in our JavaScript PDF viewer](/guides/web/features/watermarks.md)
- [Render pages on canvas in our JavaScript PDF viewer](/guides/web/viewer/rendering/render-in-canvas.md)

