Syncfusion Blazor Smart Rich Text Editor

Syncfusion Blazor Smart Rich Text Editor

A comprehensive skill for implementing and configuring the Syncfusion Blazor Smart Rich Text Editor (SfSmartRichTextEditor) — an AI-powered WYSIWYG editor that extends the full-featured SfRichTextEditor with intelligent content assistance. Supports OpenAI, Azure OpenAI, Ollama, and custom AI backends. Provides a Smart Action dropdown toolbar, an AI query dialog (Alt+Enter), and a fully customizable AI Assistant popup via AssistViewSettings.

When to Use This Skill

Use this skill when the user needs to:

• Install and set up SfSmartRichTextEditor in a Blazor Server or Web App project
• Configure an AI backend: OpenAI, Azure OpenAI, Ollama, or a custom IChatClient
• Register IChatInferenceService / SyncfusionAIService in Program.cs
• Use the Smart Action dropdown toolbar for AI commands (summarize, expand, adjust tone)
• Add Name = "AI Commands" and Name = "AI Query" to ToolbarItemModel list to render AI toolbar buttons
• Open the AI Query dialog with Alt+Enter for free-form AI prompts
• Configure AssistViewSettings: Commands, Suggestions, Prompts, Placeholder, MaxPromptHistory, popup sizing
• Customize the AI Assistant popup (BannerTemplate, HeaderToolbarSettings, PromptToolbarSettings, ResponseToolbarSettings)
• Handle AI events: AIPromptRequested, AIResponseStopped, AIToolbarItemClicked, AIPopupOpening, AIPopupClosing
• Use AI Assistant methods: ShowAIPopupAsync, HideAIPopupAsync, ExecuteAIPromptAsync, UpdateAIResponseAsync, GetAIPromptHistoryAsync, ClearAIPromptHistoryAsync
• Style or animate the AI Assistant popup (.e-rte-aiquery-dialog)
• Use all inherited SfRichTextEditor features: toolbar, images, tables, events, methods, data binding, paste cleanup, import/export, accessibility

Quick Start

1. Install NuGet packages:

dotnet add package Syncfusion.Blazor.SmartRichTextEditor
dotnet add package Syncfusion.Blazor.Themes
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI

2. Register services in `Program.cs`:

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OpenAI;

builder.Services.AddSyncfusionBlazor();

string openAIApiKey = "YOUR_API_KEY";
string openAIModel = "gpt-4";
OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient chatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(chatClient);
builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

3. Add to `_Imports.razor`:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartRichTextEditor

4. Add CSS/JS in `App.razor` (Server) or `index.html` (WASM):

<link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

5. Add the component:

@rendermode InteractiveServer

<SfSmartRichTextEditor>
    <h2>Welcome to Smart Rich Text Editor</h2>
    <p>Select text and use the Smart Action toolbar, or press Alt+Enter to open the AI Query dialog.</p>
    <AssistViewSettings Placeholder="Ask AI to rewrite or generate content." />
</SfSmartRichTextEditor>

Navigation Guide

Getting Started & AI Service Setup

📄 Read: references/getting-started.md

• NuGet installation: Syncfusion.Blazor.SmartRichTextEditor + Syncfusion.Blazor.Themes
• Full setup for Blazor Server App (Visual Studio and VS Code) and Blazor Web App (.NET 8+)
• OpenAI, Azure OpenAI, Ollama, and custom IChatClient configuration in Program.cs
• AddInteractiveServerComponents() registration pattern for Web App
• CSS theme and JS script references (.NET 6 through .NET 10)
• Adding the component with AssistViewSettings
• Content retrieval methods (GetTextAsync, GetCharCountAsync)
• Common setup issues and fixes

AI Backend Configuration

📄 Read: references/ai-backends.md

• OpenAI: API key, supported models (gpt-4-turbo, gpt-4, gpt-3.5-turbo), OpenAIClient setup, environment variables and User Secrets
• Azure OpenAI: resource deployment, AzureOpenAIClient + ApiKeyCredential, appsettings.json config, Managed Identity (production recommended), HIPAA/SOC 2 compliance, monitoring, cost optimization
• Ollama: local model installation (mistral, llama2), OllamaApiClient + OllamaSharp NuGet, Docker Compose, GPU acceleration, model recommendations
• Custom `IChatClient`: implementing IChatClient for internal/proprietary AI, registering in Program.cs, streaming responses, retry logic, error handling, corporate AI API example

AssistViewSettings — Properties

📄 Read: references/assist-view-settings.md

• Commands (List<AICommands>): Smart Action dropdown with nested sub-commands and icon CSS
• PopupMaxHeight / PopupWidth: control popup dimensions (CSS values or pixel numbers)
• Placeholder: placeholder text in the AI prompt textarea
• Prompts (List<AssistViewPrompt>): predefined prompt/response templates loaded into the popup
• Suggestions (List<string>): quick suggestion chips shown in the AI popup
• MaxPromptHistory: maximum conversation entries retained (default: 20)
• BannerTemplate: custom branding/header RenderFragment for the AI popup
• HeaderToolbarSettings / PromptToolbarSettings / ResponseToolbarSettings: toolbar customization with AssistViewToolbarItem

AssistViewSettings — Events

📄 Read: references/ai-events.md

• AIPromptRequested (AssistViewPromptRequestedEventArgs): intercept/modify prompt before AI call; set Cancel=true to prevent; modify Response, PromptSuggestions, ResponseToolbarItems
• AIResponseStopped (ResponseStoppedEventArgs): user clicked "Stop Responding"; provides DataIndex and Prompt
• AIToolbarItemClicked (AssistViewToolbarItemClickedEventArgs): handle custom toolbar button clicks; access Item, DataIndex, Event; set Cancel=true
• AIPopupOpening (BeforeOpenEventArgs): cancel popup opening with args.Cancel = true; access Element reference
• AIPopupClosing (BeforeCloseEventArgs): cancel popup closing; access ClosedBy, IsInteracted, PreventFocus

AssistViewSettings — Methods

📄 Read: references/ai-methods.md

• ShowAIPopupAsync(): open the AI Assistant popup programmatically
• HideAIPopupAsync(): close the AI Assistant popup
• ExecuteAIPromptAsync(string prompt): send a prompt programmatically (as if user typed it)
• UpdateAIResponseAsync(string response, bool isFinalUpdate): stream or inject AI response; set isFinalUpdate=true to hide Stop button
• GetAIPromptHistoryAsync(): retrieve all saved prompts/responses as AssistViewPrompt[] (chronological, limited to MaxPromptHistory)
• ClearAIPromptHistoryAsync(): reset all conversation history
• Complete example combining all six methods with @ref

AI Popup Appearance & CSS

📄 Read: references/ai-appearance.md

• CSS selectors for the AI popup: .e-rte-aiquery-dialog, .e-aiassistview
• Customizing popup background, border, box-shadow
• Targeting .e-view-header, .e-view-content .e-toolbar, .e-footer sub-sections for fine-grained control
• Full custom popup styling example

Toolbar Configuration

📄 Read: references/toolbar.md

• Enabling or disabling the toolbar with RichTextEditorToolbarSettings.Enable
• Toolbar types: Expand, MultiRow, Scrollable, Popup
• Floating toolbar and offset configuration
• Toolbar position (top or bottom)
• Configuring toolbar items with ToolbarItemModel
• Custom toolbar items (template-based)

Built-in Toolbar Tools Reference

📄 Read: references/built-in-tools.md

• Default toolbar items for SfSmartRichTextEditor
• AI-specific toolbar items — Name = "AI Commands" (Smart Action dropdown) and Name = "AI Query" (Ask AI button); must use Name property, NOT ToolbarCommand enum
• Complete list of all ToolbarCommand enum values
• Text formatting, font & styling, alignment, lists, hyperlinks
• Image/table/link quick toolbar item commands using SfSmartRichTextEditor
• Undo/redo, fullscreen, print, source code, preview tools
• Removing or reordering default toolbar items

Text Formatting

📄 Read: references/text-formatting.md

• Bold, italic, underline, strikethrough, subscript, superscript, inline code
• Text alignment (left, center, right, justify)
• Ordered/unordered lists with custom number and bullet styles
• Heading formats (H1–H6, paragraph, blockquote, code)
• Line height configuration
• Horizontal line, format painter, clear format
• Markdown auto-format (inline and block shortcuts)

Images, Video & Audio

📄 Read: references/images-and-media.md

• Image insertion from local machine or URL
• RichTextEditorImageSettings: SaveUrl, Path, AllowedTypes, EnableResize
• Base64 vs server-side upload
• Image quick toolbar configuration
• Video and audio insertion and settings

Tables

📄 Read: references/tables.md

• Creating tables with CreateTable toolbar item
• RichTextEditorTableSettings: width, resize, custom styles
• Table quick toolbar: add/remove rows & columns, merge cells, properties
• Advanced table manipulation (cell selection, split, custom borders)

Editor Modes

📄 Read: references/editor-modes.md

• HTML editor mode (default WYSIWYG)
• Markdown editor mode (EditorMode.Markdown)
• IFrame vs DIV rendering mode
• Source code view toggling

Inline Mode

📄 Read: references/inline-mode.md

• Enabling inline toolbar (InlineMode)
• Inline toolbar display on text selection
• Use cases: comment editors, in-place content editing

Custom Tools & Exec Commands

📄 Read: references/custom-tools.md

• Adding custom toolbar buttons with ToolbarItemModel and templates
• Executing commands programmatically with ExecuteCommandAsync
• Slash commands (/ trigger menu) configuration
• Format painter advanced settings (RichTextEditorFormatPainterSettings)

Events (RTE)

📄 Read: references/events.md

• RichTextEditorEvents child component usage and wiring pattern
• Lifecycle events: Created, Destroyed
• Focus/interaction: Focus, Blur, OnToolbarClick, SelectionChanged
• Content events: ValueChange, BeforePasteCleanup, AfterPasteCleanup
• Toolbar lifecycle: OnActionBegin, OnActionComplete
• Dialog events: OnDialogOpen, DialogOpened, OnDialogClose, DialogClosed
• Quick toolbar: OnQuickToolbarOpen, QuickToolbarOpened, QuickToolbarClosed
• Image events: OnImageSelected, BeforeUploadImage, OnImageUploadSuccess, OnImageUploadFailed, ImageUploadChange, OnImageDrop, ImageDelete
• Media events: FileSelected, FileUploading, FileUploadSuccess, FileUploadFailed, FileUploadChange, OnMediaDrop, MediaDeleted
• Resize events: OnResizeStart, OnResizeStop
• Toolbar status: UpdatedToolbarStatus
• Export events: OnExport, OnExportFailure
• Slash menu: SlashMenuItemSelecting
• Complete EventArgs class reference with all properties

Methods (RTE)

📄 Read: references/methods.md

