How to insert an HTML document dynamically to reflect changes in .NET MAUI Rich Text Editor (RTE)?

This knowledge base article demonstrates how to dynamically load and refresh HTML content into a Syncfusion Rich Text Editor (RTE) in a .NET MAUI application. This allows an external modification to an HTML file to be reflected in the RTE without requiring an application restart.

To enable the dynamic insertion and reflection of HTML document changes in the Rich Text Editor without restarting the application, follow the below steps:

Step 1: Prepare the HTML Document

Create an HTML file that you want to load into the Rich Text Editor. For example, let’s create a file named sample.html in your project’s Resources/Raw folder. This file will serve as the initial content.

Step 2: Initialize Syncfusion .NET MAUI Rich Text Editor

Initialize the SfRichTextEditor in your .NET MAUI application. For detailed setup instructions, refer to the documentation.

<rte:SfRichTextEditor/> 

SfRichTextEditor richTextEditor = new SfRichTextEditor
{
};

this.Content = richTextEditor; 

Step 3: Design the User Interface (XAML)

Modify the MainPage.xaml to include the Load HTML and Refresh buttons inside a Grid layout. Included a Label named Status which will display the path to the loaded HTML file or any errors encountered. This provides visual feedback on the application’s state.

<VerticalStackLayout>
   <Grid>
       <Button Grid.Column="0" Text="Load HTML" Clicked="OnLoadClicked" />
       <Button Grid.Column="1" Text="Refresh" Clicked="OnRefreshClicked" />
   </Grid>

   <Border>
       <rte:SfRichTextEditor x:Name="Rte" HeightRequest="520" />
   </Border>

   <Label x:Name="Status"/>
</VerticalStackLayout>

Step 4: Implement Dynamic Button Updates

Update the MainPage.xaml.cs to handle the button clicks and manage the HTML loading and refreshing logic.

1. Read HTML Content

private async Task EnsureLocalHtmlAsync()
{
   try
   {
       if (!File.Exists(_savePath))
       {
           var asm = typeof(App).GetTypeInfo().Assembly;
           // Update this string to match your actual resource ID
           const string resourceId = "RTE_Html_Dynamic_Sample.Resources.Raw.sample.html";

           using var stream = asm.GetManifestResourceStream(resourceId)
               ?? throw new FileNotFoundException($"Embedded resource not found: {resourceId}");

           using var reader = new StreamReader(stream, Encoding.UTF8, detectEncodingFromByteOrderMarks: true);
           var html = await reader.ReadToEndAsync();
           await File.WriteAllTextAsync(_savePath, html, Encoding.UTF8);
       }

       var htmlText = await File.ReadAllTextAsync(_savePath, Encoding.UTF8);
       var normalized = Regex.Replace(htmlText, @"\r?\n", "");
       Rte.HtmlText = normalized;
       Status.Text = $"Loaded: {_savePath}";
   }
   catch (Exception ex)
   {
       Status.Text = $"Init error: {ex.Message}";
       throw;
   }
}

2. Implement the “Load HTML” Button Click Event:

This method is triggered when the user clicks the Load HTML button. Its primary role is to invoke the EnsureLocalHtmlAsync() method, which handles the necessary setup and initial loading of the HTML content into the editor. We can set or bind HTML‑formatted text in both initially and dynamically at runtime using HtmlText property.

private async void OnLoadClicked(object? sender, EventArgs e)
{
   try
   {
       await EnsureLocalHtmlAsync();
       Status.Text = File.Exists(_savePath)
           ? $"Ready. Local copy at: {_savePath}"
           : "Failed to prepare local HTML.";
   }
   catch (Exception ex)
   {
       Status.Text = $"Error: {ex.Message}";
   }
} 

3. Implement the “Refresh” Button Click Event:

This method is executed when the user clicks the Refresh button. It re-reads the HTML content from the local file and updates the Rich Text Editor, making any external changes instantly visible.

private async void OnRefreshClicked(object? sender, EventArgs e)
{
   try
   {
       await EnsureLocalHtmlAsync();
   }
   catch (Exception ex)
   {
       Status.Text = $"Error: {ex.Message}";
   }
} 

Step 5: Test the Application

1. Run your .NET MAUI application.
2. Click the Load HTML button.
   • The app will copy an initial HTML file (sample.html) to a writable location on your device and then display its content in the Rich Text Editor. The status label will show the full path to this editable HTML file.
3. To observe dynamic changes:
   • Using your device’s file explorer by browsing the path shown in the app’s status label, locate the sample.html file.
   • Open this file with any text editor and make some changes (e.g., modify text, add a new paragraph, change styling).
   • Save the changes to sample.html.
   • Switch back to your running .NET MAUI application.
   • Click the Refresh button. The SfRichTextEditor will instantly update to reflect the changes you saved externally, without needing to restart the application.

Output:

For more details, please refer to the project on GitHub sample.

Conclusion

I hope you enjoyed learning how to insert an HTML document dynamically to reflect changes in .NET MAUI Rich Text Editor (RTE).

You can refer to our .NET MAUI Rich Text Editor feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Rich Text Editor documentation.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Rich Text Editor and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!