RTBlazorfied 2.0.20

RTBlazorfied — Blazor Rich Text Editor Component

Author: Ryan Kueter
Updated: May, 2026

RT Blazorfied HTML Editor is a free .NET Blazor component that provides accessibility features and a wide variety of elements and customizations that make it one of the most robust and flexible HTML editors available. It allows the programmer to apply custom .css files to the preview window, to see how the content will be displayed in production. The editor uses embedded .svg Google Font Icons and the shadow DOM to isolate the HTML from inheriting the existing page styles. While this component is a wrapper for the rt-native.js HTML editor native web component available on NPM, no additional setup beyond the steps below are required.

Table of Contents

1. Installation
2. Quick Start
3. Styling with CSS Variables
   • Theming with CSS Classes
4. Parameters
5. Two-Way Binding
6. Component Reference (@ref)
7. Options — Button Visibility
8. ButtonVisibility Reference
9. Preview Window Styling
10. Read-Only Mode
11. Toolbar Buttons
12. Keyboard Shortcuts
13. Accessibility
14. Multiple Instances
15. Browser Support

Installation

1. Install the NuGet package

Package Manager Console

Install-Package RTBlazorfied

.NET CLI

dotnet add package RTBlazorfied

NuGet: https://www.nuget.org/packages/RTBlazorfied

2. Add the script tag

In your wwwroot/index.html (Blazor WebAssembly) or Pages/_Layout.cshtml / App.razor (Blazor Server), add the script before the closing </body> tag:

<script src="_content/RTBlazorfied/js/RTBlazorfied.js"></script>

3. Add the using statement

In your _Imports.razor:

@using RichTextBlazorfied

That's it — no additional CSS or JS imports are needed.

Quick Start

@page "/editor"

<RTBlazorfied @bind-Value="@_html" Height="400px" />

<p>Character count: @_html.Length</p>

@code {
    private string _html = "<p>Hello <strong>world</strong></p>";
}

Styling with CSS Variables

All visual aspects of the editor are controlled through CSS custom properties on the rt-native host element. The defaults are injected as an rt-native { } rule in the document head, so any rule that targets rt-native with equal or greater specificity will override them.

/* Theme all editors on the page (same specificity as defaults —
   wins when declared after the component script tag) */
rt-native {
    --rtb-toolbar-bg:   #f5f5f5;
    --rtb-content-bg:   #fafafa;
    --rtb-content-size: 16px;
}

/* Reliably override with higher specificity — wrapper class + element selector */
.my-editor rt-native {
    --rtb-content-bg:   #1e1e1e;
    --rtb-content-text: #ddd;
}

/* Dark theme via media query */
@media (prefers-color-scheme: dark) {
    rt-native {
        --rtb-toolbar-bg:          #1e1e1e;
        --rtb-toolbar-border-color:#333;
        --rtb-btn-text:            #ccc;
        --rtb-btn-bg-hover:        #3a3a3a;
        --rtb-btn-bg-selected:     #444;
        --rtb-content-text:        #ddd;
        --rtb-content-bg:          #252526;
        --rtb-editor-border-color: #333;
        --rtb-modal-bg:            #2d2d2d;
        --rtb-modal-text:          #ccc;
        --rtb-modal-input-bg:      #1e1e1e;
        --rtb-modal-input-text:    #ccc;
        --rtb-modal-input-border:  #555;
        --rtb-dropdown-bg:         #2d2d2d;
        --rtb-dropdown-text:       #ccc;
        --rtb-dropdown-bg-hover:   #3a3a3a;
    }
}

Note: Setting variables on :root or body will not work — CSS custom properties are inherited top-down in the DOM, but the component's injected defaults are set directly on rt-native, which has higher priority than inherited values. Target rt-native directly, or use a descendant-combinator rule that ends with rt-native (e.g. .my-wrapper rt-native { }).

Theming with CSS Classes

The Class parameter passes one or more CSS class names directly to the rt-native host element. This is the cleanest way to apply per-instance themes in Blazor:

<RTBlazorfied Id="editor1" @bind-Value="@_html" Class="editor-dark" />

Define the theme in your stylesheet using rt-native.editor-dark (element + class — higher specificity than the injected rt-native {} defaults):

/* app.css or site.css */
rt-native.editor-dark {
    --rtb-toolbar-bg:          #1e1e1e;
    --rtb-toolbar-border-color:#333;
    --rtb-btn-text:            #ccc;
    --rtb-btn-bg-hover:        #3a3a3a;
    --rtb-btn-bg-selected:     #444;
    --rtb-content-text:        #ddd;
    --rtb-content-bg:          #252526;
    --rtb-editor-border-color: #333;
    --rtb-modal-bg:            #2d2d2d;
    --rtb-modal-text:          #ccc;
    --rtb-modal-input-bg:      #1e1e1e;
    --rtb-modal-input-text:    #ccc;
    --rtb-modal-input-border:  #555;
    --rtb-dropdown-bg:         #2d2d2d;
    --rtb-dropdown-text:       #ccc;
    --rtb-dropdown-bg-hover:   #3a3a3a;
}

