Blazor Hybrid Strategies

In this lesson, you will learn how to leverage .NET MAUI to host your Blazor components directly inside a native desktop or mobile application, bridging the gap between web-based UI and native platform capabilities.

Understanding the Blazor Hybrid Model

In traditional Blazor development, your UI runs in a browser or on a server. With Blazor Hybrid, your components are hosted within a BlazorWebView inside a .NET MAUI application. This isn't a browser; it’s a native container that renders your Razor components using the underlying platform's web view control (like WebView2 on Windows or WKWebView on iOS).

The power of this strategy is the shared runtime. Because your Blazor components and the native MAUI code run within the same .NET process, they share the same memory space. You no longer need complex JavaScript Interop to communicate between your UI and the underlying OS—you can inject native services directly into your Blazor components.

Bridging Native Capabilities

When your Razor components are inside a BlazorWebView, they gain direct access to Dependency Injection (DI) services registered in the MAUI application startup. This allows you to call native APIs (like GPS, file system, or hardware sensors) as easily as you call a local service.

For example, if you have a native IGeolocationService in your MAUI project, you can simply inject it into a Razor component:

@inject IGeolocationService GeoService

<button @onclick="GetLocation">Where am I?</button>

@code {
    private async Task GetLocation() {
        // Direct call to the native C# service
        var location = await GeoService.GetLastKnownLocationAsync();
        Console.WriteLine($"Lat: {location.Latitude}");
    }
}

By keeping your UI logic in Razor components and your platform-specific logic in C# services, you maintain a clean separation of concerns. You aren't just "embedding a website"; you are extending the reach of your Blazor components to the file system, hardware, and native OS APIs with full type safety and zero overhead from the browser sandbox.

Key Takeaway: Blazor Hybrid allows you to run Razor components inside a native shell, enabling direct, high-performance interaction between your UI and native device APIs via shared DI containers.