MonacoEditor.WinUI3 0.3.0

MonacoEditor.WinUI3

A NuGet package that wraps the Monaco Editor (the code editor that powers VS Code) as a WinUI 3 control using WebView2. Drop it into any WinUI 3 app and get a full-featured code editor with two-way data binding, IntelliSense, syntax highlighting for 70+ languages, and theming.

Features

• Two-way Text binding: bind the editor content to your ViewModel with {x:Bind Text, Mode=TwoWay}
• Rich async API: GetTextAsync, InsertTextAtCursorAsync, GetSelectedTextAsync, SetCursorPositionAsync, TriggerActionAsync, and more
• Events: EditorReady, TextChanged
• Automatic layout: the editor resizes with its container
• Bundled by default: Monaco files are included in the package; no internet connection required. CDN loading is available as an opt-in.

Quick Start

1. Install

dotnet add package MonacoEditor.WinUI3

Or via NuGet Package Manager in Visual Studio, search for MonacoEditor.WinUI3.

2. Add the namespace

To your Window or Page XAML open tag, add xmlns:monaco="using:MonacoEditor.WinUI3":

<Window
    xmlns:monaco="using:MonacoEditor.WinUI3"
    ...>

3. Use the control

<monaco:MonacoEditorControl
    Text="{x:Bind MyCode, Mode=TwoWay}"
    EditorLanguage="csharp"
    EditorTheme="vs-dark" />

That's it. The editor loads Monaco from bundled local files.

Full Example (MVVM)

<Page xmlns:monaco="using:MonacoEditor.WinUI3">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        
        <monaco:MonacoEditorControl
            Text="{x:Bind ViewModel.SourceCode, Mode=TwoWay}"
            EditorLanguage="{x:Bind ViewModel.Language, Mode=OneWay}"
            EditorTheme="{x:Bind ViewModel.Theme, Mode=OneWay}"
            IsReadOnly="{x:Bind ViewModel.IsReadOnly, Mode=OneWay}"
            EditorReady="OnEditorReady"
            TextChanged="OnTextChanged" />

        <TextBlock Grid.Row="1"
                   Text="{x:Bind ViewModel.StatusMessage, Mode=OneWay}"
                   Padding="12,6" />
    </Grid>
</Page>

public partial class EditorViewModel : ObservableObject
{
    [ObservableProperty] 
    public partial string SourceCode { get; set; } = "// Hello, Monaco!";
    [ObservableProperty] 
    public partial string Language { get; set; } = "javascript";
    [ObservableProperty] 
    public partial string Theme { get; set; } = "vs-dark";
    [ObservableProperty] 
    public partial bool IsReadOnly { get; set; } = false;
    [ObservableProperty] 
    public partial string StatusMessage { get; set; } = "";
}

API Reference

Properties

Events

Async Methods

// Get/set text
Task<string> GetTextAsync()

// Editor options (pass any Monaco IEditorOptions as JSON)
Task SetOptionsAsync(string optionsJson)

// Cursor & selection
Task<(int Line, int Column)> GetCursorPositionAsync()
Task SetCursorPositionAsync(int lineNumber, int column)
Task<string> GetSelectedTextAsync()
Task InsertTextAtCursorAsync(string text)

// Focus & actions
Task FocusEditorAsync()
Task TriggerActionAsync(string actionId)

Example: Trigger Format Document

await Editor.TriggerActionAsync("editor.action.formatDocument");

Example: Custom Editor Options

await Editor.SetOptionsAsync("""
{
    "fontSize": 16,
    "minimap": { "enabled": false },
    "lineNumbers": "relative",
    "wordWrap": "bounded",
    "wordWrapColumn": 100
}
""");

How It Works

┌─────────────────────────────────────┐
│          WinUI 3 Application        │
│                                     │
│   ┌─────────────────────────────┐   │
│   │   MonacoEditorControl       │   │
│   │   (TemplatedControl)        │   │
│   │                             │   │
│   │   DP: Text ←──TwoWay──→ VM  │   │
│   │   DP: Language, Theme, ...  │   │
│   │                             │   │
│   │   ┌─────────────────────┐   │   │
│   │   │     WebView2        │   │   │
│   │   │                     │   │   │
│   │   │  ┌───────────────┐  │   │   │
│   │   │  │ Monaco Editor │  │   │   │
│   │   │  │  (index.html) │  │   │   │
│   │   │  └───────────────┘  │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

  C# → JS:  ExecuteScriptAsync("setText(...)")
  JS → C#:  chrome.webview.postMessage({ type, text })

• C# to JavaScript: The control calls ExecuteScriptAsync to invoke functions defined in the hosted HTML page (setText, setLanguage, setTheme, etc.)
• JavaScript to C#: Monaco's onDidChangeModelContent event triggers postMessage back to the C# WebMessageReceived handler, which updates the Text dependency property
• Echo suppression: A flag prevents infinite update loops when the binding updates flow in both directions

Loading Modes

Bundled (default, zero config)

Monaco is bundled with the NuGet package and loaded from local files. No internet connection is needed, which is ideal for desktop and store-distributed apps.

CDN / Self-hosted

To load Monaco from a CDN or self-hosted URL instead of the bundled files, set MonacoBaseUrl explicitly:

<monaco:MonacoEditorControl
    MonacoBaseUrl="https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min"
    ... />

This requires an internet connection at runtime.

Requirements

• .NET 8 or .NET 9 (multi-targeted)
• Windows App SDK 1.8+ (WinUI 3)
• WebView2 Runtime (ships with Windows 11; auto-installs with Edge on Windows 10)
• Windows 10 version 1809 (build 17763) or later

License

This project is MIT licensed, see LICENSE.

Monaco Editor itself is licensed under the MIT License by Microsoft.