How to port Syncfusion® Blazor Web App to MAUI Blazor Hybrid App

29 Aug 20252 minutes to read

This section explains how to port Syncfusion® Blazor Web App to .NET MAUI Blazor Hybrid App using Razor Class Library (RCL). This way, you can avoid rewriting all your Blazor Web App pages for the .NET MAUI Blazor Hybrid App.

Prerequisites

.NET 8.0 or later.

Create a new project for Blazor Server App

Create a new Blazor Web App with Syncfusion® Blazor Calendar component using Visual Studio.

1. Create MAUI Hybrid App in Visual Studio

Open Visual Studio and create a new project. Search for .NET MAUI Blazor Hybrid App template.
Name the project and create it.

2. Create Razor Class Library (RCL)

In the solution, add a new project using the Razor Class Library template in Visual Studio and ensure it targets .NET 8.0 to match both Blazor Web App and Blazor Maui Hybrid.

3. Migrate Static Assets, References, NuGet Packages, Razor Pages

Move all static assets (such as CSS, JavaScript, and images) from the Blazor Web App’s wwwroot folder to the Razor Class Library’s wwwroot directory. Then, update the asset references in the MAUI Hybrid App’s wwwroot/index.html to use the Razor Class Library’s assets via the _content/RazorClassLibrary/ path.

Move all Syncfusion® Blazor NuGet packages references from the Blazor web app’s .csproj to the RCL’s .csproj

Move Components/Pages ,Components/Layouts to the RazorClassLibrary and Add Include Necessary Namespace to _Imports.razor

Folders to move

4. Add Project Reference

Afterward, add Razor Class Library project reference in both the Blazor Web App and the MAUI Blazor App. Resolve any missing references or errors that arise. Once completed, remove folders such as Components/Pages and Components/Layouts from the MAUI Blazor App to avoid duplication and maintain a clean project structure.

Now, register the Syncfusion® Blazor service in the MauiProgram.cs file of your MAUI Blazor App.

using Syncfusion.Blazor;
        ....
        builder.Services.AddSyncfusionBlazor();
        ....

Finally, update the _Imports.razor file to include the necessary namespaces from the Razor Class Library. Then, modify the Routes.razor file in the Blazor MAUI Hybrid app to set the DefaultLayout and AppAssembly to use the MainLayout component from the Razor Class Library

5. Run the project

In the Visual Studio toolbar, select the Windows Machine button to build and run the app.

Build and run MAUI Blazor Hybrid App