Flexible React document viewer for all file types

Nutrient Web SDK enables seamless client-side rendering of PDF, Word, Excel, and PowerPoint documents directly within any supported browser, eliminating the need for external dependencies or Microsoft Office licenses. Our flexible React document viewer enables developers to quickly embed a customizable, responsive, and cross-browser-compatible PDF and Office file viewer into any React-based web application. This guide provides an overview of the viewer’s capabilities and how to integrate it into your React project.

To begin integrating Nutrient Web SDK into your React project, you’ll need to install the SDK and configure it within your environment. Detailed instructions covering installation via npm or yarn, along with the necessary imports and setup procedures for your React project, are provided in our comprehensive getting started guide. The guide will walk you through the step-by-step process, ensuring a smooth experience to implement a React document viewer.

Try for free Launch demo

Nutrient SDKs are trusted by world’s most popular applications, including Autodesk, Disney, UBS, Dropbox, IBM, and Lufthansa. Nutrient’s powerful solutions enable seamless integration of PDF editing features into your applications, delivering reliability and efficiency to world-class enterprises.

Key capabilities

PDF and Microsoft Office support — Effortlessly open PDF, Word, Excel, and PowerPoint documents for seamless document viewing
Client-side document rendering — All rendering and processing happens on the client, with no server dependency required
Customizable user interface (UI) — Adjust the interface to match your branding by adding or hiding buttons and controls
Responsive design — Enjoy a mobile-friendly document viewer that auto-adjusts to fit all screen sizes
Accessibility features — Fully compatible with assistive technologies to ensure inclusive usability
Cross-browser compatibility — Works seamlessly across all modern browsers and devices for broader reach
Extendable features — Convert documents to PDF to enable annotations, editing, and collaborative workflows
Signatures — Securely add electronic and digital signatures to PDF documents. Create, validate, and display digital signatures using our APIs. Enable hand-drawn eSignatures via an intuitive UI.
Comprehensive annotation support — Access 17 annotation types, like highlight, text, and ink. Create, edit, and delete annotations via APIs or the UI, and manage them with XFDF or JSON import/export and advanced styles like cloudy borders.
Advanced form handling — Fill forms, export or embed data, and create forms with drag-and-drop or APIs. Enable JavaScript-based validation for automated workflows.
Thumbnail rendering — Render PDF pages as images for thumbnails, ideal for quick navigation or previews in viewer applications.
Bookmark and table of contents management — Manage bookmarks and outlines with JavaScript or a customizable UI for hierarchical navigation and context-specific links.
Printing and downloading control — Restrict printing and downloading with toolbar configuration, text annotations, and password protection for secure document sharing.

Viewing Microsoft Office and image files requires the Office Files and Image Documents components to be enabled in your license.

File type support

Comprehensive PDF support — PDF, including PDF/A formats (1, 2, 3, 4)
Office documents — Effortlessly render Word (DOCX, DOC, DOTX, DOCM), Excel (XLSX, XLS, XLSM), and PowerPoint (PPTX, PPT, PPTM) files
Image formats — Display image files in PNG, JPEG, JPG, and multi-page TIFF formats

Open and view Office documents

Easily load Office documents such as Word, Excel, and PowerPoint files using Nutrient Web SDK. Use the load method with a Configuration object to specify the document’s location on the page, the source path, the license key, and other settings. This streamlined process enables seamless integration for viewing Office documents in your applications. For additional details, refer to the guides on loading a document.

PSPDFKit.load({
  container: "#pspdfkit",
  document: "source.docx",
  licenseKey: "YOUR_LICENSE_KEY"
});

For information on converting an Office document to a PDF or PDF/A document, refer to our converting Office documents to PDFs guide.

Load image documents

When calling PSPDFKit#load() and passing a blob, array buffer, or URL to the image into the document option, Nutrient Web SDK will open the image file as if it were a PDF document:

PSPDFKit.load({
  document: image
});

For additional details, refer to the guides on loading a document.

Configure zoom in and out of a document

Nutrient Web SDK document viewer provides a range of zooming capabilities to enhance the viewing experience. You can zoom in and out using intuitive UI elements such as zoom-in and zoom-out toolbar buttons, keyboard shortcuts, or mouse scroll wheel. The viewer also offers features such as FIT_TO_WIDTH and a marquee-zoom button for precise magnification of specific document areas. For developers, the SDK provides granular control over zoom behavior through the API, allowing customization of zoom modes, scroll wheel behavior, and zoom increments.

For example, you can enable the marquee-zoom button in the toolbar as follows:

PSPDFKit.load({
  toolbarItems: PSPDFKit.defaultToolbarItems.concat([
    { type: "marquee-zoom" }
  ])
});

