Blog Post

How to Build a .NET MAUI PDF Viewer with the PSPDFKit SDK

Our MAUI SDK is now live, offering seamless integration and enhanced features. With PSPDFKit for MAUI, you can easily integrate our viewer using XAML. If you’re still interested in integrating the Web SDK on your own with the Blazor hybrid approach outlined in this post, let us know.

In this post, you’ll learn how to build a .NET MAUI PDF viewer with the PSPDFKit for Web SDK using the release candidate version of .NET 7.

.NET MAUI stands for .NET Multi-platform App User Interface, and it’s a new framework from Microsoft for creating native cross-platform mobile and desktop applications from a single codebase using .NET.

Architecture and Features

.NET MAUI is a successor to Microsoft’s now-deprecated Xamarin project, which was made for cross-platform mobile application development for Android, iOS, and Windows.

arch

It’s a multi-year project that was architected from ground up, resulting in a framework that offers:

Unification of projects — Out of the box, you get a single multi-targeted setup.
Truly native MAUI applications — They run on the native infrastructure of each supported platform.
Optimized compilation — .NET for iOS does full ahead-of-time (AOT) compilation to produce ARM binaries for Apple’s App Store, while .NET for Android takes advantage of just-in-time (JIT) and AOT compilation on an Android device.
Creation of native applications that host a web view, using Blazor.
Speed — It’s 68 percent faster than Xamarin.Android and 44 percent faster than Xamarin.Forms.

It also offers:

MVVM and XAML support
7 different layouts
44 views
More than 50 controls

controls

Release and Versioning

.NET MAUI has been available since May 2022. It ships with .NET with the same cadence, lifecycle, and support cycle as .NET. In November 2022, during the three-day .NET Conf 2022 event, .NET 7 will be launched and become the first .NET release shipped together with MAUI. It’ll also be the current release of .NET, while .NET 6 will become the long-term support (LTS) version.

Building a .NET MAUI PDF Viewer with the PSPDFKit Web SDK

When using .NET MAUI, you can create either a standalone MAUI app or a MAUI Blazor application. However, in the next sections, you’ll create a MAUI Blazor application using a Windows machine.

React Application

First, create a React application using the PSPDFKit for Web SDK by following the instructions on the Getting Started on Web page. Or, use (clone) the already created one from our GitHub repository. The application will be located in the pspdfkit-react-example folder (or pspdfkit-web-example-react if you cloned the GitHub repository).
Within that folder, use one of the following commands:

If you created an application, run yarn build (or npm run build), which will result in a new pspdfkit-react-example/build folder.
If you cloned the repository, run yarn and yarn build (or npm install and npm run build), which will result in a new pspdfkit-web-example-react/build folder.

Installing Visual Studio 2022 Preview

To build this example, you’ll need Visual Studio 2022 Preview (version 17.4.0 Preview 2.1 at the time of writing). You can download it here.
Within the Visual Studio 2022 installer, make sure the .NET Multi-platform App UI development checkbox is checked.

Using Visual Studio 2022 Preview

Open Visual Studio 2022 Preview.
Choose Create New Project.
At the top, where it says Search for templates, enter MAUI Blazor.
Choose .NET MAUI Blazor App from the top of the resulting list.
Click Next.
Under Project name, enter PSPDFKitMAUI7Example. Then, press Next.
Choose the .NET 7.0 (Preview) framework from the combo box and press Create.
Once the new solution is created, the project tree will look like what’s shown in the following image.
Under the Manage NuGet Packages context menu item, make sure the Package source is set to nuget.org. If it doesn’t exist, create one using this source.
Remove the Shared, Data, and Pages folders, as they contain samples from the initial template that you won’t need for this example.
Remove the contents of the Main.razor file and leave the file empty in the project tree.
In the Imports.razor file, remove the last line (@using PSPDFKitMAUI7Example.Shared).
In MainProgram.cs, remove the following, which aren’t needed for this example:

Line 2 (using PSPDFKitMAUI7Example.Data;)
Line 25 (builder.Services.AddSingleton<WeatherForecastService>();)

Remove all the files and folders from the wwwroot folder.
Copy all the files and folders from the above-mentioned pspdfkit-react-example/build folder (or the pspdfkit-web-example-react/build folder) to the wwwroot folder.

WinUI 3

From the Debug menu, choose Start Debugging.
The application will start as a WinUI 3 Windows application and look like what’s shown below.

Android

To start the application as an Android app, choose Tools > Android > Android Device Manager.
Make sure to have at least one Android Virtual Device (AVD) ready. Start it.
Windows Machine will be shown.
Instead of using that, choose the available AVD from the combo box.
From the Debug menu, choose Start Debugging.
The first run will take couple minutes, and you’ll see something like this (depending on the appearance of your AVD).

iOS

To start the application as an iOS app, choose Tools > iOS > Pair to Mac, and pair your Windows machine with a machine running macOS.
Pick one of the iOS simulators from the menu.
From the Debug menu, choose Start Debugging.
The first run will take couple minutes, and you’ll see something like this on your macOS machine.

Conclusion

With .NET MAUI, you can build native applications for Android, iOS, macOS, and Windows from a single codebase. With more than 5 million .NET developers, it’ll be interesting to see how fast it’s adopted.

The code for the example in this post can be found in our PSPDFKit-labs github repository.

Links

Here are some additional links worth checking out:

FAQ

How can I integrate a PDF viewer in a .NET MAUI app?

You can use PSPDFKit for Web SDK to integrate a PDF viewer into a .NET MAUI application.

Does PSPDFKit support multi-platform development?

Yes, PSPDFKit supports .NET MAUI, allowing you to develop applications for Android, iOS, macOS, and Windows.

What are the system requirements for using .NET MAUI with PSPDFKit?

You’ll need Visual Studio 2022 and .NET 7 (or higher) to develop a .NET MAUI app with PSPDFKit.

Can I use XAML to build the UI for my PDF viewer?

Yes, you can easily build the UI with XAML when using PSPDFKit for .NET MAUI.

Does PSPDFKit for Web SDK work with Blazor?

Yes, you can integrate PSPDFKit for Web SDK into a MAUI Blazor app, enabling hybrid web views in your application.

Explore related topics

.NET MAUI How To PDF Viewer