Getting started

Give your Avalonia application a complete HTML authoring workspace. Native toolbars, visual editing, source view and preview help users create messages, reports and reusable templates without leaving your app. About Avalonia HTML Editor Control →

Add visual HTML authoring to an Avalonia desktop window and keep document storage in your application's own workflow.

Build with .NET SDK 9.0.300 or newer (SDK 10 recommended), targeting .NET 8 or newer. Avalonia 12.1.4 uses analyzers that require the newer compiler. Install Microsoft Edge WebView2 on Windows before running the application.

Avalonia application showing a service-renewal message, complete HTML editor toolbar, formatted table and next steps.

Add the editor to a window

The package identity is SpiceLogic.HtmlEditor.Avalonia. The package version used in this guide is 1.0.2.

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:editor="clr-namespace:SpiceLogic.HtmlEditor.Avalonia;assembly=SpiceLogic.HtmlEditor.Avalonia">
    <editor:AvaloniaHtmlEditor x:Name="HtmlEditor" />
</Window>

Load and save through awaited operations

Initialize after the window opens and the control attaches. Waiting for Ready before showing the window prevents the native surface from starting.

await HtmlEditor.Ready;
await HtmlEditor.SetBodyHtmlAsync("<p>Welcome to your document.</p>");
string bodyHtml = await HtmlEditor.GetBodyHtmlAsync();
string documentHtml = await HtmlEditor.GetDocumentHtmlAsync();

Body HTML is a fragment. Complete document HTML includes supported head metadata and styles. A fresh export applies a pending source draft or reports why it could not apply. Await operations rather than blocking the UI thread.

Prepare the application

The control supplies its own internal source editor themes. Use your normal Avalonia Fluent application theme and the package's matching dependencies. Configure save prompts, persistence and navigation in your application. Review the platform guide and native prerequisites before deployment.

Application setup

Use the application's normal Fluent theme. The control supplies its internal source editor presentation. Create the control and show its owner window before awaiting Ready; use awaited exports when saving current content.