FluentUI.Blazor.Monaco.EditorPack 0.2.2-preview

.NET 9.0 This package targets .NET 9.0. The package is compatible with this framework or higher.
This is a prerelease version of FluentUI.Blazor.Monaco.EditorPack. 
dotnet add package FluentUI.Blazor.Monaco.EditorPack --version 0.2.2-preview
                    


                    

                
NuGet\Install-Package FluentUI.Blazor.Monaco.EditorPack -Version 0.2.2-preview
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="FluentUI.Blazor.Monaco.EditorPack" Version="0.2.2-preview" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="FluentUI.Blazor.Monaco.EditorPack" Version="0.2.2-preview" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="FluentUI.Blazor.Monaco.EditorPack" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add FluentUI.Blazor.Monaco.EditorPack --version 0.2.2-preview
                    


                    

                
#r "nuget: FluentUI.Blazor.Monaco.EditorPack, 0.2.2-preview"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package FluentUI.Blazor.Monaco.EditorPack@0.2.2-preview
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=FluentUI.Blazor.Monaco.EditorPack&version=0.2.2-preview&prerelease
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=FluentUI.Blazor.Monaco.EditorPack&version=0.2.2-preview&prerelease
                    


                            Install as a Cake Tool

FluentUI Blazor Monaco Editor Pack

Editor Pack{width="300"}

Monaco Editor integration for Blazor with FluentUI components — includes Markdown and CSS editors with IntelliSense, live preview, and theme integration.

NuGet

Live Demo

Try the interactive demo

Screenshots

Markdown Editor

CSS Editor

Features

  • Markdown Editor — Live preview, CSS class IntelliSense, toolbar, undo/redo
  • CSS Editor — FluentUI design token IntelliSense, color swatches, auto‑completion
  • Theme Integration — Automatic dark/light mode support
  • Monaco lifecycle hooks — Run code before Monaco is created and after the editor instance is available
  • Configurable Markdig pipeline — Toggle common Markdig extensions via MarkdownOptions
  • Unified Monaco configuration — Strongly‑typed MonacoOptions for editor behavior, theme, and front‑matter support

📘 Migration Guide

If you are upgrading from 0.1.x to 0.2.0‑preview, please read the migration guide:

➡️ Migration Guide

Quick Start

1. Install Package

dotnet add package FluentUI.Blazor.Monaco.EditorPack

2. Register Services

Add to Program.cs:

builder.Services.AddMonacoEditorPack();
builder.Services.AddFluentUIComponents();

3. Add Scripts

Blazor Server (App.razor):

<body>
    <FluentDesignTheme StorageName="theme" />
    <Routes @rendermode="new InteractiveServerRenderMode(prerender: true)" />
    <script src="_framework/blazor.web.js"></script>

    
    <script src="_content/FluentUI.Blazor.Monaco.EditorPack/lib/monaco-editor/min/vs/loader.js"></script>
    <script src="_content/FluentUI.Blazor.Monaco.EditorPack/js/monaco-editor-pack.js"></script>
</body>

Blazor WebAssembly (index.html):

<body>
    <div id="app">...</div>
    <script src="_framework/blazor.webassembly.js"></script>

    
    <script src="_content/FluentUI.Blazor.Monaco.EditorPack/lib/monaco-editor/min/vs/loader.js"></script>
    <script src="_content/FluentUI.Blazor.Monaco.EditorPack/js/monaco-editor-pack.js"></script>
</body>

Using the Components

Markdown Editor

<MonacoMarkdownEditor @ref="editor"
                      Markdown="@content"
                      MarkdownChanged="@OnChanged" />

@code {
    private MonacoMarkdownEditor? editor;
    private string content = "# Hello World";

    private Task OnChanged(string newContent)
    {
        content = newContent;
        return Task.CompletedTask;
    }
}

Configuring Markdig (Markdown Preview)

@using FluentUI.Blazor.Monaco.EditorPack.Markdown

<MonacoMarkdownEditor Markdown="@content"
                      MarkdownChanged="@OnChanged"
                      MarkdownOptions="@options" />

@code {
    private string content = "# Hello World";

    private readonly MarkdownOptions options = new() {
        EnableFrontMatter = true,
        EnableTables = true,
        EnableTaskLists = true,
        EnableGenericAttributes = true,
        EnableAutoIdentifiers = true,
        EnableAutoLinks = true,
        EnableEmphasisExtras = true,
        EnableListExtras = true,
        EnableFencedCodeBlocks = true
    };

    private Task OnChanged(string newContent)
    {
        content = newContent;
        return Task.CompletedTask;
    }
}

Monaco Lifecycle Hooks

MonacoMarkdownEditor exposes two optional lifecycle hooks:

  • BeforeCreated — called before Monaco is created
  • AfterInitialized — called after the editor instance is available
<MonacoMarkdownEditor Markdown="@content"
                      MarkdownChanged="@OnChanged"
                      BeforeCreated="@OnBeforeCreated"
                      AfterInitialized="@OnAfterInitialized" />

@code {
    private string content = "# Hello World";

    private Task OnChanged(string newContent)
    {
        content = newContent;
        return Task.CompletedTask;
    }

    private Task OnBeforeCreated(IJSRuntime js)
    {
        // Configure Monaco before creation (languages, themes, etc.)
        return Task.CompletedTask;
    }

    private Task OnAfterInitialized(IJSObjectReference editor)
    {
        // Editor instance is available
        return Task.CompletedTask;
    }
}

CSS Editor

<MonacoCssEditor @ref="cssEditor"
                 Css="@cssContent"
                 CssChanged="@OnCssChanged" />

@code {
    private MonacoCssEditor? cssEditor;
    private string cssContent = ".my-class { color: var(--accent-fill-rest); }";

    private Task OnCssChanged(string newCss)
    {
        cssContent = newCss;
        return Task.CompletedTask;
    }
}

Detailed Setup

Requirements

  • .NET 9.0 or .NET 10.0
  • Microsoft.FluentUI.AspNetCore.Components 4.13.2+

License

MIT License — see LICENSE

Product Compatible and additional computed target framework versions.
.NET net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.2.2-preview 119 2/8/2026
0.2.1-preview 82 2/8/2026
0.2.0-preview 92 2/7/2026
0.1.12-preview 86 2/5/2026
0.1.11-preview 97 2/4/2026
0.1.10-preview 81 2/4/2026
0.1.9-preview 314 12/7/2025
0.1.8-preview 174 12/5/2025
0.1.7-preview 168 12/5/2025