• Focus & selection: FocusAsync, FocusOutAsync, SaveSelectionAsync, RestoreSelectionAsync, SelectAllAsync, GetSelectionAsync
• Content retrieval: GetTextAsync, GetSelectedHtmlAsync, GetCharCountAsync, GetXhtmlAsync
• Command execution: all ExecuteCommandAsync overloads with typed args (image, link, table, video, audio, code block, format painter)
• Toolbar control: EnableToolbarItem, DisableToolbarItem, RemoveToolbarItem
• Dialog & UI control: ShowDialogAsync, CloseDialogAsync, ShowFullScreenAsync, PrintAsync, RefreshUIAsync, ShowSourceCodeAsync
• Undo/redo: ClearUndoRedoAsync
• Full CommandName, ToolbarCommand, and DialogType enum references

Properties (RTE)

📄 Read: references/properties.md

• Content & value: Value, Placeholder, Readonly, Enabled, MaxLength, ShowCharCount
• Editor behaviour: EditorMode, EnterKey, ShiftEnterKey, EnableTabKey, EnableAutoUrl, EnableMarkdownAutoFormat, EnableClipboardCleanup, EnableXhtml, EnableHtmlEncode, EnableResize
• Appearance & layout: Height, Width, CssClass, ShowTooltip, FloatingToolbarOffset
• IFrame mode: RichTextEditorIFrameSettings child component with Enable, Attributes, Resources
• Security & sanitization: EnableHtmlSanitizer, AdditionalSanitizeAttributes, AdditionalSanitizeTags, DeniedSanitizeSelectors
• Keyboard & shortcuts: KeyConfigure with full ShortcutKeys default bindings table
• Persistence & auto-save: EnablePersistence, SaveInterval, AutoSaveOnIdle
• Undo/redo config: UndoRedoSteps, UndoRedoTimer
• HTTP integration: HttpClientInstance
• Full 38-property summary table

Data Binding & Value Management

📄 Read: references/data-binding.md

• Two-way binding with @bind-Value
• One-way binding and programmatic value updates
• ValueChange event for detecting edits
• Read-only mode (Readonly property)
• Max length enforcement and character count display

Paste Cleanup

📄 Read: references/paste-and-cleanup.md

• RichTextEditorPasteCleanupSettings configuration
• Stripping/keeping specific HTML attributes and styles on paste
• Forcing plain text paste
• Enter key behavior (EnterKey, ShiftEnterKey)
• Undo/redo manager configuration

Import & Export

📄 Read: references/import-export.md

• Importing Word documents into the editor
• Exporting content to Word (.docx) and PDF
• HTTP client configuration for import/export services
• Mail merge with dynamic data
• WebAssembly performance optimizations for large documents

Accessibility & Globalization

📄 Read: references/accessibility-globalization.md

• WCAG 2.1 compliance details
• Keyboard shortcuts and navigation reference
• ARIA roles and screen reader support
• RTL layout (EnableRtl)
• Localization and culture configuration
• XHTML validation

Common Patterns

Basic Smart Rich Text Editor with AI

@rendermode InteractiveServer
@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor @bind-Value="@Content">
    <AssistViewSettings Placeholder="Ask AI to rewrite or generate content." />
</SfSmartRichTextEditor>

@code {
    private string Content { get; set; } = "<p>Start editing...</p>";
}

AI with custom Smart Action commands

<SfSmartRichTextEditor>
    <AssistViewSettings Commands="@MyCommands" Suggestions="@QuickSuggestions" />
</SfSmartRichTextEditor>

@code {
    private List<AICommands> MyCommands = new()
    {
        new AICommands { Text = "Summarize", Prompt = "Summarize this content concisely" },
        new AICommands { Text = "Expand", Prompt = "Add more details and examples" },
        new AICommands
        {
            Text = "Translate",
            Items = new List<AICommands>
            {
                new AICommands { Text = "To French", Prompt = "Translate to French" },
                new AICommands { Text = "To Spanish", Prompt = "Translate to Spanish" }
            }
        }
    };

    private List<string> QuickSuggestions = new()
    {
        "Fix grammar", "Make shorter", "More formal", "Simplify"
    };
}

Programmatic AI popup control

<SfSmartRichTextEditor>
    <AssistViewSettings @ref="AssistViewRef" MaxPromptHistory="10" />
</SfSmartRichTextEditor>
<button @onclick="OpenAI">Open AI</button>
<button @onclick="RunPrompt">Run Prompt</button>

@code {
    private AssistViewSettings AssistViewRef;

    private async Task OpenAI() =>
        await AssistViewRef.ShowAIPopupAsync();

    private async Task RunPrompt() =>
        await AssistViewRef.ExecuteAIPromptAsync("Improve the clarity of this text");
}

Two-way bound editor with character count

<SfSmartRichTextEditor @bind-Value="@HtmlContent" ShowCharCount="true" MaxLength="2000">
    <AssistViewSettings Placeholder="Ask AI for writing help." />
</SfSmartRichTextEditor>

@code {
    private string HtmlContent { get; set; } = string.Empty;
}

Read-only display

<SfSmartRichTextEditor Value="@HtmlContent" Readonly="true">
    <RichTextEditorToolbarSettings Enable="false" />
</SfSmartRichTextEditor>

Markdown editor mode

<SfSmartRichTextEditor EditorMode="EditorMode.Markdown" @bind-Value="@MarkdownContent">
    <AssistViewSettings Placeholder="Ask AI to help with your Markdown content." />
</SfSmartRichTextEditor>

@code {
    private string MarkdownContent { get; set; } = "**Hello** world!";
}

Handle AI prompt event to intercept requests

<SfSmartRichTextEditor>
    <AssistViewSettings AIPromptRequested="OnAIPrompt" />
</SfSmartRichTextEditor>

@code {
    private async Task OnAIPrompt(AssistViewPromptRequestedEventArgs args)
    {
        // Log, validate, or modify args.Prompt before it is sent to AI
        Console.WriteLine($"Prompt: {args.Prompt}");
        // To cancel: args.Cancel = true;
    }
}

Accessibility and Globalization

Table of Contents

• Accessibility Compliance Overview
• WAI-ARIA Attributes
• Keyboard Shortcuts Reference
• Custom Key Configuration
• RTL Support
• Localization
• XHTML Validation

---

Accessibility Compliance Overview

The Smart Rich Text Editor is built to comply with the following accessibility standards:

---

WAI-ARIA Attributes

The toolbar element is assigned role="toolbar":

The editor content area carries role="application":

---

Keyboard Shortcuts Reference

Toolbar Navigation

Content Editing and Formatting

Text Case and Script

Alignment and Indentation

Lists

Insert

Table Navigation

Clipboard

Undo / Redo and Misc

---

Custom Key Configuration

Override default shortcuts with KeyConfigure:

<SfSmartRichTextEditor KeyConfigure="@Keys">
    <p>Bold is now Ctrl+1, Italic is Ctrl+2.</p>
</SfSmartRichTextEditor>

@code {
    private ShortcutKeys Keys = new()
    {
        Bold   = "ctrl+1",
        Italic = "ctrl+2"
    };
}

Use ShortcutKeys properties matching the CommandName actions you want to override. Unspecified keys keep their defaults.

---

RTL Support

Enable right-to-left layout for Arabic, Hebrew, and other RTL languages:

<SfSmartRichTextEditor EnableRtl="true">
    <p dir="rtl">محتوى باللغة العربية</p>
</SfSmartRichTextEditor>

EnableRtl does not change automatically based on the browser culture — set it explicitly when needed.

---

Localization

The RTE participates in Syncfusion's standard Blazor localization pipeline. Register resource strings in Program.cs:

// Program.cs (Blazor Server)
builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
app.UseRequestLocalization(new RequestLocalizationOptions()
    .SetDefaultCulture("ar")
    .AddSupportedCultures("en-US", "ar", "de")
    .AddSupportedUICultures("en-US", "ar", "de"));

Refer to the Syncfusion Blazor Localization guide for adding locale resource files.

---

XHTML Validation

Enable EnableXhtml to continuously validate the editor's content against XHTML rules. Invalid constructs are automatically removed:

<SfSmartRichTextEditor EnableXhtml="true">
    <p>Content is continuously validated as you type.</p>
</SfSmartRichTextEditor>

What is validated:

Combine EnableXhtml="true" with EnableHtmlSanitizer="true" (the default) for maximum security when displaying user-generated content.

``

AI Assistant Popup Appearance & CSS

Customize the AI Assistant popup using CSS class selectors. All styles target the .e-rte-aiquery-dialog container.

CSS Selectors Reference

---

Basic Popup Style Override

.e-rte-aiquery-dialog.e-dlg-modal.e-popup {
    color: white;
    background: white;
    z-index: 1;
}

---

Complete Custom Popup Styling Example

Targets individual sub-sections for fine-grained control:

@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor Height="300" />

<style>
    /* Main panel */
    .e-rte-aiquery-dialog .e-aiassistview {
        border-color: #e0e0e0;
        background-color: #f4f4f4;
        box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
    }

    /* Header toolbar background */
    .e-rte-aiquery-dialog .e-aiassistview .e-view-header .e-toolbar,
    .e-rte-aiquery-dialog .e-aiassistview .e-view-header .e-toolbar-items {
        background: #d5d5d5;
    }

    /* Content toolbar background */
    .e-rte-aiquery-dialog .e-aiassistview .e-view-content .e-toolbar,
    .e-rte-aiquery-dialog .e-aiassistview .e-view-content .e-toolbar .e-toolbar-items,
    .e-rte-aiquery-dialog .e-aiassistview .e-view-content .e-toolbar .e-toolbar-item {
        background: #f4f4f4;
    }

    /* Footer / input area border */
    .e-rte-aiquery-dialog .e-aiassistview .e-view-content .e-footer {
        border: 3px solid #e0e0e0;
    }
</style>

---

Tips

• Use .e-rte-aiquery-dialog as the outermost scoping selector to avoid affecting other Syncfusion popups on the page.
• For dark-mode themes, pair these overrides with the [data-theme="dark"] attribute selector.
• The popup respects PopupWidth and PopupMaxHeight properties set on <AssistViewSettings> — use those for sizing and CSS for visual styling.

AI Backend Configuration

Table of Contents

• OpenAI
• Azure OpenAI
• Ollama (Local / Self-hosted)
• Custom IChatClient

All backends follow the same pattern: install NuGet packages → create IChatClient → register with AddChatClient() → register SyncfusionAIService.

---

OpenAI

Prerequisites

• Active OpenAI account and API key from platform.openai.com

Supported Models

NuGet Packages

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI

Program.cs

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OpenAI;

builder.Services.AddSyncfusionBlazor();

string openAIApiKey = "YOUR_API_KEY"; // Use env vars or User Secrets in production
string openAIModel  = "gpt-4";

OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient chatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(chatClient);

builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

Secure Key Storage

Environment variable (Windows):

$env:OPENAI_API_KEY = "your-api-key"

