skills.rest
snailb1007
snailb1007COMMUNITY
Explore all skills by this author →
GitHub

maui-hybridwebview

Bridge JavaScript and C# in .NET MAUI hybrid apps.

Updated Apr 21, 2026
Search Tags:#javascript#interop#webview#maui#json-serialization#hybridwebview
One-click install
npx skills add https://github.com/snailb1007/snail-codex-skills --skill maui-hybridwebview-snailb1007
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: maui-hybridwebview
Source: https://github.com/snailb1007/snail-codex-skills/tree/main/skills/maui-hybridwebview
Command: npx skills add https://github.com/snailb1007/snail-codex-skills --skill maui-hybridwebview-snailb1007

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

HybridWebView lets you embed HTML/JS/CSS inside a .NET MAUI application with bidirectional communication between JavaScript and C#. It is not a general browser control; it is designed for local web content shipped with the app.

Core Features & Use Cases

  • Web assets under Resources/Raw/wwwroot (default root) and index.html as entry point.
  • Bridge script is mandatory and must be loaded before app scripts.
  • Typed interop using a JsonSerializerContext with [JsonSerializable] types for all interop surfaces.
  • Raw messaging support for unstructured data exchanges.
  • JavaScript exceptions can be forwarded to .NET and should be handled with try/catch.

Quick Start

Create a MAUI page with a HybridWebView, set DefaultFile to index.html, register the JS bridge with SetInvokeJavaScriptTarget, and call InvokeJavaScriptAsync to execute JS functions or receive results.

Frequently Asked Questions about maui-hybridwebview

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable JavaScript to C# interop in a MAUI hybrid app?▼

JavaScript to C# interop in a MAUI hybrid app is enabled by registering a C# method using SetInvokeJavaScriptTarget. This creates a bidirectional bridge allowing local web content to invoke native .NET code with typed data.

What is the correct way to organize local web assets for a MAUI HybridWebView?▼

Local web assets for a MAUI HybridWebView must be organized under the Resources/Raw/wwwroot directory. The control uses index.html as the default entry point to load the embedded HTML, CSS, and JavaScript content.

How do I serialize typed data for bidirectional JavaScript interop in MAUI?▼

To serialize typed data for bidirectional JavaScript interop in MAUI, define a JsonSerializerContext and apply the [JsonSerializable] attribute to your interop types. This ensures reliable, typed data exchange between C# and JavaScript.

Does the MAUI HybridWebView support sending raw, unstructured messages between JS and C#?▼

Yes, the MAUI HybridWebView supports raw messaging for unstructured data exchanges. This allows you to send and receive simple string messages between JavaScript and C# without needing defined typed serialization contracts.

Why is my JavaScript bridge script not working in the MAUI HybridWebView?▼

The JavaScript bridge script in MAUI HybridWebView will not work if it is not loaded before your app scripts. The bridge script is mandatory and must be ordered first to properly initialize the interop communication channel.

Related Skills

Explore More Software Engineering Skills→
TheBushidoCollectiveTheBushidoCollective
187

Nim C Interop

Enable Nim-C interop with importc/exportc pragmas and typed boundaries.

Official
Advanced
anorthamanortham
3

detect-empty-catch

Detect empty catch blocks and swallowed exceptions across C#, TypeScript, Python, Java, and Go.

Community
Advanced
iButtersiButters
3

maui-blazor-development

Guide .NET MAUI Blazor Hybrid development with architecture and BlazorWebView configuration.

Community
Advanced
HabitaNexusHabitaNexus
1

WebView Integration

Configure flutter_inappwebview with a JavaScript bridge for bidirectional Flutter-Web communication.

Official
Intermediate