Skip to content

1039164: Resolve Documentation Issues for Blazor PDF Viewer - getting-started #3597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hemaprasanth-Hari wants to merge 7 commits into
base: development
Choose a base branch
from
+347 −224
Open

1039164: Resolve Documentation Issues for Blazor PDF Viewer - getting-started #3597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e16e34f
1039164: Resolve Documentation Issues for Blazor PDF Viewer
Hemaprasanth-Hari Jul 7, 2026
6c1a271
1039164: Apply the remaining getting started code
Hemaprasanth-Hari Jul 8, 2026
b1ab75a
1039164: Remove the common issues
Hemaprasanth-Hari Jul 8, 2026
fa452bc
Merge branch 'development' into ES-1039164-UGRevamp
Hemaprasanth-Hari Jul 8, 2026
d4813f9
1039164: Fix the Review changes
Hemaprasanth-Hari Jul 8, 2026
ecc3bad
Merge branch 'ES-1039164-UGRevamp' of https://github.com/syncfusion-c…
Hemaprasanth-Hari Jul 8, 2026
555d543
1039164: Update the PR
Hemaprasanth-Hari Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 28 additions & 27 deletions Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,33 @@ control: SfPdfViewer
documentation: ug
---

# Getting Started with the PDF Viewer in .NET MAUI Blazor Hybrid App
# Getting Started with the PDF Viewer in a .NET MAUI Blazor Hybrid App

This section explains how to create and run a .NET MAUI Blazor Hybrid application using the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component.

## Prerequisites

To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For installation details, see the Microsoft documentation: [Install .NET MAUI](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin).
* Visual Studio 2022 (17.8 or later) with the **Mobile development with .NET** workload installed.
* .NET 8.0 SDK or later.
* Windows 10/11 (version 1809 or later) to build and run the Windows target.
* To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For installation details, see the Microsoft documentation: [Install .NET MAUI](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin).

## Create a new Blazor .NET MAUI app in Visual Studio

Create a **Blazor MAUI App** named **PDFViewerGettingStarted** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0).
1. Open Visual Studio and choose **File → New → Project**.
2. Search for **Blazor MAUI App**, select it, and click **Next**.
3. Name the project **PDFViewerGettingStarted** and click **Create** using the [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0).

N> The PDF Viewer supports .NET 8.0 and later.

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SfPdfViewer NuGet Packages
## Install Blazor SfPdfViewer NuGet Packages

To add **Syncfusion Blazor SfPdfViewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install:
To add the **Blazor SfPdfViewer (Next-Gen)** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install:

* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)

Alternatively, you can utilize the following package manager command to achieve the same.
Alternatively, you can use the following Package Manager command to install the same packages.

{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
Expand All @@ -39,9 +44,9 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}

## Add import namespaces
## Import namespaces

After the packages are installed, open the `~/_Imports.razor` file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces.
Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces.

{% tabs %}
{% highlight razor tabtitle="_Imports.razor" %}
Expand Down Expand Up @@ -81,37 +86,33 @@ builder.Services.AddSyncfusionBlazor();

The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).

### Add stylesheet resource

Add the stylesheet at the end of the `<head>` section in the `~/wwwroot/index.html` file to apply proper layout and theme styling.

{% tabs %}
{% highlight html tabtitle="index.html" %}

<!-- Syncfusion Blazor PDF Viewer control's theme style sheet -->
<!-- Blazor PDF Viewer control's theme stylesheet -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

{% endhighlight %}
{% endtabs %}

### Add script resource

Add the required script at the end of the `<body>` section in the `~/wwwroot/index.html` file to enable component functionality.

{% tabs %}
{% highlight html tabtitle="index.html" %}

<!-- Syncfusion Blazor PDF Viewer control's scripts -->
<!-- Blazor PDF Viewer control's script -->
<script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>

{% endhighlight %}
{% endtabs %}

N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor PDF Viewer Component
## Add Blazor PDF Viewer component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next-Gen) component to `~/Pages/Index.razor`.
Add the Blazor PDF Viewer (Next-Gen) component to `~/Pages/Index.razor`.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand All @@ -126,35 +127,35 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next-Gen) c
{% endhighlight %}
{% endtabs %}

N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a document. Use the Open toolbar option to browse and open a PDF.
N> The sample [`DocumentPath`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) points to a remote URL. The device running the app must have internet access for the PDF to load. For offline scenarios, bundle the PDF in the project and load it with `LoadAsync` from embedded resources, or use the **Open** toolbar option to pick a local file. For more information, see [Render a PDF document from an embedded source in the .NET MAUI Android app](../faqs/how-to-deploy-maui-using-android-emulator).
N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer displays an empty viewer without a document. Use the **Open** toolbar option to browse and open a PDF.

## Run on Windows

In the Visual Studio toolbar, click the **Windows Machine** to build and run the app. Ensure the run profile is set to `Windows Machine` before starting the app.
1. In the Visual Studio toolbar, change the **Solution Platforms** dropdown to **Windows Machine**.
2. Press <kbd>F5</kbd> (with the debugger) or <kbd>Ctrl</kbd>+<kbd>F5</kbd> (without the debugger) to build and run the app.

![Running the app on a Windows machine](gettingstarted-images/Windows-machine.png)

After the application launches, the PDF Viewer renders the specified PDF document.
After the application launches, the PDF Viewer displays the specified PDF document.

![Blazor SfPdfViewer rendering the PDF document](gettingstarted-images/Windows-maui-output.png)
![Blazor SfPdfViewer2 rendering the PDF document](gettingstarted-images/Windows-maui-output.png)

## Run on Android

To run the PDF Viewer on Android using the Android emulator, follow these steps:

![Android emulator configuration for .NET MAUI](gettingstarted-images/android-maui.png)
1. In Visual Studio, change the **Solution Platforms** dropdown to **Android Emulators** and select a running emulator. If no emulator is available, create one using the **Android Device Manager**.
2. Press <kbd>F5</kbd> to build and deploy the app to the emulator.

For setup and usage, see [Android Emulator setup for .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows).

N> If any errors occur while using the Android Emulator, see [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
![Android emulator configuration for .NET MAUI](gettingstarted-images/android-maui.png)

![Blazor SfPdfViewer running in the Android emulator](gettingstarted-images/android-emulator.png)
N> If any errors occur while using the Android Emulator, see [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).

N> To learn how to open, view, or interact with PDF files in the PDF Viewer component, see [Open and Save](.././opening-pdf-file). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorWindow). Looking for the full Blazor PDF Viewer component overview, features, pricing, and documentation? Visit the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) page.
![Blazor SfPdfViewer2 running in the Android emulator](gettingstarted-images/android-emulator.png)

## See Also

* [Getting Started with Blazor PDF Viewer Component in WinForms Blazor Hybrid App](./winforms-blazor-app)
* [Getting Started with Blazor PDF Viewer Component in WPF Blazor Hybrid App](./wpf-blazor-app)
* [Supported features: desktop vs. mobile](./features#supported-features-desktop-vs-mobile)
* [Render a PDF document from an embedded source in the .NET MAUI Android app](../faqs/how-to-deploy-maui-using-android-emulator)
Loading