---
title: "What’s New for .NET MAUI in .NET 9: HybridWebView"
published_at: "2024-10-17T11:04:36+00:00"
modified_at: "2026-02-10T12:55:39+00:00"
url: "https://www.syncfusion.com/blogs/post/whats-new-maui-net9-hybridwebview"
excerpt: "Discover the new features for .NET MAUI in .NET 9, including HybridWebView, control upgrades, and performance boosts for better apps."
taxonomy_category:
- ".NET"
- ".NET MAUI"
- "Data Grid"
- "Desktop"
- "Web Development"
- "What's new"
taxonomy_post_tag:
- ".NET MAUI"
- ".NET9"
- "HybridWebView"
- "React Data Grid"
- "What's New"
---
# What’s New for .NET MAUI in .NET 9: HybridWebView
[Naveenkumar Sanjeevirayan](https://www.syncfusion.com/blogs/author/naveenkumar-sanjeevirayan)
**TL;DR:**.NET 9 brings new features for .NET MAUI, including improved controls, HybridWebView integration, and better performance. This blog covers key updates and provides a step-by-step guide to implementing the Syncfusion React Data Grid with HybridWebView in your app.
## Introduction
The [.NET Multi-Platform App UI (.NET MAUI)](https://dotnet.microsoft.com/en-us/apps/maui)
continues to evolve, gaining new features and improvements with each release. In .NET 9, developers can expect enhanced controls, better performance, and more robust testing capabilities. This blog explores the new features for .NET MAUI in .NET 9 and provides a step-by-step guide on integrating the [Syncfusion React Data Grid](https://www.syncfusion.com/react-components/react-data-grid)
component into the [HybridWebView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/hybridwebview?view=net-maui-9.0)
control.
## HybridWebView: Bridging Web and Native Worlds
The [HybridWebView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/hybridwebview?view=net-maui-9.0)
control in .NET MAUI allows developers to host HTML, JavaScript, and CSS content directly within their applications. This control is handy for **seamlessly integrating web-based functionality** into your app’s native experience.
## Step-by-Step Guide: Building with HybridWebView
### Step 1: Set Up Your Development Environment
To get started, make sure you have the following setup:
- **Visual Studio 2022**: Install version 17.3 or later with the .NET MAUI development workload.
- **.NET 9 SDK**: Ensure the latest SDK is installed.
### Step 2: Create a New .NET MAUI Project
Open Visual Studio and create a new .NET MAUI App project.
### Step 3: Add Web Content to Your Project
Create a folder named `wwwroot` under your project’s `Resources/Raw` directory. This folder will contain your HTML, JavaScript, and CSS files. You can start with a basic `index.html` file.
Here’s an example of what your `index.html` might look like:
```
Vite + React + TS
```
### Step 4: Integrate the Syncfusion React Data Grid
In this guide, I’ll demonstrate how to integrate the Syncfusion React Data Grid component as web content within the HybridWebView.
To start with React, a recommended approach is to scaffold a project using [Vite](https://vite.dev/)
. Follow the steps in the Syncfusion documentation [Getting Started with React UI Components with Vite](https://ej2.syncfusion.com/react/documentation/getting-started/vite)
to create a React project with the Data Grid component.
After setting up the React project, build it using the following command.
```
npm run build
```
The output will be placed in the `/dist` folder, containing all the necessary HTML, JavaScript, and CSS files. Copy these files into the MAUI project’s `Resources/Raw/wwwroot` folder.
### Step 5: Bundle the Project into a Single File (Optional)
For simplicity, you can bundle the entire project into a single file.
- First, install the **Vite single file** plugin using the next command.
```
npm install vite-plugin-singlefile –save-dev
```
- Modify the `vite.config.js` file to include this plugin.
```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), viteSingleFile()],
})
```
- Run the following command to build the project.
```
npm run build
```
- Then, the project is bundled inside the /dist folder. Copy and paste all the files inside the **/dist** folder into the MAUI project’s ** Resources\Raw\wwwroot** folder.
### Step 6: Update XAML to Include HybridWebView
Now, integrate the [HybridWebView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/hybridwebview?view=net-maui-9.0)
control in your XAML.
```
```
Key Considerations:
- **DefaultFile**: Specifies the file within the ** HybridRoot** that will be served as the default. The default value is ** index.html**.
- **HybridRoot**: The path within the app’s raw asset resources containing the web content. The default value is ** wwwroot**, which is mapping to ** Resources/Raw/wwwroot**.
The HybridWebView will look for the index.html file in the **Resources/Raw/wwwroot** directory in this setup.
### Step 7: Run Your Application
Finally, build and run your application to see the **HybridWebView** in action.
## GitHub Reference
You can check out the complete working example of this in [GitHub](https://github.com/SyncfusionExamples/Syncfusion-React-Grid-HybridWebView)
.
## TitleBar for Windows: Customizing Your App’s Appearance
The TitleBar control in .NET MAUI allows you to customize the title bar of your Windows application. This can help you create a more integrated and polished user experience. Here’s a simple example to get you started:
```
Window window = new Window();
window.TitleBar = new TitleBar
{
Title = "MAUI App",
Background = Colors.Blue,
HeightRequest = 60,
Content = new Entry()
{
Margin = 5,
Placeholder = "Search",
WidthRequest = 300,
HeightRequest = 30
}
};
```
Refer to the output of the above code example.
## Control Enhancements
.NET 9 brings several control enhancements that improve the development experience and performance of applications:
- **BackButtonBehavior**: The ** IsVisible** and ** IsEnabled** properties in ** BackButtonBehavior** in Shell apps are now using ** BindingMode.OneWay**. This change ensures the back button’s visibility and enabled state dynamically respond to changes in the underlying data, providing a more responsive user interface.
- **BlazorWebView**: In iOS and Mac Catalyst, the default behavior for hosting content in a ** BlazorWebView** has been updated to use ** localhost**. This update enhances the security and performance of web content hosted within a .NET MAUI application, making it more robust and efficient.
- **CollectionView and CarouselView**: The CollectionView and CarouselView controls have received performance improvements and additional features. These enhancements make it easier to handle large data sets and provide a smoother user experience, especially when displaying collections of items in a swipeable format.
## Conclusion
Thank you for reading! .NET 9 for .NET MAUI introduces new features and improvements that make building cross-platform applications more efficient and enjoyable. Start exploring these features today to take your .NET MAUI applications to the next level.
Follow the steps in this blog and share your feedback in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We are always happy to assist you!
## Related blogs
- [AI-Driven Smart PDF Form Filling in .NET MAUI PDF Viewer](https://www.syncfusion.com/blogs/post/smart-form-filling-in-maui-pdf-viewer)
- [Create Stunning Gym Subscription UI in .NET MAUI](https://www.syncfusion.com/blogs/post/gym-subscription-ui-in-dotnet-maui)
- [AI-Driven Smart Location Search in .NET MAUI Maps](https://www.syncfusion.com/blogs/post/smart-location-search-in-maui-maps)
- [View 100+ Years of Economic Superpowers’ Exports with .NET MAUI Stacked Area Chart](https://www.syncfusion.com/blogs/post/view-exports-with-maui-stacked-area-chart)