Multiple classes are supported — separate them with a space: Class="fluent dark".

Switching themes at runtime

Use @ref and SetClassAsync to swap the theme dynamically:

<RTBlazorfied Id="editor1" @ref="_editor" @bind-Value="@_html" Class="@_theme" />

<button @onclick='() => _editor.SetClassAsync("fluent")'>Light</button>
<button @onclick='() => _editor.SetClassAsync("fluent-dark")'>Dark</button>
<button @onclick='() => _editor.SetClassAsync(string.Empty)'>Default</button>

@code {
    private RTBlazorfied _editor = default!;
    private string _html = string.Empty;
    private string _theme = "fluent";
}

Setting the theme in JavaScript

var editor1 = document.getElementById("editor1");
if (editor1) {
    if (editor1.classList.contains('fluent')) {
        editor1.classList.remove('fluent');
    }
    if (editor1.classList.contains('fluent-dark')) {
        editor1.classList.remove('fluent-dark');
    }
    if (editor1.classList.contains('synthwave')) {
        editor1.classList.remove('synthwave');
    }
    editor1.classList.add(theme);
}

Tip: SetClassAsync completely replaces the element's class list, so you do not need to track which class was set previously.

Fluent 2 Themes

Complete ready-to-use implementations of Microsoft's Fluent 2 Design System. Copy the CSS block into your app.css or site.css and apply the class to your RTBlazorfied component.

Fluent 2 Light

<RTBlazorfied @bind-Value="@_html" Class="fluent" />

/* app.css or site.css */
rt-native.fluent {
    /* Typography */
    --rtb-btn-font:              Arial, Helvetica, Verdana, sans-serif;
    --rtb-btn-size:              16px;

    /* Toolbar */
    --rtb-toolbar-bg:            #ffffff;
    --rtb-toolbar-border-style:  solid;
    --rtb-toolbar-border-width:  1px;
    --rtb-toolbar-border-color:  #d1d1d1;
    --rtb-dropdown-bg:           #ffffff;
    --rtb-dropdown-text:         #242424;
    --rtb-dropdown-bg-hover:     #f5f5f5;
    --rtb-dropdown-text-hover:   #242424;

    /* Buttons */
    --rtb-btn-text:              #242424;
    --rtb-btn-bg:                transparent;
    --rtb-btn-bg-hover:          #e8e8e8;
    --rtb-btn-bg-selected:       #dcdcdc;
    --rtb-btn-border-style:      none;
    --rtb-btn-border-radius:     4px;

    /* Content area */
    --rtb-content-text:          #242424;
    --rtb-content-size:          1rem;
    --rtb-content-font:          Arial, Helvetica, Verdana, sans-serif;
    --rtb-content-bg:            #ffffff;

    /* Editor container */
    --rtb-editor-border-style:   solid;
    --rtb-editor-border-width:   1px;
    --rtb-editor-border-color:   #d1d1d1;
    --rtb-editor-border-radius:  4px;
    --rtb-editor-shadow:         0 2px 4px rgba(0, 0, 0, 0.06);

    /* Scrollbars */
    --rtb-scroll-width:          6px;
    --rtb-scroll-thumb-bg:       #c2c2c2;
    --rtb-scroll-thumb-bg-hover: #8a8a8a;
    --rtb-scroll-thumb-radius:   3px;

    /* Modals & dialogs */
    --rtb-modal-bg:              #ffffff;
    --rtb-modal-text:            #242424;
    --rtb-modal-text-size:       1rem;
    --rtb-modal-text-font:       Arial, Helvetica, Verdana, sans-serif;
    --rtb-modal-input-bg:        #ffffff;
    --rtb-modal-input-text:      #242424;
    --rtb-modal-input-border:    #d1d1d1;
    --rtb-modal-checkbox:        #0078d4;

    /* Blockquote */
    --rtb-quote-bg:              #f0f7ff;
    --rtb-quote-border-color:    #0078d4;
    --rtb-quote-border-width:    4px;

    /* Code blocks */
    --rtb-code-bg:               #f5f5f5;
    --rtb-code-border-radius:    4px;
}

Fluent 2 Dark

<RTBlazorfied @bind-Value="@_html" Class="fluent-dark" />

