TheNerdCollective.MudComponents 0.3.0

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher.
Additional Details

Made by mistake

There is a newer version of this package available.
See the version list below for details. 
dotnet add package TheNerdCollective.MudComponents --version 0.3.0
                    


                    

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


                    

                
#r "nuget: TheNerdCollective.MudComponents, 0.3.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.3.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.3.0
                    


                            Install as a Cake Addin
                        

                    

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


                            Install as a Cake Tool

The Nerd Collective - Components Library

A comprehensive collection of production-ready Blazor components for .NET 10+ applications. This library includes both generic .NET components and MudBlazor-specific components.

Component Categories

MudComponents

UI components built specifically for MudBlazor 8.15+, providing seamless integration with MudBlazor's design system.

  • MudQuillEditor - A rich-text editor component powered by Quill 2.0

Components

Generic .NET utilities and helper components for building robust Blazor applications.

More utilities coming soon.

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
  • Auto-loads Quill from CDN - No bundling needed, handles dependencies automatically
  • Full Async/Await Support - Modern async APIs throughout
  • Interactive Playground - Live demo with configuration testing

Installation

NuGet Packages

Install the main component library:

dotnet add package TheNerdCollective.Components

Or install individual components:

MudComponents
dotnet add package TheNerdCollective.MudComponents.MudQuillEditor

MudQuillEditor Setup

MudQuillEditor Setup

Step 1: Add Script Reference

In your App.razor, add the MudQuillEditor script reference before the Blazor runtime script:

<head>
    
    <script src="_content/TheNerdCollective.MudComponents.MudQuillEditor/js/mudquilleditor.js"></script>
</head>
<body>
    
    <script src="_framework/blazor.server.js"></script>
</body>

Requirements:

  • MudBlazor must be installed and configured
  • MudQuillEditor automatically loads Quill CSS/JS from jsDelivr CDN
  • No additional setup needed
Step 2: Import the Component

Add to your _Imports.razor:

@using TheNerdCollective.MudComponents.MudQuillEditor

Usage - MudQuillEditor

Basic Example

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

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

Advanced Configuration

<MudQuillEditor @bind-Value="Content"
                ReadOnly="@IsReadOnly"
                Placeholder="@EditorPlaceholder"
                MinHeight="200px"
                MaxHeight="500px"
                Toolbar="@GetToolbar()" />

@code {
    private string Content = "";
    private bool IsReadOnly = false;
    private string EditorPlaceholder = "Type something...";
    
    private object? GetToolbar()
    {
        return new object[]
        {
            new[] { "bold", "italic", "underline" },
            new[] { new { list = "ordered" }, new { list = "bullet" } },
            new[] { "link", "image" }
        };
    }
}

Component Parameters - MudQuillEditor

Parameter Type Default Description
Value string? null HTML content of the editor
ValueChanged EventCallback<string?> — Fires when editor content changes (two-way binding)
MinHeight string? null Minimum editor height (CSS value, e.g., "150px")
MaxHeight string "150px" Maximum editor height (CSS value, e.g., "300px")
Theme string "snow" Quill theme name ("snow" or "bubble")
ReadOnly bool false Disable editing when true
Toolbar object? Default Customizable toolbar modules (bold, italic, underline, lists, link, image)
Placeholder string? null Placeholder text shown when editor is empty

Component Methods - MudQuillEditor

Method Returns Description
SetHtmlAsync(string? html) Task Set editor content programmatically
GetHtmlAsync() Task<string?> Get editor content programmatically

Demo Application

A fully-featured demo app is included with:

  • Interactive Playground - Test features with live preview
  • Theme Switching - See dark/light mode support
  • Configuration Testing - Experiment with different settings
  • Installation Guide - Complete setup instructions

Run the demo:

cd TheNerdCollective.MudQuillEditor.Demo
dotnet run

Then visit https://localhost:5001 in your browser.

Toolbar Configuration - MudQuillEditor

The toolbar can be customized by passing an array of modules:

// Minimal toolbar
var toolbar = new object[]
{
    new[] { "bold", "italic" }
};

// Full toolbar
var toolbar = new object[]
{
    new[] { "bold", "italic", "underline" },
    new[] { new { list = "ordered" }, new { list = "bullet" } },
    new[] { "link", "image" },
    new[] { "blockquote", "code-block" }
};

License

Licensed under the Apache License 2.0. See LICENSE file for details.

Copyright © 2025 The Nerd Collective Aps

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues, feature requests, or questions:

Built by

The Nerd Collective Aps

Developed by janhjordie

MudQuillEditor is a production-ready component we use for our customers' applications. It combines the power of Quill 2.0 with MudBlazor's beautiful design system.

Documentation

For detailed documentation and interactive demos, visit the online demo application.

Built with ❤️ by The Nerd Collective Aps

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 89 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 245 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.