Read from environment:

string openAIApiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY")
    ?? throw new InvalidOperationException("OpenAI API key not found");

User Secrets (development):

dotnet user-secrets set "OpenAI:ApiKey" "your-api-key"

string openAIApiKey = builder.Configuration["OpenAI:ApiKey"];

Troubleshooting

---

Azure OpenAI

Prerequisites

• Active Azure subscription with Azure OpenAI resource deployed
• Deployed model (e.g., gpt-4, gpt-35-turbo)
• Endpoint URL, API key, and deployment name from Azure Portal

Deploy a Model

1. Sign in to Azure Portal → Create Azure OpenAI resource 2. Go to Azure AI Studio → Deployments → Create new deployment 3. Configure: deployment name, model (e.g., gpt-35-turbo), version 4. Copy Endpoint and Key from Keys and Endpoint in your resource

Supported Models

NuGet Packages

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
Install-Package Azure.AI.OpenAI

Program.cs

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using System.ClientModel;

builder.Services.AddSyncfusionBlazor();

string azureOpenAIKey        = "AZURE_OPENAI_KEY";
string azureOpenAIEndpoint   = "https://your-resource.openai.azure.com/";
string azureOpenAIDeployment = "your-deployment-name";

AzureOpenAIClient azureClient = new AzureOpenAIClient(
    new Uri(azureOpenAIEndpoint),
    new ApiKeyCredential(azureOpenAIKey)
);
IChatClient chatClient = azureClient.GetChatClient(azureOpenAIDeployment).AsIChatClient();
builder.Services.AddChatClient(chatClient);

builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

Reading from appsettings.json (recommended)

{
  "AzureOpenAI": {
    "Key":            "your-azure-key",
    "Endpoint":       "https://your-resource.openai.azure.com/",
    "DeploymentName": "your-deployment-name"
  }
}

string azureOpenAIKey        = builder.Configuration["AzureOpenAI:Key"];
string azureOpenAIEndpoint   = builder.Configuration["AzureOpenAI:Endpoint"];
string azureOpenAIDeployment = builder.Configuration["AzureOpenAI:DeploymentName"];

Managed Identity (Production Recommended)

using Azure.Identity;

var credential = new DefaultAzureCredential();
AzureOpenAIClient azureClient = new AzureOpenAIClient(
    new Uri(azureOpenAIEndpoint),
    credential
);

Security & Compliance Features

• Virtual Network support and private endpoints
• Azure AD / RBAC integration
• HIPAA and SOC 2 compliance
• Data residency options
• Azure Monitor integration (requests/minute, token usage, latency, error rates)

Troubleshooting

---

Ollama (Local / Self-hosted)

Runs open-source LLMs locally — no API costs, no cloud connectivity required.

Install Ollama

Windows: Download installer from ollama.com macOS: Download .dmg, drag to Applications Linux: curl https://ollama.ai/install.sh | sh

Verify installation: ollama --version

Pull a Model

ollama pull mistral       # Fast, good quality
ollama pull llama2        # General purpose
ollama pull orca-mini     # Lightweight, very fast
ollama pull neural-chat   # Conversational

Start Ollama Service

ollama serve              # macOS/Linux (Windows starts automatically)

Access at http://localhost:11434

NuGet Packages

Install-Package Microsoft.Extensions.AI
Install-Package OllamaSharp

Program.cs

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OllamaSharp;

builder.Services.AddSyncfusionBlazor();

string modelName    = "mistral"; // any model you pulled
string ollamaUrl    = "http://localhost:11434";

IChatClient chatClient = new OllamaApiClient(ollamaUrl, modelName);
builder.Services.AddChatClient(chatClient);

builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

Docker Compose Deployment

version: '3.8'
services:
  ollama:
    image: ollama/ollama:latest
    ports:
      - "11434:11434"
    volumes:
      - ollama_data:/root/.ollama
    environment:
      - OLLAMA_HOST=0.0.0.0:11434
volumes:
  ollama_data:

Pull models inside container:

docker exec -it <container-id> ollama pull mistral

Model Recommendations

GPU Acceleration

• NVIDIA: Install CUDA toolkit
• AMD: Install ROCm
• Intel: Install Intel oneAPI

Troubleshooting

---

Custom IChatClient

Integrate any proprietary or internal AI service by implementing the IChatClient interface from Microsoft.Extensions.AI.

Step 1: Implement IChatClient

using Microsoft.Extensions.AI;

namespace YourApp.AI
{
    public class CustomAIBackend : IChatClient
    {
        private readonly string _endpoint;
        private readonly string _apiKey;
        private readonly HttpClient _httpClient;

        public CustomAIBackend(string endpoint, string apiKey)
        {
            _endpoint   = endpoint;
            _apiKey     = apiKey;
            _httpClient = new HttpClient();
        }

        public async ValueTask<ChatCompletion> CompleteAsync(
            IList<ChatMessage> chatMessages,
            ChatOptions? options = null,
            CancellationToken cancellationToken = default)
        {
            var requestBody = new
            {
                messages    = chatMessages.Select(m => new {
                    role    = m.Role.ToString().ToLower(),
                    content = m.Content?[0]?.Text ?? string.Empty
                }),
                max_tokens  = options?.MaxCompletionTokens ?? 500,
                temperature = options?.Temperature ?? 0.7f
            };

            var request = new HttpRequestMessage(HttpMethod.Post, _endpoint)
            {
                Content = new StringContent(
                    System.Text.Json.JsonSerializer.Serialize(requestBody),
                    System.Text.Encoding.UTF8,
                    "application/json"
                )
            };

            if (!string.IsNullOrEmpty(_apiKey))
                request.Headers.Add("Authorization", $"Bearer {_apiKey}");

            var response = await _httpClient.SendAsync(request, cancellationToken);
            response.EnsureSuccessStatusCode();

            var content = await response.Content.ReadAsStringAsync();
            var result  = System.Text.Json.JsonSerializer
                              .Deserialize<CustomResponse>(content);

            return new ChatCompletion(new ChatMessage(
                ChatRole.Assistant,
                result?.output ?? "No response"
            ));
        }

        public void Dispose() => _httpClient?.Dispose();

        private class CustomResponse { public string? output { get; set; } }
    }
}

Step 2: Register in Program.cs

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using YourApp.AI;

builder.Services.AddSyncfusionBlazor();

var customBackend = new CustomAIBackend(
    "https://your-ai-service.com/api/inference",
    "your-api-key"
);
builder.Services.AddChatClient(customBackend);

builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

With IConfiguration Support

// appsettings.json
{
  "CustomAI": {
    "Endpoint": "https://your-ai-service.com/api/inference",
    "ApiKey":   "your-api-key"
  }
}

// In constructor
public CustomAIBackend(IConfiguration configuration)
{
    _endpoint = configuration["CustomAI:Endpoint"]
        ?? throw new InvalidOperationException("CustomAI:Endpoint not configured");
    _apiKey   = configuration["CustomAI:ApiKey"]
        ?? throw new InvalidOperationException("CustomAI:ApiKey not configured");
    _httpClient = new HttpClient();
}

Streaming Responses

For streaming UX, read SSE (Server-Sent Events) chunks and call UpdateAIResponseAsync on AssistViewSettings:

public async ValueTask<ChatCompletion> CompleteAsync(
    IList<ChatMessage> chatMessages,
    ChatOptions? options = null,
    CancellationToken cancellationToken = default)
{
    var request = new HttpRequestMessage(HttpMethod.Post, _endpoint);
    request.Content = new StringContent(
        System.Text.Json.JsonSerializer.Serialize(new { messages = chatMessages }),
        System.Text.Encoding.UTF8, "application/json"
    );
    request.Headers.Add("Accept", "text/event-stream");

    var response = await _httpClient.SendAsync(
        request, HttpCompletionOption.ResponseHeadersRead, cancellationToken);

    using var stream = await response.Content.ReadAsStreamAsync(cancellationToken);
    using var reader = new System.IO.StreamReader(stream);

    var fullContent = new System.Text.StringBuilder();
    while (!reader.EndOfStream)
    {
        var line = await reader.ReadLineAsync();
        if (line?.StartsWith("data: ") == true)
        {
            var chunk = System.Text.Json.JsonSerializer
                .Deserialize<StreamChunk>(line.Substring(6));
            if (chunk?.content != null) fullContent.Append(chunk.content);
        }
    }

    return new ChatCompletion(new ChatMessage(
        ChatRole.Assistant, fullContent.ToString()
    ));
}

private class StreamChunk { public string? content { get; set; } }

Retry Logic

public async ValueTask<ChatCompletion> CompleteAsync(
    IList<ChatMessage> chatMessages,
    ChatOptions? options = null,
    CancellationToken cancellationToken = default)
{
    int maxRetries = 3;
    for (int attempt = 1; attempt <= maxRetries; attempt++)
    {
        try
        {
            return await AttemptCompletionAsync(chatMessages, cancellationToken);
        }
        catch (HttpRequestException) when (attempt < maxRetries)
        {
            await Task.Delay(TimeSpan.FromSeconds(attempt * 2), cancellationToken);
        }
    }
    throw new InvalidOperationException("Failed after max retries");
}

AssistViewSettings Events

Table of Contents

• AIPromptRequested
• AIResponseStopped
• AIToolbarItemClicked
• AIPopupOpening
• AIPopupClosing

All events are bound directly on the <AssistViewSettings> child component.

---

AIPromptRequested

Type: EventCallback<AssistViewPromptRequestedEventArgs> Namespace: Syncfusion.Blazor.InteractiveChat

Fires when the user submits a prompt. Use this to intercept, modify, or cancel the prompt before it reaches the AI service.

EventArgs properties:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.InteractiveChat

<SfSmartRichTextEditor>
    <AssistViewSettings AIPromptRequested="OnAIPrompt" />
</SfSmartRichTextEditor>

@code {
    private async Task OnAIPrompt(AssistViewPromptRequestedEventArgs args)
    {
        // Log or audit the prompt
        Console.WriteLine($"Prompt: {args.Prompt}");

        // To cancel the AI call:
        // args.Cancel = true;

        // To short-circuit with a pre-built response:
        // args.Response = "Here is a predefined answer.";
    }
}

---

AIResponseStopped

Type: EventCallback<ResponseStoppedEventArgs> Namespace: Syncfusion.Blazor.InteractiveChat

Fires when the user clicks the "Stop Responding" button during an active AI stream.

EventArgs properties:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.InteractiveChat

<SfSmartRichTextEditor>
    <AssistViewSettings AIResponseStopped="OnResponseStopped" />
</SfSmartRichTextEditor>

@code {
    private async Task OnResponseStopped(ResponseStoppedEventArgs args)
    {
        Console.WriteLine($"Stopped at index {args.DataIndex}, prompt: {args.Prompt}");
    }
}

---

AIToolbarItemClicked