/* app.css or site.css */
rt-native.fluent-dark {
    /* Typography */
    --rtb-btn-font:              Arial, Helvetica, Verdana, sans-serif;
    --rtb-btn-size:              16px;

    /* Toolbar */
    --rtb-toolbar-bg:            #292929;
    --rtb-toolbar-border-style:  solid;
    --rtb-toolbar-border-width:  1px;
    --rtb-toolbar-border-color:  #424242;
    --rtb-dropdown-bg:           #292929;
    --rtb-dropdown-text:         #ffffff;
    --rtb-dropdown-bg-hover:     #2e2e2e;
    --rtb-dropdown-text-hover:   #ffffff;

    /* Buttons */
    --rtb-btn-text:              #ffffff;
    --rtb-btn-bg:                transparent;
    --rtb-btn-bg-hover:          #404040;
    --rtb-btn-bg-selected:       #4e4e4e;
    --rtb-btn-border-style:      none;
    --rtb-btn-border-radius:     4px;

    /* Content area */
    --rtb-content-text:          #ffffff;
    --rtb-content-size:          1rem;
    --rtb-content-font:          Arial, Helvetica, Verdana, sans-serif;
    --rtb-content-bg:            #1f1f1f;

    /* Editor container */
    --rtb-editor-border-style:   solid;
    --rtb-editor-border-width:   1px;
    --rtb-editor-border-color:   #424242;
    --rtb-editor-border-radius:  4px;
    --rtb-editor-shadow:         0 2px 8px rgba(0, 0, 0, 0.32);

    /* Scrollbars */
    --rtb-scroll-width:          6px;
    --rtb-scroll-thumb-bg:       #5c5c5c;
    --rtb-scroll-thumb-bg-hover: #8a8a8a;
    --rtb-scroll-thumb-radius:   3px;

    /* Modals & dialogs */
    --rtb-modal-bg:              #2e2e2e;
    --rtb-modal-text:            #ffffff;
    --rtb-modal-text-size:       1rem;
    --rtb-modal-text-font:       Arial, Helvetica, Verdana, sans-serif;
    --rtb-modal-input-bg:        #1f1f1f;
    --rtb-modal-input-text:      #ffffff;
    --rtb-modal-input-border:    #424242;
    --rtb-modal-checkbox:        #479ef5;

    /* Blockquote */
    --rtb-quote-bg:              #00244a;
    --rtb-quote-border-color:    #479ef5;
    --rtb-quote-border-width:    4px;

    /* Code blocks */
    --rtb-code-bg:               #141414;
    --rtb-code-border-radius:    4px;
}

Toolbar

Buttons

Content Area

Editor Container

Scrollbars

Blockquotes

Code Blocks

Modals & Dialogs

Parameters

Two-Way Binding

Use standard Blazor @bind-Value syntax to keep your C# model in sync with the editor:

<RTBlazorfied @bind-Value="@_html" Height="500px" />

@code {
    private string _html = string.Empty;
}

The component raises ValueChanged each time the user changes the content. If you update _html from code, the component automatically pushes the new content into the editor.

Component Reference (@ref)

Use @ref to access the component's public methods at runtime:

<RTBlazorfied @ref="_editor" @bind-Value="@_html" Height="400px" />

<button @onclick="Clear">Clear</button>
<button @onclick="MakeReadOnly">Lock</button>

@code {
    private RTBlazorfied _editor = default!;
    private string _html = string.Empty;

    private Task Clear()
    {
        _html = string.Empty;
        return Task.CompletedTask;
    }

    private async Task MakeReadOnly()
    {
        await _editor.SetReadOnlyAsync(true);
    }
}

Public Methods

Options — Button Visibility

The Options parameter accepts a fluent delegate that controls which toolbar buttons are rendered. Visual styling (colors, fonts, borders, sizes) is handled through CSS variables — see Styling with CSS Variables.

All buttons are visible by default except the word/character count status bar (WordCount), which is hidden by default and can be toggled by the user with the Toggle Status Bar button.

Call ClearAll() first to hide every button, then opt individual buttons back in:

<RTBlazorfied @bind-Value="@_html" Height="500px" Options="@GetOptions()" />

@code {
    private string _html = string.Empty;

    private Action<IRTBlazorfiedOptions> GetOptions() => options =>
        options.ButtonVisibility(v => v
            .ClearAll()
            .Bold().Italic().Underline()
            .FormatDivider()
            .AlignLeft().AlignCenter().AlignRight()
            .AlignDivider()
            .Undo().Redo()
            .HistoryDivider()
            .HtmlView().Preview());
}

To hide only specific buttons while keeping everything else visible, omit ClearAll():

<RTBlazorfied @bind-Value="@_html" Height="500px" Options="@GetOptions()" />

