TheNerdCollective.MudComponents 0.6.0

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package TheNerdCollective.MudComponents --version 0.6.0
                    


                    

                
NuGet\Install-Package TheNerdCollective.MudComponents -Version 0.6.0
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="TheNerdCollective.MudComponents" Version="0.6.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="TheNerdCollective.MudComponents" Version="0.6.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="TheNerdCollective.MudComponents" />
                    


                            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 TheNerdCollective.MudComponents --version 0.6.0
                    


                    

                
#r "nuget: TheNerdCollective.MudComponents, 0.6.0"
#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 TheNerdCollective.MudComponents@0.6.0
#: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=TheNerdCollective.MudComponents&version=0.6.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=TheNerdCollective.MudComponents&version=0.6.0
                    


                            Install as a Cake Tool

TheNerdCollective.MudComponents

A specialized package providing MudBlazor-compatible Blazor components. This package contains the MudQuillEditor component, a powerful rich-text editor wrapper around Quill 2.0.

Overview

TheNerdCollective.MudComponents extends MudBlazor with additional specialized components designed to seamlessly integrate with MudBlazor's design system and theming.

Quick Start

Installation

dotnet add package TheNerdCollective.MudComponents

Setup

  1. Add Script Reference in App.razor:
<head>
    <script src=@Assets["_content/TheNerdCollective.MudComponents/js/mudquilleditor.js"]></script>
</head>
  1. Import in _Imports.razor:
@using TheNerdCollective.MudComponents

Basic Usage

<MudQuillEditor @bind-Value="HtmlContent" 
                MinHeight="300px" 
                MaxHeight="300px"
                Placeholder="Enter your content here..." />

@code {
    private string HtmlContent = "<p>Hello from MudQuillEditor</p>";
}

MudQuillEditor Features

  • Two-way Data Binding - Use @bind-Value for seamless data synchronization
  • Automatic Dark/Light Theme Support - Adapts to MudBlazor theme changes
  • Customizable Height - Configure MinHeight and MaxHeight
  • Configurable Toolbar - Enable/disable formatting features dynamically
  • Placeholder Text - Guide users with custom placeholder messages
  • Read-Only Mode - Display content without editing capabilities
  • HTML Source Toggle - Let users switch between Quill rich text and raw HTML editing
  • Auto-loads Quill from CDN - No bundling needed, handles dependencies automatically
  • Full Async/Await Support - Modern async APIs throughout

Advanced Configuration

<MudQuillEditor @bind-Value="Content"
                ReadOnly="@IsReadOnly"
                EnableHtmlToggle="true"
                Placeholder="@EditorPlaceholder"
                MinHeight="200px"
                MaxHeight="500px"
                Theme="bubble" />

@code {
    private string Content = "";
    private bool IsReadOnly = false;
    private string EditorPlaceholder = "Start typing...";
}

Theme Support

MudQuillEditor supports two Quill themes via the Theme parameter. The default is "snow".

Snow Theme (Default)

The classic editor theme with a toolbar at the top. Perfect for document-like editing experiences where users expect a traditional editor interface.

<MudQuillEditor @bind-Value="Content" Theme="snow" />

Configuration:

const quill = new Quill('#editor', {
  placeholder: 'Compose an epic...',
  theme: 'snow',
});

Bubble Theme

A minimal, floating toolbar that appears when you select text. Great for content that should blend seamlessly with your UI and for inline editing experiences.

<MudQuillEditor @bind-Value="Content" Theme="bubble" />

Configuration:

const quill = new Quill('#editor', {
  theme: 'bubble',
});

Complete Theme Example

<MudQuillEditor @bind-Value="HtmlContent" 
                Theme="@CurrentTheme"
                MinHeight="300px" 
                MaxHeight="500px"
                Placeholder="Enter your content here..." />

@code {
    private string HtmlContent = "";
    private string CurrentTheme = "snow"; // or "bubble"
}

Toolbar Customization

Control which formatting tools are available:

<MudQuillEditor @bind-Value="Content"
                Toolbar="@GetToolbar()" />

@code {
    private object? GetToolbar()
    {
        return new object[]
        {
            new[] { "bold", "italic", "underline" },
            new[] { new { list = "ordered" }, new { list = "bullet" } },
            new[] { "link", "image" }
        };
    }
}

Format Support

By default, MudQuillEditor allows all Quill formats. You can restrict which formats are allowed in the editor using optional parameters. This is independent from the toolbar configuration and controls what content can be pasted or programmatically inserted.

Inline Formats

Control individual inline formatting options:

<MudQuillEditor @bind-Value="Content"
                EnableBold="true"
                EnableItalic="true"
                EnableUnderline="true"
                EnableCode="true"
                EnableLink="true" />

Available inline format parameters:

  • EnableBold - Bold text formatting
  • EnableItalic - Italic text formatting
  • EnableUnderline - Underlined text
  • EnableStrike - Strikethrough text
  • EnableCode - Inline code formatting
  • EnableColor - Text color
  • EnableBackground - Text background color
  • EnableFont - Font family selection
  • EnableSize - Font size
  • EnableScript - Superscript and subscript

Block Formats

Control block-level formatting:

<MudQuillEditor @bind-Value="Content"
                EnableHeader="true"
                EnableBlockquote="true"
                EnableList="true"
                EnableCodeBlock="true" />

Available block format parameters:

  • EnableHeader - Header/heading levels
  • EnableBlockquote - Blockquote formatting
  • EnableList - Bullet and numbered lists
  • EnableIndent - Indentation
  • EnableAlign - Text alignment (left, center, right, justify)
  • EnableDirection - Text direction (LTR, RTL)
  • EnableCodeBlock - Code blocks with syntax highlighting

Embed Formats

Control embeddable content:

<MudQuillEditor @bind-Value="Content"
                EnableImage="true" />

Available embed format parameters:

  • EnableImage - Image embeds

Format Groups

Enable entire format categories at once:


<MudQuillEditor @bind-Value="Content" EnableAllInlineFormats="true" />


<MudQuillEditor @bind-Value="Content" EnableAllBlockFormats="true" />


<MudQuillEditor @bind-Value="Content" EnableAllEmbedFormats="true" />


<MudQuillEditor @bind-Value="Content" EnableAllFormats="true" />

Complex Format Example

<MudQuillEditor @bind-Value="Content"
                EnableBold="true"
                EnableItalic="true"
                EnableUnderline="true"
                EnableAllBlockFormats="true"
                EnableImage="true"
                MinHeight="300px"
                MaxHeight="500px" />

Dependencies

  • MudBlazor 8.15+
  • Quill 2.0 (loaded from CDN)
  • .NET 10.0+

License

Apache License 2.0 - See LICENSE file for details

Repository

TheNerdCollective.Components on GitHub

Built with ❤️ by The Nerd Collective Aps

By Jan Hjørdie - LinkedIn | Dev.to

Product Compatible and additional computed target framework versions.
.NET 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 (1)

Showing the top 1 NuGet packages that depend on TheNerdCollective.MudComponents:

Package Downloads
TheNerdCollective.Components

The Nerd Collective component library for MudBlazor. Includes rich-text editor and other reusable components.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.6.0 86 3/31/2026
0.5.4 306 12/18/2025
0.5.3 282 12/17/2025
0.5.1 234 12/15/2025
0.5.0 244 12/15/2025
0.4.1 230 12/14/2025
0.4.0 171 12/14/2025
0.3.0 158 12/14/2025 0.3.0 is deprecated because it is no longer maintained.