BlazorHtmlEditor 1.0.1

.NET 8.0

dotnet add package BlazorHtmlEditor --version 1.0.1

NuGet\Install-Package BlazorHtmlEditor -Version 1.0.1

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="BlazorHtmlEditor" Version="1.0.1" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="BlazorHtmlEditor" Version="1.0.1" />
                    

                            Directory.Packages.props

<PackageReference Include="BlazorHtmlEditor" />
                    

                            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 BlazorHtmlEditor --version 1.0.1

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: BlazorHtmlEditor, 1.0.1"

#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 BlazorHtmlEditor@1.0.1

#: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=BlazorHtmlEditor&version=1.0.1
                    

                            Install as a Cake Addin

#tool nuget:?package=BlazorHtmlEditor&version=1.0.1
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

BlazorHtmlEditor

A Blazor component library for editing Razor templates with Monaco Editor and live preview using RazorLight.

Features

🎨 Monaco Editor Integration - Professional code editor with Razor syntax highlighting
🔍 Live Preview - Real-time template rendering using RazorLight
📋 Model Properties Panel - Easy insertion of @Model properties
⚡ Simple Architecture - Clean, easy-to-understand codebase
🚀 No Complex Dependencies - Just Monaco and RazorLight

Installation

Install via NuGet Package Manager:

dotnet add package BlazorHtmlEditor

Or via Package Manager Console:

Install-Package BlazorHtmlEditor

Quick Start

1. Register Services

In your Program.cs:

using BlazorHtmlEditor.Services;

builder.Services.AddScoped<IModelMetadataProvider, ModelMetadataProvider>();
builder.Services.AddScoped<IRazorRenderService, RazorRenderService>();

2. Add Required Scripts

In your App.razor or index.html:

<body>
    
    <script src="_framework/blazor.web.js"></script>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
    <script>
        require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' } });
    </script>

    
    <script type="module" src="_content/BlazorHtmlEditor/js/monaco-interop.js"></script>
</body>

3. Add Component to Your Page

@page "/template-editor"
@using BlazorHtmlEditor.Components
@using YourApp.Models

<TemplateEditor TModel="Customer"
                Title="Customer Template Editor"
                InitialContent="@initialTemplate"
                ShowSaveButton="true"
                ShowPropertiesPanel="true"
                DefaultTab="EditorTab.Code"
                OnSave="HandleSave" />

@code {
    private string initialTemplate = @"
@model Customer
<div class='customer-card'>
    <h1>@Model.FirstName @Model.LastName</h1>
    <p>Email: @Model.Email</p>
    <p>Phone: @Model.Phone</p>
</div>
";

    private void HandleSave(string template)
    {
        // Save your template
        Console.WriteLine("Template saved!");
    }
}

4. Define Your Model

public class Customer
{
    public string FirstName { get; set; } = "";
    public string LastName { get; set; } = "";
    public string Email { get; set; } = "";
    public string Phone { get; set; } = "";
}

5. Configure Your .csproj

Add these properties to enable RazorLight:

<PropertyGroup>
  <PreserveCompilationContext>true</PreserveCompilationContext>
  <CopyRefAssembliesToPublishDirectory>true</CopyRefAssembliesToPublishDirectory>
</PropertyGroup>

Configuration

TemplateEditor Parameters

Parameter	Type	Default	Description
`TModel`	Generic Type	-	The model type for the template
`Title`	string	"Razor Template Editor"	Editor title
`InitialContent`	string	""	Initial Razor template content
`ShowSaveButton`	bool	true	Show/hide the Save button
`ShowPropertiesPanel`	bool	true	Show/hide Model Properties panel
`DefaultTab`	EditorTab	Code	Default tab (Code or Preview)
`OnContentChanged`	EventCallback<string>	-	Fired when content changes
`OnSave`	EventCallback<string>	-	Fired when Save button clicked

Architecture

BlazorHtmlEditor/
├── Components/
│   ├── TemplateEditor.razor        # Main editor with Code/Preview tabs
│   ├── TemplatePreview.razor       # Live preview with RazorLight
│   ├── RazorCodeEditor.razor       # Monaco editor wrapper
│   └── ModelPropertiesPanel.razor  # Model properties browser
│
├── Services/
│   ├── IRazorRenderService.cs      # Template rendering interface
│   ├── RazorRenderService.cs       # RazorLight implementation
│   └── ModelMetadataProvider.cs    # Model reflection service
│
└── Models/
    ├── ModelPropertyInfo.cs         # Property metadata
    └── TemplateModelMeta.cs         # Model metadata

Example Use Cases

Email Templates

public class EmailTemplate
{
    public string Subject { get; set; } = "";
    public string RecipientName { get; set; } = "";
    public string Message { get; set; } = "";
}

<TemplateEditor TModel="EmailTemplate"
                Title="Email Template Editor"
                InitialContent="@emailTemplate" />

Invoice Templates

public class Invoice
{
    public string InvoiceNumber { get; set; } = "";
    public DateTime InvoiceDate { get; set; }
    public string CustomerName { get; set; } = "";
    public decimal TotalAmount { get; set; }
}

<TemplateEditor TModel="Invoice"
                Title="Invoice Template Editor"
                InitialContent="@invoiceTemplate" />

Requirements

.NET 8.0 or higher
Blazor Server or Blazor WebAssembly

Dependencies

Microsoft.AspNetCore.Components.Web (8.0.0)
RazorLight (2.3.1)

Known Limitations

RazorLight requires PreserveCompilationContext=true in your project
Complex Razor features (sections, layouts) not supported in preview
Preview uses in-memory compilation (no file system access)

Troubleshooting

"Can't load metadata reference" Error

Add to your .csproj:

<PropertyGroup>
  <PreserveCompilationContext>true</PreserveCompilationContext>
  <CopyRefAssembliesToPublishDirectory>true</CopyRefAssembliesToPublishDirectory>
</PropertyGroup>

Monaco Editor Not Loading

Ensure Monaco JS files are included in your project. The component uses CDN by default.

Contributing

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

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Monaco Editor - Microsoft's code editor
RazorLight - Razor template engine

Support

🐛 Report a bug
💡 Request a feature
📧 Contact: GitHub Issues

Product	Compatible and additional computed target framework versions.
.NET	net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 was computed. 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 was computed. 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.

Product

.NET

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
- RazorLight (>= 2.3.1)

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
1.0.1	183	10/30/2025
1.0.0	183	10/29/2025