WebView.Avalonia

After initializing services, you must call the platform-specific extension methods in your application's entry point to enable the WebView engine.

// Desktop: In Program.cs
using Avalonia.WebView.Desktop;

public static AppBuilder BuildAvaloniaApp() => AppBuilder.Configure<App>()
    .UsePlatformDetect()
    .LogToTrace()
    .UseReactiveUI()
    .UseDesktopWebView(); // Add this

// Android: In SplashActivity.cs
using Avalonia.WebView.Android;

protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
{
    return base.CustomizeAppBuilder(builder)
        .UseReactiveUI()
        .UseAndroidWebView(); // Add this
}

// iOS: In AppDelegate.cs
using Avalonia.WebView.iOS;

protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
{
    return builder.UseReactiveUI()
        .UseIosWebView(); // Add this
}

To develop with Avalonia.WebView, ensure your environment meets the following requirements:

• IDE: VisualStudio 2022 or higher, or JetBrains Rider.
• Runtime: .NET 7 runtime (version 7.0.0 or higher). You can modify this version using a global.json file if necessary.
• Workloads: Install workloads for Android, iOS, Wasm, and MacOS.
• Windows Configuration: Enable Long Path Support in the Windows registry to avoid file path limitations.

After initializing services, you must enable the WebView platform support in the entry point of each specific platform project.

// Desktop: In Program.cs
using Avalonia.WebView.Desktop;

public static AppBuilder BuildAvaloniaApp() => AppBuilder.Configure<App>()
    .UsePlatformDetect()
    .LogToTrace()
    .UseReactiveUI()
    .UseDesktopWebView(); // Add this

// Android: In SplashActivity.cs
using Avalonia.WebView.Android;

protected override AppBuilder CustomizeAppBuilder(AppBuilder builder) => base.CustomizeAppBuilder(builder)
    .UseReactiveUI()
    .UseAndroidWebView(); // Add this

// iOS: In AppDelegate.cs
using Avalonia.WebView.iOS;

protected override AppBuilder CustomizeAppBuilder(AppBuilder builder) => builder
    .UseReactiveUI()
    .UseIosWebView(); // Add this

Install the appropriate packages based on your project type. You will typically need a shared package for your AvaloniaUI shared project and platform-specific packages for your target platforms.

# For the AvaloniaUI shared project
dotnet add package WebView.Avalonia
# OR for Blazor support
dotnet add package BlazorWebView.Avalonia

# For the Desktop project
dotnet add package WebView.Avalonia.Desktop

# For the Android project
dotnet add package WebView.Avalonia.Android

# For the iOS project
dotnet add package WebView.Avalonia.iOS

You must register the WebView services in your App.axaml.cs file by overriding RegisterServices. You can choose between standard WebView or BlazorWebView.

using AvaloniaWebView;
// OR
using AvaloniaBlazorWebView;

public override void RegisterServices()
{
    base.RegisterServices();
    
    // Option 1: Standard WebView
    AvaloniaWebViewBuilder.Initialize(default);

    // Option 2: BlazorWebView with configuration
    AvaloniaBlazorWebViewBuilder.Initialize(default, setting =>
    {
        setting.ComponentType = typeof(AppWeb);
        setting.Selector = "#app";
        // Required for Avalonia resources (HTML/CSS/JS)
        setting.IsAvaloniaResource = true;
        setting.ResourceAssembly = typeof(AppWeb).Assembly;
    }, inject =>
    {
        // Dependency injection for resources
        inject.AddSingleton<WeatherForecastService>();
    });
}

To use WebView in your Avalonia project, you must install the core package in your shared project and the platform-specific packages in your respective platform projects.

1. Shared Project: Install either WebView.Avalonia or BlazorWebView.Avalonia.
2. Desktop Project: Install WebView.Avalonia.Desktop.
3. Android Project: Install WebView.Avalonia.Android.
4. iOS Project: Install WebView.Avalonia.iOS.

# In your shared project
dotnet add package WebView.Avalonia
# OR
dotnet add package BlazorWebView.Avalonia

# In your desktop project
dotnet add package WebView.Avalonia.Desktop

# In your Android project
dotnet add package WebView.Avalonia.Android

# In your iOS project
dotnet add package WebView.Avalonia.iOS

WebView.Avalonia versions are closely tied to Avalonia versions. Note that new features and fixes are not backported to older Avalonia preview versions.

Avalonia.WebView uses the following underlying technologies for each platform:

The WebView implementation uses the following native technologies depending on the target platform:

Avalonia.WebView versions are tied to Avalonia preview versions. New features and fixes are not backported to older Avalonia previews.