Getting Started with .NET MAUI Blazor Hybrid and Web App

5 Nov 20254 minutes to read

This section explains how to create and run a .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Web App) using Syncfusion® Blazor components.

What is .NET MAUI Blazor Hybrid and Web App?

.NET MAUI Blazor Web App is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server App and a .NET MAUI Blazor App. This approach enables a unified web-based UI that can be reused across mobile, desktop, and browser platforms.

By sharing UI components between native and web apps, this pattern ensures consistent user experiences, maximizes code reuse, and simplifies maintenance for applications targeting multiple environments.

Visual Studio provides the .NET MAUI Blazor Hybrid and Web App template to create a .NET MAUI Blazor Hybrid app with a Blazor Web App.

Prerequisites

  • .NET SDK 9.0 or later
  • Visual Studio 2022 17.3 or later with the following workloads:

Create a new .NET MAUI Blazor Hybrid and Blazor Web App in Visual Studio

Create a .NET MAUI Blazor Hybrid and Blazor Web App in Visual Studio using the Microsoft Templates.

.NET MAUI Blazor Hybrid and Blazor Web App

Install Syncfusion® Blazor Calendars and Themes NuGet in the App

To add the Blazor Calendar component in the app’s shared folder, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install Syncfusion.Blazor.Calendars and Syncfusion.Blazor.Themes. Alternatively, use the following Package Manager commands:

Install-Package Syncfusion.Blazor.Calendars -Version 32.1.19
Install-Package Syncfusion.Blazor.Themes -Version 32.1.19

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the list of packages and component details.

Register Syncfusion® Blazor Service

Open ~/_Imports.razor in both the .Maui and .Web Apps and import the Syncfusion.Blazor and Syncfusion.Blazor.Calendars namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Calendars

Now, register the Syncfusion® Blazor service in both the MauiProgram.cs file of the MAUI Blazor App and the ~/Program.cs file of the Blazor Web App.

using Syncfusion.Blazor;
    ....
    builder.Services.AddMauiBlazorWebView();
    builder.Services.AddSyncfusionBlazor();
    ....
using Syncfusion.Blazor;
    
    var builder = WebApplication.CreateBuilder(args);

    // Add services to the container.
    builder.Services.AddRazorComponents()
        .AddInteractiveServerComponents();
    builder.Services.AddSyncfusionBlazor();
    ....

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Reference the stylesheet and script in the <head> of the ~wwwroot/index.html file of your MAUI Blazor App and in the ~/Components/App.razor file of your Blazor Web App.

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    ....
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Syncfusion® Blazor component

Add a Syncfusion® Blazor component in any Razor file. In this example, the Calendar component is added in ~/Pages/Home.razor under the ~/Pages folder of the .Shared App.

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime"></SfCalendar>

In the Visual Studio toolbar, select the Windows Machine target to build and run the .Maui app. To build and run the .Web app, select the IIS Express target.

Build and run MAUI Blazor App

NOTE

To run the application on Android or iOS, refer to MAUI Getting Started for emulator or device setup.

MAUI Blazor App with Syncfusion Blazor Components

NOTE

Download the demo from GitHub.

See also

MAUI Blazor App

NOTE

View MAUI Blazor Diagram Builder Source Code in GitHub