Blazor Hybrid Apps with .NET MAUI

Introduction

Modern users expect applications to work seamlessly across desktops and mobile devices while delivering a consistent user experience. Traditionally, building native applications for Android, iOS, Windows, and macOS required separate technologies and codebases, increasing development time and maintenance costs.

Blazor Hybrid combines the power of .NET MAUI and Blazor to help developers build cross-platform native applications using C#, Razor components, HTML, and CSS. Instead of writing platform-specific UI for every operating system, developers can reuse web UI components while still accessing native device capabilities.

In this article, you'll learn what Blazor Hybrid is, how it works with .NET MAUI, and the best practices for building cross-platform applications.

What Is Blazor Hybrid?

Blazor Hybrid is a development model that allows Razor components to run inside a native .NET MAUI application.

Unlike Blazor WebAssembly or Blazor Server, the UI is rendered within a native application using a BlazorWebView control.

This approach combines:

• Native application performance

• Cross-platform support

• Shared Razor components

• Full .NET API access

• Native device integration

Applications can target multiple platforms from a single codebase.

Why Use Blazor Hybrid?

Blazor Hybrid offers several advantages for .NET developers.

Some of the key benefits include:

• Shared UI across platforms

• Single C# codebase

• Access to native device APIs

• Faster development

• Reduced maintenance

• Native application experience

• Reuse of existing Blazor components

It is an excellent choice for organizations already invested in the .NET ecosystem.

Supported Platforms

Applications built with .NET MAUI and Blazor Hybrid can run on:

• Android

• iOS

• Windows

• macOS

The same Razor components can be reused across all supported platforms with minimal platform-specific code.

Blazor Hybrid Architecture

A typical Blazor Hybrid application consists of:

• .NET MAUI host application

• BlazorWebView

• Razor components

• Shared business logic

• Native platform services

The MAUI application hosts the Blazor UI while providing access to device features through .NET APIs.

Create a Blazor Hybrid App

Create a new Blazor Hybrid project using the .NET CLI.

dotnet new maui-blazor -n HybridApp

This template creates a .NET MAUI application with Blazor already configured.

Project Structure

A typical project structure looks like this:

HybridApp
│
├── Platforms
├── Resources
├── wwwroot
├── Components
├── App.xaml
├── MainPage.xaml
└── MauiProgram.cs

The Components folder contains reusable Razor components, while wwwroot stores static assets such as CSS and images.

Configure BlazorWebView

The main page hosts the Blazor application using the BlazorWebView control.

<BlazorWebView
    HostPage="wwwroot/index.html">
</BlazorWebView>

This control renders Razor components inside the native application window.

Create a Razor Component

Create a simple Razor component.

<h3>Welcome</h3>

<p>Hello from Blazor Hybrid!</p>

The component behaves the same way as it would in a Blazor web application.

Register Services

Register services using dependency injection.

builder.Services.AddSingleton<ProductService>();

Dependency injection works consistently across ASP.NET Core and .NET MAUI applications, allowing business logic to be shared.

Access Native Device Features

Blazor Hybrid applications can use .NET MAUI APIs to access native device capabilities.

Example:

var batteryLevel = Battery.Default.ChargeLevel;

Other supported features include:

• Camera

• GPS

• File system

• Sensors

• Device information

• Connectivity

• Secure storage

These APIs enable developers to build feature-rich native applications.

Share Business Logic

One of the biggest advantages of Blazor Hybrid is code reuse.