---
title: "Add PDF functionality with Blazor"
canonical_url: "https://www.nutrient.io/sdk/web/getting-started/other-frameworks/blazor/"
md_url: "https://www.nutrient.io/sdk/web/getting-started/other-frameworks/blazor.md"
last_updated: "2026-05-15T19:10:05.144Z"
description: "Learn how to integrate Nutrient Web SDK into your Blazor application. Step-by-step guide for adding PDF viewing, editing, and annotation features."
---

# Add PDF functionality with Blazor

Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app.

This guide walks you through the steps to integrate Nutrient Web SDK into your project. By the end, you’ll be able to render a PDF document in the user interface (UI).

**Test without installing**

You can test the SDK capabilities in our playground.

[Read more](https://nutrient.io/demo/sandbox)

**Jump to example**

Prefer to jump straight to code? View the example repo on GitHub.

[Read more](https://github.com/PSPDFKit/nutrient-examples/tree/main/examples/blazor)

## Installation

You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN). Nutrient maintains the CDN for customers, and it’s our recommended way to get started. For more control and flexibility, use the local installation option.

#### Note: Creating a new project (optional)

If you don’t yet have a Blazor project set up, create one with:

```sh

dotnet new blazor -n nutrient-blazor-example

```

### CDN installation

**Steps:**

1. Add the following script tag in your `Components/App.razor` file before the `</body>` tag:

   ```html

   <script src="https://cdn.cloud.nutrient.io/pspdfkit-web@1.15.0/nutrient-viewer.js"></script>
   ```

2. You’re now ready to use Nutrient Web SDK and reference `NutrientViewer` in your Blazor components.

### Download and self-host

Nutrient Viewer library files are distributed as an archive that you extract manually:

**Steps:**

1. [Download the framework here](https://my.nutrient.io/download/web/latest). The download will start immediately and will save a `.tar.gz` archive like `PSPDFKit-Web-binary-1.0.0.tar.gz` to your computer.

2. Once the download is complete, extract the archive and copy the entire contents of its `dist` folder to the `wwwroot` directory in your project.

3. Make sure your `wwwroot` folder contains the `nutrient-viewer.js` file and a `nutrient-viewer-lib` directory with library assets.

## Rendering a PDF

These steps cover both server and WebAssembly.

### CDN installation

**Steps:**

1. To clean out the UI, go to the `Components/Layout/MainLayout.razor` component and keep only the `@Body` property:

   ```razor

   @inherits LayoutComponentBase
   @Body
   ```

2. Go to the `Home` route located under the `Components/Pages` folder, and replace the contents of the file with the following:

   ```c#

   @page "/"
   @rendermode InteractiveServer
   @inject IJSRuntime JS

   <div id='nutrient-container' style='background: gray; width: 100vw; height: 100vh; margin: 0 auto;'></div>

   @code {

       protected override async void OnAfterRender(bool firstRender)
       {
         if (firstRender) {
           await JS.InvokeVoidAsync("loadPDF", "#nutrient-container", "https://www.nutrient.io/downloads/nutrient-web-demo.pdf");

         }
       }
   }
   ```

3. Initialize Nutrient Viewer in `Components/App.razor` before the `</body>` tag:

   ```html

   @* Initialize Nutrient Viewer in Blazor by calling NutrientViewer.load(): *@
   <script>
     function loadPDF(container, document) {
       NutrientViewer.load({
         container: container,
         document: document,
       });
     }
   </script>
   ```

4. **Server only** — Make sure to add the MIME type mappings to allow conversion of Office files.
   1. Go to `Program.cs`.
   2. Import `using Microsoft.AspNetCore.StaticFiles;`.
   3. Add the following code to your app builder:

      ```c#

      FileExtensionContentTypeProvider extensionProvider = new();
      extensionProvider.Mappings.Add(".dll", "application/octet-stream");
      extensionProvider.Mappings.Add(".dat", "application/octet-stream");
      extensionProvider.Mappings.Add(".blat", "application/octet-stream");

      app.UseStaticFiles(new StaticFileOptions
      {
      ContentTypeProvider = extensionProvider
      });
      ```

5. To run the app, select **Run** > **Start Debugging**. This will start your app and open it in your default browser.

### Download and self-host

**Steps:**

1. To clean out the UI, go to the `Components/Layout/MainLayout.razor` component and keep only the `@Body` property:

   ```razor

   @inherits LayoutComponentBase
   @Body
   ```

2. Go to the `Home` route located under the `Components/Pages` folder, and replace the contents of the file with the following:

   ```c#

   @page "/"
   @rendermode InteractiveServer
   @inject IJSRuntime JS

   <div id='nutrient-container' style='background: gray; width: 100vw; height: 100vh; margin: 0 auto;'></div>

   @code {

       protected override async void OnAfterRender(bool firstRender)
       {
         if (firstRender) {
           await JS.InvokeVoidAsync("loadPDF", "#nutrient-container", "https://www.nutrient.io/downloads/nutrient-web-demo.pdf");

         }
       }
   }
   ```

3. Load Nutrient Viewer into `Components/App.razor` before the `</body>` tag:

   ```html

   @* Include nutrient-viewer.js from your wwwroot directory *@
   <script src="nutrient-viewer.js"></script>

   @* Initialize Nutrient Viewer in Blazor by calling NutrientViewer.load(): *@
   <script>
     function loadPDF(container, document) {
       NutrientViewer.load({
         container: container,
         useCDN: true,
         document: document,
       });
     }
   </script>
   ```

   > **Note:** Adding `useCDN: true` will load the SDK assets from the CDN if `baseUrl` isn’t provided. This flag was introduced in version 1.9.0. If your setup relies on the previous behavior of autodetecting the assets without `baseUrl`, you can omit this flag for now, but be aware that this behavior is deprecated. In future versions, loading from CDN will become a default when `baseUrl` isn’t explicitly provided. `useCDN: true` has no effect if `baseUrl` is set.

4. **Server only** — Make sure to add the MIME type mappings to allow conversion of Office files.
   1. Go to `Program.cs`.
   2. Import `using Microsoft.AspNetCore.StaticFiles;`.
   3. Add the following code to your app builder:

      ```c#

      FileExtensionContentTypeProvider extensionProvider = new();
      extensionProvider.Mappings.Add(".dll", "application/octet-stream");
      extensionProvider.Mappings.Add(".dat", "application/octet-stream");
      extensionProvider.Mappings.Add(".blat", "application/octet-stream");

      app.UseStaticFiles(new StaticFileOptions
      {
      ContentTypeProvider = extensionProvider
      });
      ```

5. To run the app, select **Run** > **Start Debugging**. This will start your app and open it in your default browser.

### Optimizing load performance

If your app doesn't open a PDF immediately — for example, the user navigates to a viewer on a different page — call [`NutrientViewer.preloadWorker()`](https://www.nutrient.io/api/web/functions/NutrientViewer.preloadWorker.html) early in your app to fetch and compile the WebAssembly artifacts in the background. When `NutrientViewer.load()` runs later, it can start rendering without waiting for them.

```js

// Call early — for example, on app init or after login.
NutrientViewer.preloadWorker();

```

Refer to the [performance best practices](https://www.nutrient.io/guides/web/best-practices/performance.md) guide for more optimization techniques.




## Troubleshooting

If you encounter issues, refer to the [common issues](https://www.nutrient.io/guides/web/troubleshooting/common-issues.md) guide.

> **Note for developers using AI coding assistants**: To get accurate troubleshooting help, copy the content from the [troubleshooting](https://www.nutrient.io/guides/web/troubleshooting/common-issues.md) guide and include it in your prompt, along with your specific error.

**Test without installing**

You can test the SDK capabilities in our playground.

[Read more](https://nutrient.io/demo/sandbox/)

**View example**

Prefer to jump straight into code? View the example repo on GitHub.

[Read more](https://github.com/PSPDFKit/nutrient-examples/tree/main/examples/blazor)
---

## Related pages

- [Add PDF functionality with ASP.NET](/sdk/web/getting-started/other-frameworks/aspnet.md)
- [Add PDF functionality with JavaScript + Vite](/sdk/web/getting-started/other-frameworks/javascript.md)
- [Add PDF functionality with Flutter](/sdk/web/getting-started/other-frameworks/flutter.md)
- [Add PDF functionality with Angular](/sdk/web/getting-started/other-frameworks/angular.md)
- [Add PDF functionality with PHP](/sdk/web/getting-started/other-frameworks/php.md)
- [Add PDF functionality with Electron](/sdk/web/getting-started/other-frameworks/electron.md)
- [Add PDF functionality with Nuxt](/sdk/web/getting-started/other-frameworks/nuxt.md)
- [Add PDF functionality with PWA](/sdk/web/getting-started/other-frameworks/pwa.md)
- [Add PDF functionality with jQuery](/sdk/web/getting-started/other-frameworks/jquery.md)
- [Add PDF functionality with Laravel](/sdk/web/getting-started/other-frameworks/laravel.md)
- [Add PDF functionality with Svelte](/sdk/web/getting-started/other-frameworks/svelte.md)
- [Add PDF viewing and editing to Vue applications](/sdk/web/getting-started/other-frameworks/vue.md)