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.

Shared code can include:

• Services

• Models

• Validation logic

• API clients

• Utility classes

This reduces duplication and simplifies maintenance across multiple platforms.

Navigation

Blazor Hybrid uses the same routing model as Blazor.

Example:

@page "/products"

<h3>Products</h3>

Developers familiar with Blazor can use existing routing concepts without significant changes.

Styling the Application

Blazor Hybrid supports standard web technologies for styling.

You can use:

• CSS

• CSS isolation

• Bootstrap

• Custom styles

This enables teams to reuse existing front-end assets and design systems.

Performance Considerations

To achieve optimal performance:

• Keep Razor components focused and reusable.

• Avoid unnecessary component re-rendering.

• Load data asynchronously.

• Cache frequently used data where appropriate.

• Optimize images and static resources.

Efficient component design helps deliver a smooth user experience across platforms.

Best Practices

When developing Blazor Hybrid applications:

• Separate UI from business logic.

• Reuse Razor components whenever possible.

• Use dependency injection consistently.

• Keep components small and maintainable.

• Access native APIs through .NET MAUI abstractions.

• Store sensitive information using secure storage.

• Test the application on each supported platform.

• Optimize startup time and resource usage.

These practices improve maintainability and application performance.

Common Mistakes to Avoid

Avoid these common issues when building Blazor Hybrid applications:

• Placing all logic inside Razor components.

• Ignoring platform-specific behavior.

• Blocking the UI thread with long-running operations.

• Recreating services unnecessarily.

• Overusing JavaScript when native .NET APIs are available.

• Failing to test on physical devices.

• Neglecting responsive layouts for different screen sizes.

Keeping the application modular and platform-aware results in a better user experience.

Blazor Hybrid vs Blazor WebAssembly

The following comparison highlights the differences.

Blazor Hybrid is ideal for native cross-platform applications, while Blazor WebAssembly targets web browsers.

Conclusion

Blazor Hybrid with .NET MAUI provides a powerful way to build native cross-platform applications using familiar web technologies such as C#, Razor components, HTML, and CSS. By combining the flexibility of Blazor with the native capabilities of .NET MAUI, developers can reuse code across platforms while delivering rich, high-performance applications.

By following best practices such as separating business logic, reusing components, leveraging dependency injection, and optimizing performance, you can build maintainable, scalable, and modern applications for Android, iOS, Windows, and macOS from a single .NET codebase.