How to build a PDFium PDF viewer

Q: What file types can I view using Nutrient PDF viewer, and are there limitations on rendering or performance?

Nutrient PDF viewer supports viewing standard PDF files as well as common image formats like JPG, PNG, and TIFF. All rendering happens client-side using WebAssembly for optimal performance, even with large or complex documents. There is no need for server-side rendering.

Q: Can I dynamically switch between different PDF files without reloading the whole app?

Yes. You can use NutrientViewer.load() with a new file path at any time. This lets you implement features like file navigation, preview panels, or loading a new document on user interaction without reinitializing the entire viewer.

Hulya Masharipov

In this post, we provide you with a step-by-step guide outlining how to deploy Nutrient’s PDFium-based JavaScript PDF viewer.

Illustration: How to build a PDFium PDF viewer

PDFium is an open source PDF rendering library that was released by Google in 2014. Currently, PDFium is used to open billions of PDFs directly in the Chrome browser. At Nutrient, we leverage PDFium to render PDFs in our commercial PDF viewers.

With Nutrient Web SDK, you can render PDF and image formats (JPG, PNG, TIFF) using a polished UI that’s ready for advanced annotation, editing, and collaboration.

In addition to our JavaScript integration, you can also deploy our PDFium-based viewer on other platforms, including iOS, Android, Windows, and Mac Catalyst.

What is a JavaScript PDF viewer?

A JavaScript PDF viewer lets users view and interact with PDFs directly in the browser. Unlike native apps, there’s no need for downloads or plugins. This makes it perfect for applications like document review portals, compliance platforms, and eSignature workflows.

Nutrient PDFium PDF viewer

Our PDFium-based PDF viewer can easily be integrated into your web application. It comes with 30+ features that let you view, annotate, edit, and sign documents directly in your browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case.

A prebuilt and polished UI for an improved user experience
15+ prebuilt annotation tools to enable document collaboration
Browser-based text editing, page cropping, merging, rotating, and more
Support for more file types with client-side PDF, MS Office, and image viewing
Dedicated support from engineers to speed up integration

Example of our JavaScript PDF viewer

To see our PDF viewer in action, upload a PDF file by selecting Choose Example > Open Document (if you don’t see this, switch to the Standalone option). Once your file is displayed in the viewer, you can try drawing freehand, adding a note, or applying a crop or an eSignature.

If you prefer a video tutorial, watch our step-by-step guide.

Requirements

To get started, you’ll need:

The latest stable version of Node.js.
A package manager compatible with npm. This guide contains usage examples for the npm client (installed with Node.js by default).

Step 1 — Install the Nutrient SDK

Install the SDK package:

npm install @nutrient-sdk/viewer

Step 2 — Copy SDK assets to your project

Copy the SDK distribution files to assets/ in your project root. This is where the viewer will look for the files it needs to run:

cp -R ./node_modules/@nutrient-sdk/viewer/dist/ ./assets/

Step 3 — Add your PDF document

Place your sample file (e.g. document.pdf) in your project root. You can use our demo document as an example.

Step 4 — Create a basic HTML viewer

Create an index.html file:

<!DOCTYPE html>
<html>
	<head>
		<title>Nutrient PDF viewer</title>
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
	</head>
	<body>
		<div id="nutrient" style="width: 100%; height: 100vh;"></div>
		<script src="./assets/nutrient-viewer.js"></script>
		<script>
			const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;

			window.NutrientViewer.load({
				baseUrl,
				container: '#nutrient',
				document: 'document.pdf',
			})
				.then((instance) => console.log('Viewer loaded', instance))
				.catch((err) => console.error(err.message));
		</script>
	</body>
</html>

Step 5 — Serve the project

Install a static server package:

npm install -g serve

Start the server:

serve -l 8080 .

Visit http://localhost:8080 in your browser.

Adding even more capabilities

Once you’ve deployed your viewer, you can start customizing it to meet your specific requirements or easily add more capabilities. To help you get started, here are some of our most popular JavaScript guides:

Conclusion

You should now have our PDFium-based PDF viewer up and running in your web application. If you hit any snags, don’t hesitate to reach out to our Support team for help.

We also offer a variety of web framework deployment options for our PDF viewer, like Angular and React.js. To see a list of all web frameworks, start your free trial. Or, launch our demo to see our viewer in action.

FAQ

What file types can I view using Nutrient PDF viewer, and are there limitations on rendering or performance?

Nutrient PDF viewer supports viewing both standard PDF files and common image formats like JPG, PNG, and TIFF. All rendering happens client-side using WebAssembly for optimal performance, even with large or complex documents. There’s no need for server-side rendering.

Is it possible to use the viewer without setting up a backend server or cloud infrastructure?

Yes. Nutrient is a fully client-side solution. You don’t need a backend service to render or display documents. This makes it ideal for secure and lightweight deployments, such as embedding within static sites or integrating into frontend-only apps.

What types of annotations are supported, and can I enable or disable them?

The SDK supports sticky notes, text highlights, freehand drawing, ink signatures, stamps, and more. You can configure the toolbar to show or hide specific tools depending on your workflow. All annotations are saved directly in the browser.

How does Nutrient perform on tablets and smartphones, and does it support touch gestures?

Nutrient PDF viewer is optimized for mobile use. It adapts seamlessly to smaller screens and supports native gestures like pinch-to-zoom, tap-to-highlight, and drag-to-scroll. It’s tested on Chrome, Safari, and Firefox across iOS and Android devices.

Can I dynamically switch between different PDF files without reloading the whole app?

Yes. You can use NutrientViewer.load() with a new file path at any time. This lets you implement features like file navigation, preview panels, or loading a new document on user interaction without reinitializing the entire viewer.

Author

Hulya Masharipov Technical Writer

Hulya is a frontend web developer and technical writer at Nutrient who enjoys creating responsive, scalable, and maintainable web experiences. She’s passionate about open source, web accessibility, cybersecurity privacy, and blockchain.

Explore related topics

How To