How to build a Blazor PDF viewer

Blazor is a modern web UI framework developed by Microsoft that lets you build rich, interactive frontends using C# instead of JavaScript. Like Angular, React, or Vue, it provides a component-based architecture, but with the added benefit of full .NET integration and type safety.

With Blazor, you can create powerful single-page applications (SPAs) using C#, HTML, and Razor templates. These applications are composed of reusable components and can run entirely in the browser via WebAssembly, or on the server with real-time updates via SignalR.

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

Hosting models

Blazor offers three hosting models:

• Blazor Server — The app runs on the server, and UI interactions are handled over a real-time SignalR connection.

• Blazor WebAssembly (WASM) — The app is fully downloaded and runs in the browser via WebAssembly.

• Blazor Hybrid — Combines Blazor with .NET MAUI to build cross-platform desktop and mobile apps using native device capabilities.

Blazor Hybrid is production-ready and supported in .NET 6 and later. It’s ideal when you want to build native apps while leveraging Blazor components. For browser-based scenarios, Blazor Server and Blazor WASM are more common.

In this tutorial, you’ll use the Blazor WebAssembly (WASM) hosting model to create a PDF viewer that runs entirely in the browser.

What is Blazor WASM?

Blazor WASM and Blazor Server reuse code and libraries from each other. Client-side code or C# code can run directly in the browser using WebAssembly.

Alternatively, Blazor can run your client logic on the server. The client UI events are sent back to the server using SignalR, which is a real-time messaging framework for ASP.NET.

Once execution completes, the required UI changes are sent to the client and merged into the DOM.

What is WebAssembly?

WebAssembly (WASM) is a low-level instruction format that enables developers to compile languages other than JavaScript (such as C++ or Rust) into a format that’s “understandable” by JavaScript virtual machines.

What is a Blazor PDF viewer?

A Blazor PDF viewer lets you render and view PDF documents in a web browser without the need to download it to your hard drive or use an external application like a PDF reader.

Nutrient Blazor PDF viewer

Nutrient Web SDK includes a powerful PDF viewer tailored for Blazor WebAssembly applications. With full client-side rendering and an extensible API, you can deliver a fast, modern PDF viewing experience entirely within the browser without relying on server-side processing.

Nutrient Blazor PDF viewer

We offer a commercial Blazor PDF viewer library that 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
• 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 Blazor PDF viewer

To demo our Blazor PDF viewer, upload a PDF, JPG, PNG, or TIFF file by clicking Open Document under the Standalone option (if you don’t see this option, select Choose Example from the dropdown). Once your document is displayed in the viewer, try drawing freehand, adding a note, or applying a crop or an eSignature.

Requirements to get started

To get started, you’ll need:

• Long-term support (LTS) version of .NET.

You can download it from Microsoft’s website.

Creating a new Blazor WASM project

For this tutorial, you’ll install the Blazor WebAssembly template using the .NET CLI (command-line interface). Open your terminal and run:

dotnet new blazorwasm -o Nutrient_BlazorWASM
cd Nutrient_BlazorWASM

blazorwasm is a template that creates the initial files and directory structure for a Blazor WebAssembly project.

Below, you’ll see the file structure of your project.

Nutrient_BlazorWASM/
├── Pages/
│   └── Home.razor
├── wwwroot/
│   ├── document.pdf
│   └── index.html

Key files:

• Pages/Home.razor — The routed page that will render the PDF viewer.

• wwwroot/document.pdf — The sample PDF to display.

• wwwroot/index.html — Where the SDK and viewer logic is added.

Adding Nutrient to your project

To render PDF documents inside your Blazor app, you’ll integrate Nutrient Web SDK. The simplest and fastest method is by linking to the SDK using a Content Delivery Network (CDN).

Why use a CDN?

A CDN lets you load the SDK directly from a hosted location instead of bundling it manually in your project. This means:

• No need to download or manage SDK files locally.

• Faster setup and smaller project size.

• Always using a consistent, versioned build of the viewer.

1. Open your wwwroot/index.html file and add the following script just before the closing </body> tag:

<!-- Load Nutrient SDK from CDN -->
<script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>

This imports the Nutrient viewer globally so that it can be used in your custom JavaScript functions.

2. Directly below the CDN script, define a JavaScript function that Blazor can invoke to render documents:

<!-- Define the global interop function Blazor will call -->
<script>
	window.loadPDF = function (container, document) {
		NutrientViewer.load({
			container,
			document,
		}).catch((error) => {
			console.error('Nutrient failed to load', error);
		});
	};
</script>

The loadPDF function makes the SDK available to your Blazor app. It tells the Nutrient viewer where to render (container) and which document to open. By attaching it to window, you make it accessible via Blazor’s IJSRuntime.

Finally, your index.html file will look like this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>Nutrient_BlazorWASM</title>
		<base href="/" />
		<link
			rel="stylesheet"
			href="lib/bootstrap/dist/css/bootstrap.min.css"
		/>
		<link rel="stylesheet" href="css/app.css" />
		<link rel="icon" type="image/png" href="favicon.png" />
		<link href="Nutrient_BlazorWASM.styles.css" rel="stylesheet" />
	</head>

	<body>
		<div id="app"></div>
		<script src="_framework/blazor.webassembly.js"></script>

		<script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>

		<script>
			window.loadPDF = function (container, document) {
				NutrientViewer.load({
					container,
					document,
				}).catch((error) => {
					console.error('Nutrient failed to load', error);
				});
			};
		</script>
	</body>
</html>

Displaying a PDF

1. Add the PDF document you want to display to the wwwroot directory. You can use our demo document as an example.

2. Open Pages/Home.razor and replace its contents with the following code:

@page "/"
@inject IJSRuntime JS

<div id='container' style='width: 100vw; height: 100vh;'></div>

@code {
    protected override async void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("loadPDF", "#container", "document.pdf");
        }
    }
}

This setup does the following:

• @page "/" defines the root route for your app.

• IJSRuntime allows Blazor to call JavaScript from C#.

• OnAfterRender ensures JavaScript is only run after the initial page render.

• The loadPDF function (defined in index.html) is called to load and render document.pdf inside the viewer container.

The <div id="container"> is where the Nutrient viewer injects the rendered PDF. It’s set to full viewport size for a seamless viewer experience.

Serving the application

1. Start the app in the root directory of your project:

dotnet watch run

If you get a prompt asking for permissions, type your keychain and click Always Allow.

The server will start and will automatically restart when changes are made to the project.

You can access the source code for this tutorial on GitHub. Just navigate to the `wasm` folder. If you’re looking for the Blazor Server example, you can find the example project under the `server` folder or follow our getting started guide here.

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 Blazor guides:

• Adding annotations
• Editing documents
• Filling PDF forms
• Adding signatures to documents
• Real-time collaboration
• Redaction
• UI customization

Conclusion

By following this tutorial, you’ve successfully integrated Nutrient Web SDK into a Blazor WebAssembly app and built a fully functional PDF viewer. You’ve seen how to:

• Set up a Blazor WASM project.

• Add the Nutrient SDK via CDN.

• Load and display a PDF using JavaScript interop.

This setup is powerful, flexible, and extensible, giving you a great foundation for adding advanced capabilities like annotations, form filling, and document signing.

You can also deploy our vanilla JavaScript PDF viewer or use one of our many web framework deployment options like React.js, Vue.js, jQuery, and Angular.

To see a list of all web frameworks, start your free trial. Or, launch our demo to see our viewer in action.

FAQ