Type: EventCallback<AssistViewToolbarItemClickedEventArgs> Namespace: Syncfusion.Blazor.InteractiveChat

Fires when the user clicks a custom toolbar item inside the AI popup (header, prompt, or response toolbars).

EventArgs properties:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.InteractiveChat

<SfSmartRichTextEditor>
    <AssistViewSettings AIToolbarItemClicked="OnToolbarClick" />
</SfSmartRichTextEditor>

@code {
    private async Task OnToolbarClick(AssistViewToolbarItemClickedEventArgs args)
    {
        if (args.Item.Text == "Insert")
        {
            // Handle custom "Insert" button click
            Console.WriteLine("Insert clicked");
        }
    }
}

---

AIPopupOpening

Type: EventCallback<BeforeOpenEventArgs> Namespace: Syncfusion.Blazor.Popups

Fires before the AI Assistant popup opens. Set args.Cancel = true to prevent it from opening (e.g., for validation or access control).

EventArgs properties:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.Popups

<SfSmartRichTextEditor>
    <AssistViewSettings AIPopupOpening="OnPopupOpening" />
</SfSmartRichTextEditor>

@code {
    private async Task OnPopupOpening(BeforeOpenEventArgs args)
    {
        // Prevent opening if user is not authenticated
        if (!UserIsAuthenticated)
        {
            args.Cancel = true;
        }
    }

    private bool UserIsAuthenticated => true; // Replace with real check
}

---

AIPopupClosing

Type: EventCallback<BeforeCloseEventArgs> Namespace: Syncfusion.Blazor.Popups

Fires before the AI Assistant popup closes. Use to prompt the user to save work or confirm exit.

EventArgs properties:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.Popups

<SfSmartRichTextEditor>
    <AssistViewSettings AIPopupClosing="OnPopupClosing" />
</SfSmartRichTextEditor>

@code {
    private async Task OnPopupClosing(BeforeCloseEventArgs args)
    {
        // Block accidental Escape key closing
        if (args.ClosedBy == "Escape" && args.IsInteracted)
        {
            args.Cancel = true;
        }
    }
}

AssistViewSettings Methods

All methods are async (Task-returning). Obtain a reference via @ref on <AssistViewSettings>.

Table of Contents

• Setup: Getting a Reference
• ShowAIPopupAsync
• HideAIPopupAsync
• ExecuteAIPromptAsync
• UpdateAIResponseAsync
• GetAIPromptHistoryAsync
• ClearAIPromptHistoryAsync
• Complete Example

---

Setup: Getting a Reference

<SfSmartRichTextEditor>
    <AssistViewSettings @ref="AssistViewRef" Placeholder="Ask AI..." />
</SfSmartRichTextEditor>

@code {
    private AssistViewSettings AssistViewRef;
}

---

ShowAIPopupAsync

Signature: Task ShowAIPopupAsync()

Opens the AI Assistant popup and starts a new conversation session.

private async Task OpenPopup()
{
    await AssistViewRef.ShowAIPopupAsync();
}

---

HideAIPopupAsync

Signature: Task HideAIPopupAsync()

Closes the AI Assistant popup.

private async Task ClosePopup()
{
    await AssistViewRef.HideAIPopupAsync();
}

---

ExecuteAIPromptAsync

Signature: Task ExecuteAIPromptAsync(string prompt)

Sends a prompt to the AI as if the user typed and submitted it. Useful for automating AI workflows from buttons or application logic.

Parameters:

• prompt — the text to send

private async Task RunAutoPrompt()
{
    await AssistViewRef.ExecuteAIPromptAsync("Write a professional summary about AI in healthcare");
}

---

UpdateAIResponseAsync

Signature: Task UpdateAIResponseAsync(string outputResponse, bool isFinalUpdate = false)

Streams or injects text into the current AI response display. Call repeatedly with chunks while streaming; set isFinalUpdate = true when streaming is complete (this hides the "Stop" button).

Parameters:

• outputResponse — a text chunk or the full response string
• isFinalUpdate — true signals that streaming is finished (default: false)

// Inject a full custom response at once
private async Task InjectCustomResponse()
{
    string response = "This is a custom AI-generated response injected programmatically.";
    await AssistViewRef.UpdateAIResponseAsync(response, isFinalUpdate: true);
}

// Simulate streaming in chunks
private async Task StreamResponse()
{
    string[] chunks = { "This is ", "a streamed ", "response." };
    foreach (var chunk in chunks)
    {
        await AssistViewRef.UpdateAIResponseAsync(chunk);
        await Task.Delay(100); // simulate streaming delay
    }
    await AssistViewRef.UpdateAIResponseAsync("", isFinalUpdate: true);
}

---

GetAIPromptHistoryAsync

Signature: Task<AssistViewPrompt[]> GetAIPromptHistoryAsync()

Returns all saved prompts and responses from the conversation history in chronological order (oldest first). History is capped at MaxPromptHistory (default: 20).

Returns: AssistViewPrompt[] with fields:

• Prompt — string: original user prompt
• Response — string: AI response (Markdown converted to HTML)
• IsResponseHelpful — bool?: user feedback flag
• AttachedFiles — List<AssistViewAttachment>?: files attached to the prompt

private async Task ExportHistory()
{
    AssistViewPrompt[] history = await AssistViewRef.GetAIPromptHistoryAsync();
    foreach (var entry in history)
    {
        Console.WriteLine($"Q: {entry.Prompt}");
        Console.WriteLine($"A: {entry.Response}");
    }
}

---

ClearAIPromptHistoryAsync

Signature: Task ClearAIPromptHistoryAsync()

Deletes all conversation history and resets the AI popup to a clean state.

private async Task ClearHistory()
{
    await AssistViewRef.ClearAIPromptHistoryAsync();
}

---

Complete Example

Demonstrates all six methods wired to buttons:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Buttons

<div style="display: flex; gap: 8px; padding-bottom: 15px; flex-wrap: wrap;">
    <SfButton @onclick="ShowPopup">Show Popup</SfButton>
    <SfButton @onclick="ExecutePrompt">Execute Prompt</SfButton>
    <SfButton @onclick="InjectResponse">Inject Response</SfButton>
    <SfButton @onclick="GetHistory">Get History</SfButton>
    <SfButton @onclick="ClearHistory">Clear History</SfButton>
    <SfButton @onclick="HidePopup">Hide Popup</SfButton>
</div>

<SfSmartRichTextEditor>
    <AssistViewSettings @ref="AssistViewRef"
                        Placeholder="Ask AI to enhance your content..."
                        MaxPromptHistory="10" />
</SfSmartRichTextEditor>

@code {
    private AssistViewSettings AssistViewRef;

    private async void ShowPopup()    => await AssistViewRef.ShowAIPopupAsync();
    private async void HidePopup()    => await AssistViewRef.HideAIPopupAsync();
    private async void ClearHistory() => await AssistViewRef.ClearAIPromptHistoryAsync();

    private async void ExecutePrompt()
    {
        await AssistViewRef.ExecuteAIPromptAsync("Write a professional summary about AI");
    }

    private async void InjectResponse()
    {
        await AssistViewRef.UpdateAIResponseAsync(
            "This is a custom response injected via UpdateAIResponseAsync().",
            isFinalUpdate: true
        );
    }

    private async void GetHistory()
    {
        AssistViewPrompt[] history = await AssistViewRef.GetAIPromptHistoryAsync();
        foreach (var item in history)
            Console.WriteLine($"[{item.Prompt}] → [{item.Response}]");
    }
}

AssistViewSettings Properties

Table of Contents

• Commands
• PopupMaxHeight / PopupWidth
• Placeholder
• Prompts
• Suggestions
• MaxPromptHistory
• BannerTemplate
• HeaderToolbarSettings
• PromptToolbarSettings
• ResponseToolbarSettings

---

Commands

Type: List<AICommands> Default: empty list

Predefined AI actions displayed in the Smart Action dropdown toolbar. Each AICommands entry supports:

• Text — display label shown in the UI
• Prompt — text sent to the AI when selected (the editor automatically appends " for the selected content" or " for the document content" as context)
• IconCss — optional CSS class for an icon
• Items — nested List<AICommands> for multi-level sub-menus (recursive)

Important: The system automatically appends contextual information to your prompt. Do not end your Prompt with a period (.) if you want clean formatting, as it will result in ". for the selected content" instead of " for the selected content".

@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor>
    <AssistViewSettings Commands="@MyCommands" />
</SfSmartRichTextEditor>

@code {
    private List<AICommands> MyCommands = new()
    {
        // ✓ Correct: No period at the end - results in "Make this shorter for the selected content"
        new AICommands { Text = "Shorten",  Prompt = "Make this shorter" },
        
        // ✓ Correct: No period - results in "Add more details for the selected content"
        new AICommands { Text = "Expand",   Prompt = "Add more details" },
        
        // ✗ Avoid: Ending with period - results in "Improve clarity. for the selected content"
        // new AICommands { Text = "Improve", Prompt = "Improve clarity." },
        
        new AICommands
        {
            Text = "Translate",
            Items = new List<AICommands>
            {
                new AICommands { Text = "To French",  Prompt = "Translate to French" },
                new AICommands { Text = "To Spanish", Prompt = "Translate to Spanish" }
            }
        }
    };
}

The AI prompt automatically includes editor context (selected text or full document) — you do not need to add {{selection}} placeholders. The system appends " for the selected content" or " for the document content" to your prompt automatically.

---

PopupMaxHeight / PopupWidth

PopupMaxHeight — string — default: "400" (pixels) PopupWidth — string — default: "600" (pixels)

Control the size of the AI Assistant popup. Accepts CSS values ("80vh", "650px") or plain numbers treated as pixels.

<SfSmartRichTextEditor>
    <AssistViewSettings PopupMaxHeight="80vh" PopupWidth="650px" />
</SfSmartRichTextEditor>

---

Placeholder

Type: string Default: "Ask AI to rewrite or generate content."

Placeholder text shown in the AI prompt textarea when empty.

<SfSmartRichTextEditor>
    <AssistViewSettings Placeholder="How can I improve this document?" />
</SfSmartRichTextEditor>

---

Prompts

Type: List<AssistViewPrompt> Default: empty list

Preloads the AI conversation with predefined prompt/response pairs. Useful for starter workflows or demonstration content.

AssistViewPrompt fields:

• Prompt — string: the user prompt text
• Response — string: the pre-set AI response (supports Markdown/HTML)

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.InteractiveChat

<SfSmartRichTextEditor>
    <AssistViewSettings Prompts="@TemplatePrompts" />
</SfSmartRichTextEditor>

@code {
    private List<AssistViewPrompt> TemplatePrompts = new()
    {
        new AssistViewPrompt
        {
            Prompt   = "Draft a professional email",
            Response = "Subject: Hello Team\n\nDear Team,\n\nI hope this message finds you well.\n\nBest regards"
        },
        new AssistViewPrompt
        {
            Prompt   = "Create API documentation",
            Response = "### GET /users\nRetrieves a list of users.\n\n**Request**\nGET /api/users"
        }
    };
}