For more information on the available zoom options and their configurations, refer to our zoom options guide. This guide delves into the details of user interactions, API configurations, available zoom modes, and more.

Configure page layout and scroll options

Nutrient Web SDK offers extensive control over page layout and scrolling behavior, allowing you to tailor the viewing experience to your specific needs. You can choose between single-page, double-page, and automatic layouts, as well as configure the spacing between pages. The SDK also provides different scrolling modes, including continuous scrolling for a web-like experience, per-spread scrolling for focused viewing, and a disabled scrolling mode for programmatic control. These options can be configured via the ViewState object, giving you fine-grained control over how documents are presented.

For instance, to add a layout options popover to the toolbar for users to configure the layout themselves, use the following code:

let toolbarItems = PSPDFKit.defaultToolbarItems;
// Add the `layout-config` toolbar item after the `pager` item.
let pagerIndex = toolbarItems.findIndex((item) => item.type == "pager");
toolbarItems.splice(pagerIndex + 1, 0, { type: "layout-config" });

PSPDFKit.load({
  toolbarItems
  //...
});

For a deeper dive into the available page layout and scroll options, including detailed explanations of each mode and configuration examples, refer to our page layout and scroll options guide. This guide provides a comprehensive overview of how to customize document presentation to best suit your application.

Search across PDF pages

Nutrient Web SDK provides robust search functionality, enabling users to search across PDF pages and annotations for matching text using JavaScript. Developers can leverage the API for programmatic full-text search or utilize the customizable UI for searching and highlighting relevant matches. This includes capabilities for full-text search, annotation search, headless operation (programmatic search without the UI), and a customizable UI to match your application’s look and feel. The search functionality is also extendable, allowing for integration with other features like annotation, extraction, and redaction.

For a deeper understanding of how to implement and customize PDF search within your application, refer to our JavaScript PDF search library guide.

Document viewer guides

PDF files
Learn how to open and view PDF files seamlessly with the document viewer, ensuring high fidelity and performance in your application.

Office documents
Discover how to open Microsoft Office files like Word, Excel, and PowerPoint using the document viewer, featuring client-side rendering for fast and efficient performance.

Images and photos
Learn how to display PNG, JPG, and TIFF images within the document viewer, offering a smooth and mobile-friendly viewer experience.

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

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

Fullscreen mode
Implement fullscreen mode using the fullscreen API for a more immersive document viewing experience in your application.

Magazine viewer
Create a magazine-style viewer layout with the document viewer, ideal for catalogs, magazines, and other visually rich documents.

Presentation mode
Display presentation slides in a clean and interactive format using the document viewer.

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

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

Performance best practices
Follow tips and techniques for building a fast, client-side document rendering solution, ensuring smooth operation for all users.

Annotation diff
Understand how to efficiently transfer annotations within the document viewer for streamlined workflows.

Caching techniques
Improve loading times by implementing smart caching techniques, enhancing the document viewer’s performance.

Rendering PDF pages
Render single PDF pages as high-quality images within the document viewer for granular control and optimized performance.

Render in canvas
Use the canvas element to render PDF pages, enabling precise control over display in the document viewer.

Coordinate space
Learn how to convert to and from the PDF coordinate space, integrating advanced functionality in the document viewer.

Watermark rendering
Add watermarks to your documents, enhancing security and branding within the document viewer.

Font rendering
Configure custom fonts for rendering PDF documents, ensuring a polished and professional look in the document viewer.

PDF JavaScript support
Enable PDF JavaScript for enhanced interactivity and form handling in the document viewer.

Permissions
Set and manage document permissions, ensuring secure access and usage within the document viewer.

FAQ

What types of documents does Nutrient Web SDK support for viewing?

Nutrient Web SDK supports viewing a variety of documents, including PDF, Word, Excel, and PowerPoint files. It handles multiple file types such as PDF, DOCX, XLSX, PPTX, PNG, JPEG, and TIFF.

Is a server required to use Nutrient Web SDK?

No, Nutrient Web SDK operates entirely on the client-side, enabling fast and efficient client-side document rendering in the browser without requiring a server for document processing.

Can I customize the UI of the document viewer?

Yes, Nutrient Web SDK provides a customizable document viewer UI. You can add or hide buttons, adjust the design to match your application’s branding, and integrate a tailored user experience.

Is Nutrient Web SDK mobile-friendly?

Absolutely! Nutrient Web SDK delivers a responsive and mobile-friendly viewer interface that automatically adjusts to different screen sizes and devices for seamless accessibility.

How do I enable support for Microsoft Office and image files?

To enable support for Word, Excel, PowerPoint, and image files, activate the Office Files and Image Documents components in your license.

Free trial

Start your free trial for unlimited access and expert support.

Try for free