How to build a .NET WinUI3 PDF viewer with Nutrient Web SDK

Shantanu Methikar

Updated: January 6, 2026

How to build a .NET WinUI3 PDF viewer with Nutrient Web SDK

TL;DR

This tutorial shows how to build a WinUI3 PDF viewer using Nutrient Web SDK and WebView2. You’ll set up a Visual Studio project, add Nutrient assets, and display PDFs in a Windows desktop app.

In this post, you’ll learn how to build a .NET WinUI3 PDF viewer with Nutrient Web SDK.

WinUI 3(opens in a new tab) is the native UI platform component that ships with the Windows App SDK(opens in a new tab), separate from Windows SDKs. The Windows App SDK provides a set of APIs and tools for creating desktop apps that target Windows 10 and later and can be published to the Microsoft Store.

You can use similar steps to build a PDF viewer using Nutrient on other .NET platforms like WPF(opens in a new tab), WinForms(opens in a new tab), and anything else that supports WebView2(opens in a new tab).

Prerequisites

Windows 10 or later
Visual Studio(opens in a new tab) or Visual Studio Code(opens in a new tab) (this tutorial uses Visual Studio)
Select the Windows application development component in the installer when installing Visual Studio.

Visual Studio installer showing Windows application development component selected

Follow the steps outlined below to build a WinUI3 PDF viewer with Nutrient Web SDK.

Step 1 — Creating a new project

Open Visual Studio.
Choose Create New Project.
Choose Blank App, Packaged (WinUI 3 in Desktop) from the list.
Click Next.
Under Project name, enter PSPDFKitWinUI3Example. Then, press Create.
Once the new solution is created, the project tree will look like what’s shown in the following image.

Step 2 — Adding Nutrient

Download the latest Nutrient Web SDK(opens in a new tab).
Extract the ZIP file and copy the contents of package/dist to the Assets folder.

Step 3 — Displaying a PDF in WinUI3

Add the PDF document you want to display, e.g. document.pdf, in the Assets folder.

Add the index.html file to the Assets folder, and add the following code to the index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>Nutrient Example App</title>

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background: #f6f7fa;
      }

      header {
        display: none;
      }

      #root {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <header></header>
    <div id="root"></div>

    <script src="./nutrient-viewer.js"></script>

    <script type="module">
      let instance = null;

      async function load(document) {
        if (instance) {
          NutrientViewer.unload(instance);
          instance = null;
        }

        const configuration = {
          document,
          container: '#root',
          // Add when using a license key.
          // licenseKey: "LICENSE KEY GOES HERE",
        };

        instance = await NutrientViewer.load(configuration);
      }

      window.onload = () => load('./document.pdf');
    </script>
  </body>
</html>

Double-click the project name to access the project file (PSPDFKitWinUI3Example.csproj) and replace the following:

<ItemGroup>
  <Content Include="Assets\SplashScreen.scale-200.png" />
  <Content Include="Assets\LockScreenLogo.scale-200.png" />
  <Content Include="Assets\Square150x150Logo.scale-200.png" />
  <Content Include="Assets\Square44x44Logo.scale-200.png" />
  <Content Include="Assets\Square44x44Logo.targetsize-24_altform-unplated.png" />
  <Content Include="Assets\StoreLogo.png" />
  <Content Include="Assets\Wide310x150Logo.scale-200.png" />
</ItemGroup>

With this:

<ItemGroup>
  <Content Include="Assets\**\*" />
</ItemGroup>

Replace the contents of MainWindow.xaml with:

<WebView2 x:Name="WebView" Loaded="WebView_Loaded" />

Add the Loaded event handler in MainWindow.xaml.cs to open index.html and display the PDF:

private async void WebView_Loaded(object sender, RoutedEventArgs e)
{
    await WebView.EnsureCoreWebView2Async();

    // Set the virtual host for the assets folder.
    WebView.CoreWebView2.SetVirtualHostNameToFolderMapping(
        "nutrient-example",
        "Assets",
        Microsoft.Web.WebView2.Core.CoreWebView2HostResourceAccessKind.Deny);

    WebView.CoreWebView2.Navigate("https://nutrient-example/index.html");
}

Step 4 — Running the application

Press F5 to run the application.
The application will open with the PDF document displayed in the WebView2 control.

WinUI3 application displaying a PDF document in the Nutrient viewer with toolbar

Step 5 — Sample code

The example code is in our PSPDFKit-labs GitHub repository(opens in a new tab).

Conclusion

In this post, you learned how to build a WinUI3 PDF viewer with Nutrient Web SDK. You can use similar steps to build a PDF viewer using Nutrient on other .NET platforms like WPF(opens in a new tab) and WinForms(opens in a new tab), or anything that supports WebView2(opens in a new tab).