---

Suggestions

Type: List<string> Default: empty list

Quick-access suggestion chips displayed in the AI popup. Clicking a chip sends it as a prompt instantly.

@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor>
    <AssistViewSettings Suggestions="@QuickSuggestions" />
</SfSmartRichTextEditor>

@code {
    private List<string> QuickSuggestions = new()
    {
        "Make shorter",
        "Improve clarity",
        "Fix grammar",
        "Add examples",
        "More formal",
        "Simplify"
    };
}

---

MaxPromptHistory

Type: int Default: 20

Maximum conversation entries retained in the popup history. When exceeded, oldest entries are removed automatically. History persists across open/close cycles of the popup.

<SfSmartRichTextEditor>
    <!-- Keep only 5 recent conversations -->
    <AssistViewSettings MaxPromptHistory="5" />
</SfSmartRichTextEditor>

---

BannerTemplate

Type: RenderFragment Default: none

Custom template for the banner area at the top of the AI popup. Use for branding, status messages, or usage instructions.

@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor>
    <AssistViewSettings>
        <BannerTemplate>
            <div style="padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <h3 style="margin: 0;">Smart AI Assistant</h3>
                <span style="font-size: 12px;">Real-time AI assistance</span>
            </div>
        </BannerTemplate>
    </AssistViewSettings>
</SfSmartRichTextEditor>

---

HeaderToolbarSettings

Type: RenderFragment Default: none

Configures toolbar items in the header section of the AI popup.

Each AssistViewToolbarItem supports:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Navigations

<SfSmartRichTextEditor>
    <AssistViewSettings>
        <HeaderToolbarSettings>
            <AssistViewToolbarItem Type="ItemType.Spacer" />
            <AssistViewToolbarItem Text="Close"       IconCss="e-icons e-close" />
            <AssistViewToolbarItem Text="AI Commands" />
        </HeaderToolbarSettings>
    </AssistViewSettings>
</SfSmartRichTextEditor>

---

PromptToolbarSettings

Type: RenderFragment Default: none

Configures toolbar items below the prompt input area.

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Navigations

<SfSmartRichTextEditor>
    <AssistViewSettings>
        <PromptToolbarSettings>
            <PromptToolbarItem Text="Edit"  IconCss="e-icons e-assist-edit"  Tooltip="Edit prompt" />
            <PromptToolbarItem Text="Copy"  IconCss="e-icons e-assist-copy"  Tooltip="Copy to clipboard" />
            <PromptToolbarItem Type="ItemType.Separator" />
            <PromptToolbarItem Text="Save"  IconCss="e-icons e-save" />
        </PromptToolbarSettings>
    </AssistViewSettings>
</SfSmartRichTextEditor>

---

ResponseToolbarSettings

Type: RenderFragment Default: none

Configures toolbar items in the AI response viewer section. Supports Template for fully custom buttons.

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Navigations

<SfSmartRichTextEditor>
    <AssistViewSettings>
        <ResponseToolbarSettings>
            <ResponseToolbarItem Text="Regenerate" IconCss="e-icons e-refresh" />
            <ResponseToolbarItem Text="Copy"       IconCss="e-icons e-copy" />
            <ResponseToolbarItem Type="ItemType.Separator" />
            <ResponseToolbarItem Text="Insert"     IconCss="e-icons e-check" />
            <ResponseToolbarItem>
                <Template>
                    <button onclick="alert('Feedback saved')">👍 Helpful</button>
                </Template>
            </ResponseToolbarItem>
        </ResponseToolbarSettings>
    </AssistViewSettings>
</SfSmartRichTextEditor>

Built-in Toolbar Tools Reference

Table of Contents

• Default Toolbar
• AI-Specific Toolbar Items
• Text Formatting Tools
• Font and Styling Tools
• Alignment Tools
• Lists and Indentation
• Hyperlink Tools
• Image Quick Toolbar Commands
• Table Quick Toolbar Commands
• Utility Tools
• Removing Default Tools

---

Default Toolbar

Out of the box, the Smart Rich Text Editor renders these toolbar items when no Items list is specified:

Bold | Italic | Underline | | Formats | Alignments | Blockquote | OrderedList | UnorderedList | | CreateLink | Image | | SourceCode | Undo | Redo

---

AI-Specific Toolbar Items

SfSmartRichTextEditor provides two built-in AI toolbar buttons that are not part of the ToolbarCommand enum. They must be added using the Name property on ToolbarItemModel.

Critical: Using ToolbarCommand enum values will not render these buttons. You must use Name = "AI Commands" and Name = "AI Query" exactly (case-sensitive).

Example — adding AI buttons to a custom toolbar

<SfSmartRichTextEditor>
    <RichTextEditorToolbarSettings Items="@Tools" />
    <AssistViewSettings Commands="@AiCommands"
                        Placeholder="How can I help?" />
</SfSmartRichTextEditor>

@code {
    private List<ToolbarItemModel> Tools = new()
    {
        // ⬇ AI-specific items — MUST use Name, not Command; place first for visibility
        new() { Name = "AI Commands" },
        new() { Name = "AI Query" },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.Underline },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Formats },
        new() { Command = ToolbarCommand.Alignments },
        new() { Command = ToolbarCommand.OrderedList },
        new() { Command = ToolbarCommand.UnorderedList },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Undo },
        new() { Command = ToolbarCommand.Redo }
    };

    private List<AICommands> AiCommands = new()
    {
        new() { Text = "Improve Writing",  Prompt = "Improve the clarity and quality of this text." },
        new() { Text = "Fix Grammar",      Prompt = "Fix all grammar and spelling errors." },
        new() { Text = "Summarize",        Prompt = "Summarize this content concisely." },
        new() { Text = "Expand",           Prompt = "Expand this with more detail and examples." }
    };
}

If you omit Name = "AI Commands" and Name = "AI Query" from Items, the Smart Action dropdown and Ask AI button will not appear in the toolbar even though AssistViewSettings is configured.

---

Text Formatting Tools

---

Font and Styling Tools

---

Alignment Tools

Alignment is applied to the entire block that contains the cursor, not just selected inline text.

---

Lists and Indentation

---

Hyperlink Tools

Main toolbar:

Link quick toolbar — configure via RichTextEditorQuickToolbarSettings.Link:

<SfSmartRichTextEditor>
    <RichTextEditorQuickToolbarSettings Link="@LinkTools" />
</SfSmartRichTextEditor>
@code {
    private List<LinkToolbarItemModel> LinkTools = new()
    {
        new() { Command = LinkToolbarCommand.Open },
        new() { Command = LinkToolbarCommand.Edit },
        new() { Command = LinkToolbarCommand.UnLink }
    };
}

---

Image Quick Toolbar Commands

Configure via RichTextEditorQuickToolbarSettings.Image:

<SfSmartRichTextEditor>
    <RichTextEditorQuickToolbarSettings Image="@ImageTools" />
</SfSmartRichTextEditor>
@code {
    private List<ImageToolbarItemModel> ImageTools = new()
    {
        new() { Command = ImageToolbarCommand.Replace },
        new() { Command = ImageToolbarCommand.Align },
        new() { Command = ImageToolbarCommand.Caption },
        new() { Command = ImageToolbarCommand.Remove },
        new() { Command = ImageToolbarCommand.HorizontalSeparator },
        new() { Command = ImageToolbarCommand.AltText },
        new() { Command = ImageToolbarCommand.Dimension }
    };
}

---

Table Quick Toolbar Commands

Configure via RichTextEditorQuickToolbarSettings.Table:

---

Utility Tools

---

Removing Default Tools

Pass only the tools you want — the default set is replaced entirely:

<SfSmartRichTextEditor>
    <RichTextEditorToolbarSettings Items="@MinimalTools" />
</SfSmartRichTextEditor>
@code {
    private List<ToolbarItemModel> MinimalTools = new()
    {
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.Underline },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Undo },
        new() { Command = ToolbarCommand.Redo }
    };
}

Omitting a tool from Items removes it; you don't need any separate "remove" call.

Custom Tools

Table of Contents

• Custom Toolbar Items
• ExecuteCommandAsync
• Slash Commands
• Enabling and Disabling Toolbar Items

---

Custom Toolbar Items

Use RichTextEditorCustomToolbarItems inside RichTextEditorToolbarSettings to add buttons with arbitrary Blazor content (text labels, icons, or full templates). Reference the custom item in Items by its Name:

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor @ref="SmartRteObj">
    <RichTextEditorToolbarSettings Items="@Tools">
        <RichTextEditorCustomToolbarItems>
            <RichTextEditorCustomToolbarItem Name="Symbol">
                <Template>
                    <SfButton @onclick="InsertSymbol">Ω</SfButton>
                </Template>
            </RichTextEditorCustomToolbarItem>
        </RichTextEditorCustomToolbarItems>
    </RichTextEditorToolbarSettings>
    <p>Click <b>Ω</b> to insert a special character at the cursor.</p>
</SfSmartRichTextEditor>
@code {
    private SfSmartRichTextEditor SmartRteObj = default!;
    private List<ToolbarItemModel> Tools = new()
    {
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.Separator },
        new() { Name = "Symbol", TooltipText = "Insert Symbol" },   // custom item
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.SourceCode },
        new() { Command = ToolbarCommand.FullScreen }
    };
    private async Task InsertSymbol()
    {
        await SmartRteObj.ExecuteCommandAsync(
            CommandName.InsertText,
            "₹",
            new ExecuteCommandOption { Undo = true });  // add to undo stack
    }
}

Key points:

• Name in ToolbarItemModel must match Name in RichTextEditorCustomToolbarItem
• TooltipText sets the accessible tooltip
• Blazor components (buttons, dropdowns, etc.) are valid template content

---

ExecuteCommandAsync

SfSmartRichTextEditor.ExecuteCommandAsync applies formatting or inserts content at the current cursor position programmatically.

HTML Editor Commands

`ExecuteCommandOption`: Pass new ExecuteCommandOption { Undo = true } to ensure programmatic changes are tracked in the undo stack.

@code {
    private async Task ApplyYellow()
    {
        await SmartRteObj.ExecuteCommandAsync(
            CommandName.BackgroundColor,
            "yellow",
            new ExecuteCommandOption { Undo = true });
    }
}

---

Slash Commands

Slash commands show a floating suggestion menu when the user types / at the start of a line.

Enabling with Built-in Items

<SfSmartRichTextEditor Placeholder="Type / for commands">
    <RichTextEditorSlashMenuSettings Enable="true" />
</SfSmartRichTextEditor>

Custom Slash Menu Items

Supply an Items list. Built-in items use SlashMenuCommand; custom items use freeform properties:

<SfSmartRichTextEditor @ref="SmartRteObj" Placeholder="Type '/' and choose format">
    <RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorEvents SlashMenuItemSelecting="OnSlashSelect" />
    <RichTextEditorSlashMenuSettings Enable="true" Items="@SlashItems" />
</SfSmartRichTextEditor>
@code {
    private SfSmartRichTextEditor SmartRteObj = default!;
    private List<SlashMenuItemModel> SlashItems = new()
    {
        // Built-in items
        new() { Command = SlashMenuCommand.Heading1 },
        new() { Command = SlashMenuCommand.Heading2 },
        new() { Command = SlashMenuCommand.Paragraph },
        new() { Command = SlashMenuCommand.OrderedList },
        new() { Command = SlashMenuCommand.UnorderedList },
        new() { Command = SlashMenuCommand.Blockquote },
        new() { Command = SlashMenuCommand.CodeBlock },
        new() { Command = SlashMenuCommand.Table },
        new() { Command = SlashMenuCommand.Image },
        // Custom items
        new() {
            Text        = "Meeting Notes",
            GroupBy     = "Custom",
            IconCss     = "e-icons e-description",
            Description = "Insert a meeting note template."
        },
        new() {
            Text        = "Signature",
            GroupBy     = "Custom",
            IconCss     = "e-icons e-signature",
            Description = "Insert a signature block."
        }
    };
    private async Task OnSlashSelect(SlashMenuSelectEventArgs args)
    {
        string html = args.ItemData.Text switch
        {
            "Meeting Notes" => "<p><strong>Meeting Notes</strong></p><table>...</table>",
            "Signature"     => "<p>Warm regards,<br/>John Doe</p>",
            _               => string.Empty
        };
        if (!string.IsNullOrEmpty(html))
            await SmartRteObj.ExecuteCommandAsync(CommandName.InsertHTML, html);
    }
}

`SlashMenuItemModel` properties:

---

Enabling and Disabling Toolbar Items

Use EnableToolbarItemAsync / DisableToolbarItemAsync to toggle built-in or custom items at runtime:

<SfSmartRichTextEditor @ref="SmartRteObj">
    <RichTextEditorToolbarSettings Items="@Tools">
        <RichTextEditorCustomToolbarItems>
            <RichTextEditorCustomToolbarItem Name="MyTool">
                <Template><SfButton>Custom</SfButton></Template>
            </RichTextEditorCustomToolbarItem>
        </RichTextEditorCustomToolbarItems>
    </RichTextEditorToolbarSettings>
</SfSmartRichTextEditor>
@code {
    private SfSmartRichTextEditor SmartRteObj = default!;
    // Disable Bold and the custom "MyTool" item
    private async Task DisableItems()
    {
        await SmartRteObj.DisableToolbarItemAsync(new List<ToolbarItemModel>
        {
            new() { Command = ToolbarCommand.Bold },
            new() { Name = "MyTool" }          // use "Custom" command name for custom items
        });
    }
    private async Task EnableItems()
    {
        await SmartRteObj.EnableToolbarItemAsync(new List<ToolbarItemModel>
        {
            new() { Command = ToolbarCommand.Bold },
            new() { Name = "MyTool" }
        });
    }
}

For custom toolbar items, set Command = ToolbarCommand.Custom in the model passed to these methods to correctly target them during source-code-view and quick-toolbar operations.

Data Binding

Table of Contents

• Two-way Binding with @bind-Value
• One-way Binding with Value
• Retrieving Content Programmatically
• Auto-save
• Character Count and Limits
• Read-only Mode

---

Two-way Binding with @bind-Value

@bind-Value keeps a C# string variable and the editor's HTML content in sync. Changes in the editor update the variable; changes to the variable update the editor:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor @bind-Value="@Content" />
<!-- Live preview of bound value -->
<textarea rows="5" cols="60" @bind="@Content" />
@code {
    private string Content { get; set; } = "<p>Start editing here.</p>";
}

Value accepts string type and holds valid HTML (or Markdown when EditorMode="Markdown").

---

One-way Binding with Value

Supply an initial HTML string via Value and handle changes with ValueChange when you need more control over when the bound state updates:

<SfSmartRichTextEditor Value="@InitialContent">
    <RichTextEditorEvents ValueChange="@OnChange" />
</SfSmartRichTextEditor>
@code {
    private string InitialContent = "<p>Default content.</p>";
    private void OnChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        // args.Value holds the current editor HTML
        // Save to DB, validate, etc.
        InitialContent = args.Value;
    }
}

ValueChange fires when the editor loses focus or at the configured SaveInterval. It does not fire on every keystroke — use OnActionComplete for keystroke-level notifications.

---

Retrieving Content Programmatically

Use the @ref attribute and async API methods to pull content without waiting for a blur:

<SfSmartRichTextEditor @ref="SmartRteObj" @bind-Value="@Content">
    <p>Type something here.</p>
</SfSmartRichTextEditor>
<button @onclick="GetContent">Get Content</button>
@code {
    private SfSmartRichTextEditor SmartRteObj = default!;
    private string Content { get; set; } = string.Empty;
    private async Task GetContent()
    {
        // Plain-text length (excludes HTML tags)
        int charCount = await SmartRteObj.GetCharCountAsync();
        // Inner text (no tags)
        string text = await SmartRteObj.GetTextAsync();
        // Full HTML string (same as Value)
        string html = Content;
    }
}

---

Auto-save

Configure periodic or idle-triggered saving with SaveInterval and AutoSaveOnIdle:

<SfSmartRichTextEditor SaveInterval="5000" AutoSaveOnIdle="true" @bind-Value="@Content">
    <RichTextEditorEvents ValueChange="@OnAutoSave" />
    <p>Content is saved automatically after 5 s of idle time.</p>
</SfSmartRichTextEditor>
@code {
    private string Content { get; set; } = string.Empty;
    private async Task OnAutoSave(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        Content = args.Value;
        await MyService.PersistAsync(Content);   // save to DB / local storage
    }
}

---

Character Count and Limits

Show a live character counter and optionally cap content length:

<SfSmartRichTextEditor ShowCharCount="true" MaxLength="500" @bind-Value="@Content">
    <p>This editor limits content to 500 characters.</p>
</SfSmartRichTextEditor>
@code {
    private string Content { get; set; } = string.Empty;
}

---

Read-only Mode

Set Readonly="true" to display content without allowing edits. The toolbar is hidden automatically. Toggle it at runtime via state:

<SfSmartRichTextEditor Readonly="@IsReadonly" @bind-Value="@Content">
    <p>This content is read-only by default.</p>
</SfSmartRichTextEditor>
<button @onclick="() => IsReadonly = !IsReadonly">Toggle Edit</button>
@code {
    private bool IsReadonly = true;
    private string Content { get; set; } = "<p>Saved content displayed here.</p>";
}

In read-only mode the editor renders as a styled HTML container, preserving all formatting. Combine with EnableHtmlSanitizer="true" (the default) to prevent XSS when displaying user-supplied content.

Editor Modes

Table of Contents

• HTML Mode (Default)
• IFrame Mode
• Markdown Mode
• Source Code / HTML View

---

HTML Mode (Default)

EditorMode.HTML renders a contenteditable DIV. All toolbar formatting produces standard HTML tags. This is the default and requires no explicit configuration:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor EditorMode="EditorMode.HTML">
    <p>The Smart Rich Text Editor is a WYSIWYG editor that returns <b>valid HTML</b>.</p>
    <ul>
        <li>Supports IFRAME and DIV modes</li>
        <li>Modular toolbar</li>
        <li>Markdown editing</li>
    </ul>
</SfSmartRichTextEditor>

Value / @bind-Value contains the serialised HTML string. ---

IFrame Mode

IFrame mode renders the editing surface inside a sandboxed <iframe>, isolating its CSS from the host page. Use it when the host application's global styles would interfere with the editor content. IFrame mode is enabled via the <RichTextEditorIFrameSettings Enable="true" /> child component nested inside <SfSmartRichTextEditor>

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor>
    <RichTextEditorIFrameSettings Enable="true" />
    <p>Editing in an isolated iframe — host-page styles do not bleed in.</p>
</SfSmartRichTextEditor>

Customizing IFrame Body Attributes

Pass additional attributes to the iframe body element using Attributes:

<SfSmartRichTextEditor>
    <RichTextEditorIFrameSettings Enable="true" Attributes="@IframeAttributes" />
</SfSmartRichTextEditor>
@code {
    private Dictionary<string, object> IframeAttributes = new()
    {
        { "style", "background: lightgray;" }
    };
}

Injecting External CSS and Scripts

Inject external stylesheets or scripts into the iframe document using Resources:

<SfSmartRichTextEditor>
    <RichTextEditorIFrameSettings Enable="true" Resources="@Resources" />
</SfSmartRichTextEditor>
@code {
    private ResourcesModel Resources { get; set; } = new ResourcesModel()
    {
        Styles = new string[] { "/styles.css" },
        Scripts = new string[] { "/script.js" }
    };
}

The ResourcesModel accepts Styles (CSS paths) and Scripts (JS paths) — both are string arrays resolved relative to the app root. See properties.md → RichTextEditorIFrameSettings for the full child-component reference.

---

Markdown Mode

Set EditorMode="EditorMode.Markdown" to switch to Markdown editing. The editor input and Value property use Markdown syntax. A third-party library such as Marked.js must be added to the page to render a live HTML preview. Supported block tags: h1–h6, blockquote, pre, p, ordered list (OL), unordered list (UL) Supported inline tags: Bold, Italic, StrikeThrough, InlineCode, Subscript, Superscript, UpperCase, LowerCase

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor EditorMode="EditorMode.Markdown" @bind-Value="@MarkdownValue">
    ***Overview*** The Smart Rich Text Editor supports Markdown editing mode.
    ***Key features***
    *Mode*: Provides IFRAME and DIV mode.
    *Toolbar*: Provide a fully customizable toolbar.
    *Preview*: Preview the modified content before saving it.
</SfSmartRichTextEditor>
@code {
    private string MarkdownValue { get; set; } = string.Empty;
}

Markdown Toolbar Items

For Markdown mode, use markdown-specific toolbar commands instead of the HTML defaults:

<RichTextEditorToolbarSettings Items="@MdTools" />
@code {
    private List<ToolbarItemModel> MdTools = new()
    {
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.StrikeThrough },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.OrderedList },
        new() { Command = ToolbarCommand.UnorderedList },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Formats },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Preview },        // live HTML preview
        new() { Command = ToolbarCommand.Undo },
        new() { Command = ToolbarCommand.Redo }
    };
}

Displaying a Markdown Preview

Add the Marked library and render the preview on ValueChange:

<!-- wwwroot/index.html or Pages/_Host.cshtml -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor EditorMode="EditorMode.Markdown" @bind-Value="@MarkdownValue">
    <RichTextEditorEvents ValueChange="@OnValueChange" />
