https://github.com/soenneker/soenneker.maui.blazor.bridge
Seamlessly connects MAUI and Blazor, enabling smooth integration of native components into Blazor
https://github.com/soenneker/soenneker.maui.blazor.bridge
blazor bridge callback csharp dotnet interop js jsruntime maui mauiblazorbridge mauilibrary razor
Last synced: 9 days ago
JSON representation
Seamlessly connects MAUI and Blazor, enabling smooth integration of native components into Blazor
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.maui.blazor.bridge
- Owner: soenneker
- License: mit
- Created: 2025-03-01T01:51:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-05-08T20:30:49.000Z (22 days ago)
- Last Synced: 2026-05-08T22:35:06.475Z (22 days ago)
- Topics: blazor, bridge, callback, csharp, dotnet, interop, js, jsruntime, maui, mauiblazorbridge, mauilibrary, razor
- Language: HTML
- Homepage: https://soenneker.com
- Size: 1.19 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
#  Soenneker.Maui.Blazor.Bridge
[](https://www.nuget.org/packages/soenneker.maui.blazor.bridge/)
[](https://github.com/soenneker/soenneker.maui.blazor.bridge/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.maui.blazor.bridge/)
[](https://github.com/soenneker/soenneker.maui.blazor.bridge/actions/workflows/codeql.yml)
### Effortlessly integrate MAUI components within BlazorWebView, enabling seamless interaction between Blazor and native MAUI UI elements.
---
## Features
- Embed MAUI components directly inside **BlazorWebView** like HTML elements.
- Maintain a structured overlay system for native elements.
- Provides **typed** and **generic** bridges for flexible component integration.
---
## Installation
Install the package via NuGet:
```sh
dotnet add package Soenneker.Maui.Blazor.Bridge
```
Register the interop in `CreateMauiApp`:
```csharp
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder.Services.AddMauiBlazorBridgeAsScoped();
}
```
---
## Layout Setup
To integrate MAUI components within BlazorWebView, modify your `MainPage.xaml`.
Wrap the **BlazorWebView** inside a `Grid`, and include an **AbsoluteLayout** (`OverlayContainer`) to host native elements:
```xml
```
This setup ensures that MAUI-native elements overlay correctly within your BlazorWebView.
---
## Usage
To bridge MAUI elements into Blazor, use either:
- **`MauiBlazorTypedBridge`** (Typed binding)
- **`MauiBlazorGenericBridge`** (Generic binding)
### Example: Embedding a `MauiLabel` in Blazor
```razor
@page "/"
@implements IAsyncDisposable
@code {
MauiLabel? _label;
MauiBlazorTypedBridge? _bridge;
protected override void OnInitialized()
{
_label = new MauiLabel
{
Text = "This is a MAUI Label",
BackgroundColor = Colors.Transparent,
TextColor = Colors.Black
};
}
public async ValueTask DisposeAsync()
{
if (_bridge != null)
await _bridge.DisposeAsync();
}
}
```
This example adds a **MauiLabel** component inside a Blazor page, allowing it to function within the BlazorWebView.