Blazor Hybrid with .NET MAUI

Analogy categoryAnalogies

Blazor Hybrid lets you host Razor components inside a native .NET MAUI app using the BlazorWebView control, which embeds a platform web view (WebView2 on Windows, WKWebView on iOS/macOS, Android WebView) and runs your Razor components directly in-process via a local, loopback-only IPC channel rather than SignalR or a real HTTP server — there is no network round trip and no WASM download, because the .NET code runs natively on the device just like the rest of the MAUI app. This means a single set of Razor components and C# business logic can be shared across a web app (via Blazor Server/WASM) and native mobile/desktop apps (via MAUI), while still allowing each platform target to add native-only features like camera access, push notifications, or platform-specific navigation through MAUI's cross-platform APIs.

🏏

Cricket analogy: It's like a franchise reusing the exact same coaching manual and drills across its senior team, academy, and women's team, adapting only the venue and support staff per squad, rather than writing separate manuals from scratch; Blazor Hybrid reuses the same Razor components across web and native apps.

The BlazorWebView Bridge

Communication between the native MAUI shell and the embedded Razor components happens through the platform web view's JavaScript-to-native bridge (for example, WebView2's AddHostObjectToScript equivalent under the hood), which Blazor Hybrid abstracts so your component code calls .NET APIs directly rather than writing raw JS interop — a button click in a Razor component executes its C# event handler in the same process as the rest of the app, with the same performance characteristics as any other native MAUI page, and full access to injected MAUI services like IGeolocation, ICamera, or IFileSystem through standard dependency injection. Because the web view is a local, sandboxed rendering surface rather than pointing at a real server, features that assume server-side execution (like Blazor Server's SignalR circuit or server-side authentication middleware) do not apply; Blazor Hybrid components behave like Interactive WebAssembly in the sense that everything executes locally, but without even the network dependency WASM has for the initial asset download.

🏏

Cricket analogy: It's like a stadium's in-house scoreboard system reading directly from the same on-site scoring computer used by the umpires, with no external network link at all, rather than pulling data from a remote broadcast server; Blazor Hybrid's local bridge similarly avoids any network dependency.

The practical payoff of Blazor Hybrid is architectural: a Razor Class Library holding shared components, view models, and validation logic can be referenced simultaneously by a Blazor Server/WASM web project and a MAUI Blazor Hybrid project, so a single ProductCard.razor or CheckoutForm.razor component (and the C# services behind it) ships to browsers, Windows, macOS, iOS, and Android from one codebase, with platform differences isolated to thin interface implementations rather than duplicated UI logic. Teams adopting this pattern typically define abstractions like IConnectivity or ILocalStorageService in the shared library, then provide MAUI-native implementations (via Microsoft.Maui.Essentials) alongside browser-appropriate implementations (via JS interop or HTTP) so the same component tree compiles and behaves correctly regardless of which host ultimately renders it.

🏏

Cricket analogy: It's like a national cricket board publishing one official coaching curriculum used identically by every state academy, with only the specific training-ground facilities differing per location; a shared Razor Class Library plays the same 'one curriculum, many venues' role across web and native MAUI targets.

csharp

// MauiProgram.cs — registering BlazorWebView and shared services
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts => fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"));

        builder.Services.AddMauiBlazorWebView();
        builder.Services.AddSingleton<WeatherService>();   // shared with the web app
        builder.Services.AddSingleton<IGeolocation>(Geolocation.Default); // native-only

        return builder.Build();
    }
}

xml

<!-- MainPage.xaml — hosting Razor components in a native MAUI page -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyHybridApp.MainPage">
    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>

Sharing a Razor Class Library (RCL) between a Blazor Web App and a MAUI Blazor Hybrid app is the standard architecture: put shared components and services in the RCL, then reference it from both the web project and the MAUI project, using #if MAUI or interface abstractions (like an ILocationService) for any native-only functionality the web target can't fulfill.

Blazor Hybrid runs Razor components natively inside a MAUI app's embedded web view via a local IPC bridge, not SignalR or real HTTP.
There is no network round trip per interaction and no WASM download; execution is in-process, comparable in speed to any native MAUI page.
BlazorWebView abstracts the platform web view's JS-native bridge so component code calls .NET APIs directly instead of hand-written JS interop.
Injected MAUI services (IGeolocation, ICamera, IFileSystem, etc.) are available to Razor components through standard dependency injection.
Server-only Blazor features (SignalR circuits, server middleware) don't apply in Blazor Hybrid since there's no server involved.
Sharing a Razor Class Library between a web project and a MAUI project is the standard way to reuse UI and logic across web and native targets.
Platform-specific functionality not available on web can be abstracted behind interfaces so shared components remain portable.

Practice what you learned

1. What mechanism does Blazor Hybrid use to run Razor components inside a .NET MAUI app?

2. How do Blazor Hybrid components access native device features like the camera or GPS?

3. Why doesn't a Blazor Server feature like a SignalR circuit apply to Blazor Hybrid?

4. What is the standard architecture for sharing UI code between a Blazor Web App and a MAUI Blazor Hybrid app?

5. Compared to Interactive WebAssembly, what network dependency does Blazor Hybrid avoid entirely?

Was this page helpful?

Performance Optimization and Virtualization

Component Libraries: MudBlazor and Radzen

Related Study Notes in Microsoft Technologies

Browse all study notes

Microsoft Technologies

Windows 10 / UWP Development Study Notes

.NET · 30 topics

Microsoft Technologies

Windows Batch Scripting Study Notes

Batch · 30 topics

Microsoft Technologies

MFC (Microsoft Foundation Classes) Study Notes

C++ · 30 topics

Microsoft Technologies

Silverlight Study Notes

.NET · 30 topics

Microsoft Technologies

XAML Study Notes

.NET · 30 topics

Microsoft Technologies

WPF (Windows Presentation Foundation) Study Notes

.NET · 30 topics

Topics covered

#BlazorStudyNotes#MicrosoftTechnologies#BlazorHybridWithNETMAUI#Blazor#Hybrid#NET#MAUI#StudyNotes#SkillVeris#ExamPrep

Blazor Hybrid with .NET MAUI