Host a Blazor web app in a .NET MAUI app using BlazorWebView

The .NET Multi-platform App UI (.NET MAUI) BlazorWebView is a control that enables you to host a Blazor web app in your .NET MAUI app. These apps, known as Blazor Hybrid apps, enable a Blazor web app to be integrated with platform features and UI controls. The BlazorWebView control can be added to any page of a .NET MAUI app, and pointed to the root of the Blazor app. The Razor components run natively in the .NET process and render web UI to an embedded web view control. In .NET MAUI, Blazor Hybrid apps can run on all the platforms supported by .NET MAUI.

BlazorWebView defines the following properties:

  • HostPage, of type string?, which defines the root page of the Blazor web app.
  • RootComponents, of type RootComponentsCollection, which specifies the collection of root components that can be added to the control.

The RootComponent class defines the following properties:

  • Selector, of type string?, which defines the CSS selector string that specifies where in the document the component should be placed.
  • ComponentType, of type Type?, which defines the type of the root component.
  • Parameters, of type IDictionary<string, object?>?, which represents an optional dictionary of parameters to pass to the root component.

In addition, BlazorWebView defines the following events:

  • BlazorWebViewInitializing, with an accompanying BlazorWebViewInitializingEventArgs object, which is raised before the BlazorWebView is initialized. This event enables customization of the BlazorWebView configuration.
  • BlazorWebViewInitialized, with an accompanying BlazorWebViewInitializedEventArgs object, which is raised after the BlazorWebView is initialized but before any component has been rendered. This event enables retrieval of the platform-specific web view instance.
  • UrlLoading, with an accompanying UrlLoadingEventArgs object, is raised when a hyperlink is clicked within a BlazorWebView. This event enables customization of whether a hyperlink is opened in the BlazorWebView, in an external app, or whether the URL loading attempt is cancelled.

Existing Razor components can be used in a .NET MAUI Blazor app by moving the code into the app, or by referencing an existing class library or package that contains the component. For more information, see Reuse Razor components in ASP.NET Core Blazor Hybrid.

Browser developer tools can be used to inspect .NET MAUI Blazor apps. For more information, see Use browser developer tools with ASP.NET Core Blazor Hybrid.


While Visual Studio installs all the required tooling to develop .NET MAUI Blazor apps, end users of .NET MAUI Blazor apps on Windows must install the WebView2 runtime.

For more information about Blazor Hybrid apps, see ASP.NET Core Blazor Hybrid.

Create a .NET MAUI Blazor app

A .NET MAUI Blazor app can be created in Visual Studio by the .NET MAUI Blazor app template:

.NET MAUI Blazor app project template screenshot.

This project template creates a multi-targeted .NET MAUI Blazor app that can be deployed to Android, iOS, macOS, and Windows. For step-by-step instructions on creating a .NET MAUI Blazor app, see Build a .NET MAUI Blazor app.

The BlazorWebView created by the project template is defined in MainPage.xaml, and points to the root of the Blazor app:

<ContentPage xmlns=""
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView HostPage="wwwroot/index.html">
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />


The root Razor component for the app is in Main.razor, which Razor compiles into a type named Main in the application's root namespace. The rest of the Razor components are in the Pages and Shared project folders, and are identical to the components used in the default Blazor web template. Static web assets for the app are in the wwwroot folder.

Add a BlazorWebView to an existing app

The process to add a BlazorWebView to an existing .NET MAUI app is as follows:

  1. Add the Razor SDK, Microsoft.NET.Sdk.Razor to your project by editing its first line of the CSPROJ project file:

    <Project Sdk="Microsoft.NET.Sdk.Razor">

    The Razor SDK is required to build and package projects containing Razor files for Blazor projects.

  2. Add the root Razor component for the app to the project.

  3. Add your Razor components to project folders named Pages and Shared.

  4. Add your static web assets to a project folder named wwwroot.

  5. Add any optional _Imports.razor files to your project.

  6. Add a BlazorWebView to a page in your .NET MAUI app, and point it to the root of the Blazor app:

    <ContentPage xmlns=""
        <BlazorWebView HostPage="wwwroot/index.html">
                <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
  7. Modify the CreateMauiApp method of your MauiProgram class to register the BlazorWebView control for use in your app. To do this, on the IServiceCollection object, call the AddMauiBlazorWebView method to add component web view services to the services collection:

    public static class MauiProgram
        public static MauiApp CreateMauiApp()
            var builder = MauiApp.CreateBuilder();
                .ConfigureFonts(fonts =>
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    #if DEBUG
            // Register any app services on the IServiceCollection object
            // e.g. builder.Services.AddSingleton<WeatherForecastService>();
            return builder.Build();