@code {
    private string _html = string.Empty;

    private Action<IRTBlazorfiedOptions> GetOptions() => options =>
        options.ButtonVisibility(v => v
            .EmbedMedia(false)
            .ImageUpload(false)
            .Table(false));
}

To show the word/character count status bar on load:

<RTBlazorfied @bind-Value="@_html" Height="500px" Options="@GetOptions()" />

@code {
    private string _html = string.Empty;

    private Action<IRTBlazorfiedOptions> GetOptions() => options =>
        options.ButtonVisibility(v => v.WordCount());
}

Changing visibility at runtime

Use ConfigureAsync via a @ref to reconfigure an already-rendered editor:

<RTBlazorfied @ref="_editor" @bind-Value="@_html" Height="500px" />

@code {
    private RTBlazorfied _editor = default!;
    private string _html = string.Empty;

    private async Task HideMediaButtons()
    {
        await _editor.ConfigureAsync(options =>
            options.ButtonVisibility(v => v
                .EmbedMedia(false)
                .ImageUpload(false)
                .Table(false)));
    }
}

ButtonVisibility Reference

Divider auto-hiding: A divider is only rendered when at least one button in its group is visible and its own method returns true.

Default parameter: Every method except ClearAll() accepts an optional bool (default true), so .Bold() and .Bold(true) are equivalent. Pass false to explicitly hide a button without calling ClearAll() first.

Preview Window Styling

Load CSS files or inline CSS to style the preview dialog only. The editing area is not affected — styles are applied exclusively to the preview window's iframe so what you see in the preview matches your production page.

Load files via @ref

<RTBlazorfied @ref="_editor" @bind-Value="@_html" Height="500px" />

@code {
    private RTBlazorfied _editor = default!;
    private string _html = string.Empty;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        await _editor.SetPreviewCssFilesAsync(
            "css/preview1.css",
            "css/preview2.css");
    }
}

Inline CSS via @ref

await _editor.SetPreviewCssAsync(@"
    h1, h2, h3 { color: #0a2540; }
    blockquote {
        border-left: 4px solid #635bff;
        background: #f8f6ff;
    }
");

// Clear
await _editor.SetPreviewCssAsync(string.Empty);

SetPreviewCssAsync and SetPreviewCssFilesAsync are independent — both can be active simultaneously. File rules are applied first; inline rules are appended after and take precedence on any conflict.

Pass any CSS file paths served by your application. Files in your project's wwwroot/css/ folder are accessible at "css/filename.css".

Read-Only Mode

Set ReadOnly="true" on the component to disable editing on load:

<RTBlazorfied @bind-Value="@_html" ReadOnly="true" Height="300px" />

Toggle at runtime with @ref:

<RTBlazorfied @ref="_editor" @bind-Value="@_html" Height="400px" />
<button @onclick="() => _editor.SetReadOnlyAsync(true)">Lock</button>
<button @onclick="() => _editor.SetReadOnlyAsync(false)">Unlock</button>

When read-only, the toolbar is hidden and the content area cannot be edited. The aria-readonly attribute is kept in sync for screen readers.

Toolbar Buttons

Buttons appear left-to-right in the order listed. Dividers separate logical groups.

Keyboard Shortcuts

All shortcuts are active when the editor content area has focus.

Accessibility

The underlying rt-native web component is built with WCAG 2.1 AA compliance in mind:

• Editor region — The content area carries role="textbox", aria-multiline="true", and an aria-label (defaults to "Rich text editor"; override with the AriaLabel parameter).
• Read-only state — aria-readonly is kept in sync with the ReadOnly parameter and SetReadOnlyAsync().
• Toolbar — The toolbar has role="toolbar" and aria-label="Formatting toolbar". Every button has an aria-label and an aria-pressed attribute that tracks its active/selected state.
• Status bar — Carries role="status", aria-live="polite", and aria-atomic="true" so word and character count updates are announced non-intrusively.
• Dialogs — Every dialog has aria-modal="true" and aria-labelledby pointing to its title element. Close buttons are native button elements with descriptive aria-label text.
• HTML source textarea — Has aria-label="HTML source" to distinguish it from the main editor.

Multiple Instances

Each RTBlazorfied component is fully isolated. You can place as many on a page as needed — each gets its own editor instance, shadow root, and state.

<RTBlazorfied @bind-Value="@_body"  Height="400px" />
<RTBlazorfied @bind-Value="@_notes" Height="200px" Options="@NotesOptions()" />

@code {
    private string _body  = string.Empty;
    private string _notes = string.Empty;

    private Action<IRTBlazorfiedOptions> NotesOptions() => o => o
        .ButtonVisibility(v => v
            .ClearAll()
            .Bold().Italic().Underline()
            .Undo().Redo());
}

Browser Support

Requires browsers with native Web Component support:

Internet Explorer is not supported.