</SfSmartRichTextEditor>
<div @ref="PreviewDiv"></div>
@code {
    private string MarkdownValue { get; set; } = string.Empty;
    private ElementReference PreviewDiv;
    [Inject] private IJSRuntime JS { get; set; } = default!;
    private async Task OnValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        // Render Markdown → HTML using Marked.js
        await JS.InvokeVoidAsync("renderMarkdown", PreviewDiv, args.Value);
    }
}

// wwwroot/app.js
function renderMarkdown(el, markdown) {
    el.innerHTML = marked.parse(markdown ?? "");
}

---

Source Code / HTML View

Add ToolbarCommand.SourceCode to the toolbar to give users an HTML source editor. This is available in HTML mode only — Markdown mode has a Preview button instead:

<RichTextEditorToolbarSettings Items="@Tools" />
@code {
    private List<ToolbarItemModel> Tools = new()
    {
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.SourceCode }   // toggle HTML source view
    };
}

Toggling to source code view and back does not lose content. The WYSIWYG surface and source view stay in sync.

Events

Table of Contents

• Wiring Events
• Complete Event Reference
• Lifecycle Events
• Focus & Interaction
• Value & Content
• Toolbar Command Lifecycle
• Dialog Events
• Quick Toolbar Events
• Image Events
• Media Events
• Resize Events
• Toolbar Status Events
• Export Events
• Slash Menu Events
• Common Patterns

---

Wiring Events

All events are registered through the RichTextEditorEvents child component:

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor @bind-Value="@Content">
    <RichTextEditorEvents
        Created="@OnCreated"
        ValueChange="@OnValueChange"
        OnActionBegin="@OnActionBegin"
        Blur="@OnBlur"
        Focus="@OnFocus" />
</SfSmartRichTextEditor>
@code {
    private string Content { get; set; } = string.Empty;
    private void OnCreated(object args) { /* editor is ready */ }
    private void OnValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args) { Content = args.Value; }
    private void OnActionBegin(ActionBeginEventArgs args) { /* before toolbar command executes */ }
    private void OnBlur(BlurEventArgs args) { /* editor lost focus */ }
    private void OnFocus(Syncfusion.Blazor.RichTextEditor.FocusEventArgs args) { /* editor gained focus */ }
}

---

Complete Event Reference

Lifecycle Events

Created

Fires after the editor renders for the first time. EventArgs: Object — no properties ---

Destroyed

Fires after the component is disposed. EventArgs: DestroyedEventArgs — no properties (marker class) ---

Focus & Interaction

Focus

Fires when the editor gains focus. EventArgs: `Syncfusion.Blazor.RichTextEditor.FocusEventArgs`

---

Blur

Fires when the editor loses focus. EventArgs: `BlurEventArgs`

---

OnToolbarClick

Fires when a toolbar item is clicked. EventArgs: `ToolbarClickEventArgs`

---

SelectionChanged

Fires when the selection range changes (not fired for a collapsed cursor). EventArgs: `SelectionChangedEventArgs`

---

Value & Content

ValueChange

Fires on blur or at SaveInterval. EventArgs: `Syncfusion.Blazor.RichTextEditor.ChangeEventArgs`

---

BeforePasteCleanup

Fires before pasted content is sanitised. EventArgs: `PasteCleanupArgs`

---

AfterPasteCleanup

Fires after pasted content is sanitised. EventArgs: `PasteCleanupArgs`

---

Toolbar Command Lifecycle

OnActionBegin

Fires before a toolbar command executes. EventArgs: `ActionBeginEventArgs`

---

OnActionComplete

Fires after a toolbar command completes. EventArgs: `ActionCompleteEventArgs`

---

Dialog Events

OnDialogOpen

Fires before a dialog opens (cancellable via args.Cancel). EventArgs: `BeforeOpenEventArgs` (Syncfusion.Blazor.Popups — see Popups API) ---

DialogOpened

Fires after a dialog finishes opening. EventArgs: DialogOpenEventArgs — no properties (marker class) ---

OnDialogClose

Fires before a dialog closes (cancellable via args.Cancel). EventArgs: `BeforeCloseEventArgs` (Syncfusion.Blazor.Popups — see Popups API) ---

DialogClosed

Fires after a dialog has fully closed. EventArgs: `DialogCloseEventArgs`

---

Quick Toolbar Events

OnQuickToolbarOpen

Fires before the quick toolbar opens. EventArgs: `BeforeQuickToolbarOpenArgs`

---

QuickToolbarOpened

Fires after the quick toolbar opens. EventArgs: QuickToolbarEventArgs — no properties (marker class) ---

QuickToolbarClosed

Fires after the quick toolbar closes. EventArgs: QuickToolbarEventArgs — no properties (marker class) ---

Image Events

OnImageSelected

Fires when an image is selected or dragged into the insert dialog. EventArgs: `SelectedEventArgs` (Syncfusion.Blazor.Inputs — see Inputs API) ---

BeforeUploadImage

Fires before image upload begins (cancellable). EventArgs: `ImageUploadingEventArgs` (inherits `FileUploadingEventArgs`)

---

OnImageUploadSuccess

Fires when an image is successfully uploaded. EventArgs: `ImageSuccessEventArgs` (inherits `FileUploadSuccessEventArgs`)

---

OnImageUploadFailed

Fires when an image upload fails. EventArgs: `ImageFailedEventArgs` (inherits `FileUploadFailedEventArgs`)

---

ImageUploadChange

Fires when an image is uploaded and inserted into editor content. EventArgs: `ImageUploadChangeEventArgs`

---

OnImageRemoving

Fires when an image is removed from the insert dialog. EventArgs: `RemovingEventArgs` (Syncfusion.Blazor.Inputs — see Inputs API) ---

OnImageDrop

Fires when an image is being dropped into editor content (cancellable). EventArgs: `BeforeImageDropEventArgs`

---

ImageDelete

Fires when an image is deleted from editor content. EventArgs: `AfterImageDeleteEventArgs` (inherits `MediaDeletedEventArgs`)

---

Media Events

FileSelected

Fires when media is selected or dragged into the insert media dialog. EventArgs: `SelectedEventArgs` (Syncfusion.Blazor.Inputs — see Inputs API) ---

FileUploading

Fires when selected media begins uploading to the server. EventArgs: `FileUploadingEventArgs`

---

FileUploadSuccess

Fires when media is successfully uploaded. EventArgs: `FileUploadSuccessEventArgs`

---

FileUploadFailed

Fires when a media upload fails. EventArgs: `FileUploadFailedEventArgs`

---

FileUploadChange

Fires when media is uploaded and inserted into editor content. EventArgs: `FileUploadChangeEventArgs`

---

FileRemoving

Fires when selected media is removed from the upload location. EventArgs: `RemovingEventArgs` (Syncfusion.Blazor.Inputs — see Inputs API) ---

OnMediaDrop

Fires when media files are dropped into the editor (cancellable). EventArgs: `MediaDropEventArgs` (extends `DragEventArgs` — all standard drag/mouse properties inherited)

---

MediaDeleted

Fires when media is deleted from editor content. EventArgs: `MediaDeletedEventArgs`

---

Resize Events

OnResizeStart

Fires when image resize begins. EventArgs: `ResizeArgs`

---

OnResizeStop

Fires when image resize ends. EventArgs: `ResizeArgs`

---

Toolbar Status Events

UpdatedToolbarStatus

Fires when toolbar item states are updated. EventArgs: `ToolbarStatusEventArgs`

---

Export Events

OnExport

Fires before PDF/Word export request is sent. EventArgs: `ExportingEventArgs`

---

OnExportFailure

Fires when PDF/Word export HTTP request fails. EventArgs: `ExportFailureEventArgs`

---

Slash Menu Events

SlashMenuItemSelecting

Fires when a slash command item is selected (cancellable). EventArgs: `SlashMenuSelectEventArgs`

---

Common Patterns

Auto-save with ValueChange

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor SaveInterval="3000" AutoSaveOnIdle="true">
    <RichTextEditorEvents ValueChange="@SaveToDatabase" />
</SfSmartRichTextEditor>
@code {
    private async Task SaveToDatabase(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        await MyService.SaveContentAsync(args.Value);
    }
}

Cancel a Dialog with OnDialogOpen

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor>
    <RichTextEditorEvents OnDialogOpen="@PreventImageDialog" />
</SfSmartRichTextEditor>
@code {
    private void PreventImageDialog(BeforeOpenEventArgs args)
    {
        // Cancel image insert dialog when in read-only context
        args.Cancel = true;
    }
}

Delete Image from Server on ImageDelete

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor>
    <RichTextEditorEvents ImageDelete="@OnImageDeleted" />
</SfSmartRichTextEditor>
@code {
    [Inject] private HttpClient Http { get; set; } = default!;
    private async Task OnImageDeleted(AfterImageDeleteEventArgs args)
    {
        var fileName = Path.GetFileName(args.Src);
        await Http.DeleteAsync($"/api/images/{fileName}");
    }
}

Intercept Toolbar Actions with OnActionBegin

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor>
    <RichTextEditorEvents OnActionBegin="@LogAction" />
</SfSmartRichTextEditor>
@code {
    private void LogAction(ActionBeginEventArgs args)
    {
        Console.WriteLine($"Toolbar action: {args.Name}");
    }
}

Detect Text Selection with SelectionChanged

@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor
<SfSmartRichTextEditor>
    <RichTextEditorEvents SelectionChanged="@OnSelection" />
</SfSmartRichTextEditor>
@code {
    private void OnSelection(Syncfusion.Blazor.RichTextEditor.SelectionChangedEventArgs args)
    {
        // args.SelectedHTML contains the HTML of the selected range
    }
}

---

Event Args Reference

Complete property listing for every event argument class in Syncfusion.Blazor.RichTextEditor.

ActionBeginEventArgs

Used by: OnActionBegin

ActionCompleteEventArgs

Used by: OnActionComplete

AfterImageDeleteEventArgs

Used by: ImageDelete — inherits all members from MediaDeletedEventArgs

BeforeImageDropEventArgs

Used by: OnImageDrop

BeforeQuickToolbarOpenArgs

Used by: OnQuickToolbarOpen

BlurEventArgs

Used by: Blur

Syncfusion.Blazor.RichTextEditor.ChangeEventArgs

Used by: ValueChange

DestroyedEventArgs

Used by: Destroyed — no own properties (marker class).

DialogCloseEventArgs

Used by: DialogClosed

DialogOpenEventArgs

Used by: DialogOpened — no own properties (marker class).

ExportFailureEventArgs

Used by: OnExportFailure

ExportingEventArgs

Used by: OnExport

FileUploadChangeEventArgs

Used by: FileUploadChange

FileUploadFailedEventArgs

Used by: FileUploadFailed — base class for ImageFailedEventArgs

FileUploadSuccessEventArgs

Used by: FileUploadSuccess — base class for ImageSuccessEventArgs

FileUploadingEventArgs

Used by: FileUploading — base class for ImageUploadingEventArgs

Syncfusion.Blazor.RichTextEditor.FocusEventArgs

Used by: Focus

ImageFailedEventArgs

Used by: OnImageUploadFailed — inherits all properties from FileUploadFailedEventArgs; no own properties.

ImageSuccessEventArgs

Used by: OnImageUploadSuccess — inherits all properties from FileUploadSuccessEventArgs; no own properties.

ImageUploadChangeEventArgs

Used by: ImageUploadChange

ImageUploadingEventArgs

Used by: BeforeUploadImage — inherits all properties from FileUploadingEventArgs; no own properties.

MediaDeletedEventArgs

Used by: MediaDeleted — base class for AfterImageDeleteEventArgs

MediaDropEventArgs

Used by: OnMediaDrop — extends DragEventArgs (all standard mouse/drag properties inherited)

PasteCleanupArgs

Used by: BeforePasteCleanup and AfterPasteCleanup

QuickToolbarEventArgs

Used by: QuickToolbarOpened, QuickToolbarClosed — no own properties (marker class).

ResizeArgs

Used by: OnResizeStart, OnResizeStop

SelectionChangedEventArgs

Used by: SelectionChanged

SlashMenuSelectEventArgs

Used by: SlashMenuItemSelecting

ToolbarClickEventArgs

Used by: OnToolbarClick

ToolbarStatusEventArgs

Used by: UpdatedToolbarStatus

Getting Started with Syncfusion Blazor Smart Rich Text Editor

Table of Contents

• Create a New Blazor App
• NuGet Installation
• Configure AI Service
• Service Registration
• Namespace Imports
• CSS and JS References
• Adding the Component
• Retrieving Content
• Blazor Web App Setup
• Common Setup Issues

---

Create a New Blazor App

Visual Studio

Use Microsoft Templates or the Syncfusion Blazor Extension to create a Blazor Server App.

Visual Studio Code

Create a Blazor Server App via terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):

dotnet new blazorserver -o BlazorApp
cd BlazorApp

For Blazor Web App (.NET 8+), ensure you select Server Interactivity when creating the project.

---

NuGet Installation

Install the Smart Rich Text Editor package and a theme:

Visual Studio (Package Manager Console):

Install-Package Syncfusion.Blazor.SmartRichTextEditor
Install-Package Syncfusion.Blazor.Themes

.NET CLI (Visual Studio Code):

dotnet add package Syncfusion.Blazor.SmartRichTextEditor
dotnet add package Syncfusion.Blazor.Themes
dotnet restore

Use the same version for both packages to avoid compatibility issues.

---

Configure AI Service

SfSmartRichTextEditor requires an AI backend registered in Program.cs. Three backends are supported out of the box: OpenAI, Azure OpenAI, and Ollama. A custom IChatClient is also supported.

OpenAI

Install additional NuGet packages:

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI

Configure in Program.cs:

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OpenAI;

builder.Services.AddSyncfusionBlazor();

string openAIApiKey = "YOUR_OPENAI_API_KEY";
string openAIModel = "gpt-4"; // or gpt-3.5-turbo, gpt-4-turbo

OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient chatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(chatClient);

builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

Security: Store your API key in environment variables or User Secrets — never hardcode it in source files.

---

Azure OpenAI

Install additional NuGet packages:

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
Install-Package Azure.AI.OpenAI

Configure in Program.cs:

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using System.ClientModel;

builder.Services.AddSyncfusionBlazor();

string azureOpenAIKey = "AZURE_OPENAI_KEY";
string azureOpenAIEndpoint = "https://your-resource.openai.azure.com/";
string azureOpenAIModel = "your-deployment-name";

AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
    new Uri(azureOpenAIEndpoint),
    new ApiKeyCredential(azureOpenAIKey)
);
IChatClient chatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
builder.Services.AddChatClient(chatClient);

builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

Reading credentials from appsettings.json (recommended):

{
  "AzureOpenAI": {
    "Key": "your-azure-key",
    "Endpoint": "https://your-resource.openai.azure.com/",
    "DeploymentName": "your-deployment-name"
  }
}

string azureOpenAIKey      = builder.Configuration["AzureOpenAI:Key"];
string azureOpenAIEndpoint = builder.Configuration["AzureOpenAI:Endpoint"];
string azureOpenAIModel    = builder.Configuration["AzureOpenAI:DeploymentName"];

---

Ollama (Local / Self-hosted)

Install additional NuGet packages:

Install-Package Microsoft.Extensions.AI
Install-Package OllamaSharp

Configure in Program.cs:

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OllamaSharp;

builder.Services.AddSyncfusionBlazor();

string modelName = "mistral"; // any model pulled via `ollama pull <model>`
IChatClient chatClient = new OllamaApiClient("http://localhost:11434", modelName);
builder.Services.AddChatClient(chatClient);

builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

Ollama must be running locally (ollama serve) and the model pulled before starting the app.

---

Service Registration

Register the Syncfusion Blazor service in Program.cs before builder.Build():

using Syncfusion.Blazor;

// Blazor Server App
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSyncfusionBlazor();
// ... AI service registration (see above) ...
var app = builder.Build();

---

Namespace Imports

Add to _Imports.razor:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartRichTextEditor

Do not import Syncfusion.Blazor.RichTextEditor unless you also need SfRichTextEditor directly. SfSmartRichTextEditor is in the SmartRichTextEditor namespace.

---

CSS and JS References

Blazor Server App (App.razor or _Host.cshtml)

For .NET 8, .NET 9, .NET 10 — ~/Components/App.razor:

<head>
    <link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"
            type="text/javascript"></script>
</body>

For .NET 6 — ~/Pages/_Layout.cshtml:

<link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

Available themes: tailwind.css | bootstrap5.css | material.css | fluent.css | fabric.css | material-dark.css

---

Adding the Component

Minimal usage

@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor />

With initial content, two-way binding, and AI assistant

@rendermode InteractiveServer
@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor @bind-Value="@Content">
    <h2>Welcome to Smart Rich Text Editor</h2>
    <p>Select text and use the Smart Action toolbar, or press
       <kbd>Alt</kbd>+<kbd>Enter</kbd> to open the AI Query dialog.</p>
    <AssistViewSettings Placeholder="Ask AI to rewrite or generate content." />
</SfSmartRichTextEditor>

@code {
    private string Content { get; set; } = string.Empty;
}

With toolbar configured and AI assistant

@rendermode InteractiveServer
@using Syncfusion.Blazor.SmartRichTextEditor
@using Syncfusion.Blazor.RichTextEditor

<SfSmartRichTextEditor @bind-Value="@Content">
    <RichTextEditorToolbarSettings Items="@Tools" />
    <AssistViewSettings Placeholder="Ask AI for help." />
</SfSmartRichTextEditor>

@code {
    private string Content { get; set; } = string.Empty;

    private List<ToolbarItemModel> Tools = new()
    {
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.Underline },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Formats },
        new() { Command = ToolbarCommand.Alignments },
        new() { Command = ToolbarCommand.OrderedList },
        new() { Command = ToolbarCommand.UnorderedList },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.CreateLink },
        new() { Command = ToolbarCommand.Image },
        new() { Command = ToolbarCommand.CreateTable },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Undo },
        new() { Command = ToolbarCommand.Redo }
    };
}

With custom AI commands and suggestions

@rendermode InteractiveServer
@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor @bind-Value="@Content">
    <AssistViewSettings Commands="@MyCommands"
                        Suggestions="@QuickSuggestions"
                        Placeholder="How can I help you improve this content?" />
</SfSmartRichTextEditor>

@code {
    private string Content { get; set; } = "<p>Start writing here...</p>";

    private List<AICommands> MyCommands = new()
    {
        new AICommands { Text = "Summarize",   Prompt = "Summarize this content concisely" },
        new AICommands { Text = "Expand",      Prompt = "Add more details and examples" },
        new AICommands { Text = "Fix Grammar", Prompt = "Fix grammar and spelling errors" },
        new AICommands
        {
            Text = "Change Tone",
            Items = new List<AICommands>
            {
                new AICommands { Text = "Professional", Prompt = "Rewrite in a professional tone" },
                new AICommands { Text = "Casual",       Prompt = "Rewrite in a casual, friendly tone" },
                new AICommands { Text = "Formal",       Prompt = "Rewrite in a formal tone" }
            }
        }
    };

    private List<string> QuickSuggestions = new()
    {
        "Make it shorter", "Improve clarity", "Fix grammar", "More formal", "Simplify"
    };
}

---

Retrieving Content

Get HTML value (property)

The Value property always contains the current HTML:

<SfSmartRichTextEditor @bind-Value="@HtmlContent" />
<p>Current HTML: @HtmlContent</p>

@code {
    private string HtmlContent { get; set; } = string.Empty;
}

Get plain text (method)

<SfSmartRichTextEditor @ref="SmartRteObj" />
<button @onclick="GetPlainText">Get Text</button>

@code {
    private SfSmartRichTextEditor SmartRteObj;

    private async Task GetPlainText()
    {
        string plainText = await SmartRteObj.GetTextAsync();
        Console.WriteLine(plainText);
    }
}

Get character count (method)

<SfSmartRichTextEditor @ref="SmartRteObj" />
<button @onclick="GetCount">Get Count</button>

@code {
    private SfSmartRichTextEditor SmartRteObj;

    private async Task GetCount()
    {
        double count = await SmartRteObj.GetCharCountAsync();
        Console.WriteLine($"Characters: {count}");
    }
}

Show character count in UI

<SfSmartRichTextEditor @bind-Value="@Content" ShowCharCount="true" MaxLength="1000">
    <AssistViewSettings Placeholder="Ask AI for help." />
</SfSmartRichTextEditor>

@code {
    private string Content { get; set; } = string.Empty;
}

---

Blazor Web App Setup

For .NET 8+ Blazor Web App projects with InteractiveServer render mode:

`Program.cs`:

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OpenAI;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

builder.Services.AddSyncfusionBlazor();

string openAIApiKey = "YOUR_OPENAI_API_KEY";
string openAIModel  = "gpt-4";
OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient chatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(chatClient);
builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

var app = builder.Build();

`~/Components/_Imports.razor`:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartRichTextEditor

`~/Components/App.razor`:

<head>
    <link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"
            type="text/javascript"></script>
</body>

`~/Components/Pages/Home.razor`:

@rendermode InteractiveServer
@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor>
    <h2>Welcome to Smart Rich Text Editor</h2>
    <p>Use the Smart Action toolbar or press <kbd>Alt</kbd>+<kbd>Enter</kbd>
       to open the AI Query dialog.</p>
    <AssistViewSettings Placeholder="Start typing or use AI assistance..." />
</SfSmartRichTextEditor>

The @rendermode InteractiveServer directive is required on each page (or globally in App.razor) for the component to be interactive in a Blazor Web App.

---

Common Setup Issues