LiveMarkdown.Avalonia

High performance, real-time Markdown renderer for AI/LLM

LiveMarkdown.Avalonia is a High-performance Markdown viewer for Avalonia applications. It supports real-time rendering of Markdown content, so it's ideal for applications that require dynamic text updating, especially when streaming large model outputs.

• 🚀 High-performance rendering powered by Markdig
• 🔄 Real-time updates: Automatically re-renders changes in Markdown content
• 🎨 Customizable styles: Easily style Markdown elements using Avalonia's powerful styling system
• 🔗 Link support: Clickable links with customizable behavior
• 📊 Table support: Render tables with proper formatting
• 📜 Code block syntax highlighting: Supports multiple languages with TextMateSharp
• 🖼️ Image support: Load online, local even avares images asynchronously
• ✍️ Selectable text: Text can be selected across different Markdown elements
• 🧮 LaTeX support: Render mathematical expressions using CSharpMath
• 🖋️ Mermaid diagram full support: Render flowcharts, sequence diagrams, and more using Mermaider
• 🛠️ Extensible Markdown pipeline: Register custom Markdown nodes and extend the rendering pipeline

This project is fully open-source and free. Your support will improve this project a lot. I sincerely thank all my sponsors!

• Basic Markdown rendering
• Real-time updates
• Link support
• Table support
• Code block syntax highlighting
• Image support
  • Bitmap
  • SVG
  • Online images
  • Local images
  • avares images
  • Extensible Async image loading
  • Extensible Image caching (Memory and File-based, with HTTP freshness support)
• Selectable text across elements
• LaTeX support
• HTML support
• Mermaid diagram support
  • Pan&Zoom support
  • Flowchart
  • State diagram
  • Sequence diagram
  • Class diagram
  • ER diagram
  • Pie chart
  • Quadrant chart
  • Timeline chart
  • Git Graph
  • Radar Graph
  • Treemap
  • Venn diagram
• Extensible Markdown pipeline and node registration
• Customizable styles for Markdown elements

You can install the latest version from NuGet CLI:

dotnet add package LiveMarkdown.Avalonia

or use the NuGet Package Manager in your IDE.

<Application
  x:Class="YourAppClass" xmlns="https://github.com/avaloniaui"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" RequestedThemeVariant="Default">

  <Application.Styles>
    <!-- Your other styles here -->
    <StyleInclude Source="avares://LiveMarkdown.Avalonia/Styles.axaml"/>
  </Application.Styles>

  <Application.Resources>
    <!-- Your other resources here -->
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="avares://LiveMarkdown.Avalonia/Defaults.axaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

Add the MarkdownRenderer control to your .axaml file:

<YourControl
  xmlns:md="clr-namespace:LiveMarkdown.Avalonia;assembly=LiveMarkdown.Avalonia">
  <md:MarkdownRenderer x:Name="MarkdownRenderer"/>
</YourControl>

Then you can manage the Markdown content in your code-behind:

// ObservableStringBuilder is used for efficient string updates
var markdownBuilder = new ObservableStringBuilder();
MarkdownRenderer.MarkdownBuilder = markdownBuilder;

// Append Markdown content, this will trigger re-rendering
markdownBuilder.Append("# Hello, Markdown!");
markdownBuilder.Append("\n\nThis is a **live** Markdown viewer for Avalonia applications.");

// Clear the content
markdownBuilder.Clear();

Note that MarkdownBuilder is designed for efficient updates, but is NOT thread-safe. Make sure to update it on the UI thread.

If you want to load local images with relative paths, you can set the MarkdownRenderer.ImageBasePath property.

LaTeX is supported via the LiveMarkdown.Avalonia.Math package. You can install it via NuGet:

dotnet add package LiveMarkdown.Avalonia.Math

Then register both the MathInlineNode and MathBlockNode before using LaTeX in your Markdown content (e.g. App.axaml.cs):

using LiveMarkdown.Avalonia;

MarkdownNode.Register<MathInlineNode>();
MarkdownNode.Register<MathBlockNode>(); // This is also required for block-level LaTeX support, e.g. $$...$$

// Also, you can use the following code to register/unregister multiple nodes at once if needed:
MarkdownNode.Edit(builder => builder
    .Register<MathInlineNode>()
    .Register<MathBlockNode>()
    // .Unregister<SomeBuiltInNode>() // You can even unregister some built-in nodes if you want to disable certain Markdown features
);

SVG rendering is supported via the LiveMarkdown.Avalonia.Svg or LiveMarkdown.Avalonia.Svg.Skia package. You can install one of them via NuGet:

dotnet add package LiveMarkdown.Avalonia.Svg

or

dotnet add package LiveMarkdown.Avalonia.Svg.Skia

Then register the SvgImageDecoder into the AsyncImageLoader before using SVG images in your Markdown content (e.g. App.axaml.cs):

using LiveMarkdown.Avalonia;

AsyncImageLoader.DefaultDecoders =
[
    SvgImageDecoder.Shared,
    DefaultBitmapDecoder.Shared
];

You can also set the AsyncImageLoader.Decoders property on a per-renderer basis if you want different renderers to use different decoders.

Mermaid diagram rendering is supported via the LiveMarkdown.Avalonia.Mermaid package. You can install it via NuGet:

dotnet add package LiveMarkdown.Avalonia.Mermaid

Then register the MermaidBlockNode before using Mermaid diagrams in your Markdown content (e.g. App.axaml.cs):

using LiveMarkdown.Avalonia;

MarkdownRenderer.ConfigurePipeline += x => x.UseMermaid();
MarkdownNode.Register<MermaidBlockNode>();

You can also include the default Mermaid styles and override them from your application styles:

<StyleInclude Source="avares://LiveMarkdown.Avalonia.Mermaid/Styles.axaml"/>

MermaidPresenter.RenderOptions lets the native renderer use the same Mermaider options for the parts of rendering that are still owned by Mermaider: parsing constraints, layout spacing, custom layout providers, strict mode, and rounded-edge routing.

using LiveMarkdown.Avalonia;
using Mermaider.Models;

var presenter = new MermaidPresenter
{
    RenderOptions = new RenderOptions
    {
        Padding = 56,
        NodeSpacing = 48,
        LayerSpacing = 72,
        RoundedEdges = false,
        Strict = new StrictModeOptions
        {
            // Add pre-approved classes here when strict mode is enabled.
            AllowedClasses = []
        }
    }
};

The native renderer intentionally does not map RenderOptions color, font, or theme values back into Avalonia properties. Use Avalonia styles for visual appearance instead, for example md|MermaidPresenter.MermaidBlock for the presenter and renderer-part selectors such as md|MermaidPresenter md|DefaultRenderer for diagram-specific tokens.

For Markdown Mermaid blocks, complex RenderOptions objects are usually easiest to configure in C# in one central place. You can also assign a shared options object from a style:

<Style Selector="md|MermaidPresenter.MermaidBlock">
  <Setter Property="RenderOptions" Value="{StaticResource MermaidRenderOptions}"/>
</Style>

Current native synchronization scope:

• Flowchart and state diagrams pass Padding, NodeSpacing, LayerSpacing, LayoutProvider, Strict, and RoundedEdges to Mermaider layout.
• Class and ER diagrams use RenderOptions.LayoutProvider when supplied.
• Sequence diagrams use Mermaider's sequence layout, which currently does not accept RenderOptions.
• Colors, fonts, and Mermaid theme variables remain Avalonia style concerns in native rendering.

AsyncImageLoader uses the in-memory RamBasedAsyncImageLoaderCache.Shared by default. If you want persistent caching for remote images, enable the file-backed cache explicitly:

<Image md:AsyncImageLoader.Source="https://example.com/image.png" md:AsyncImageLoader.Cache="File"/>

Or set it globally:

AsyncImageLoader.DefaultCache = FileBasedAsyncImageLoaderCache.Shared;

FileBasedAsyncImageLoaderCache defaults to a cache directory under %LocalAppData%/LiveMarkdown.ImageCache, but you can configure it to any directory you want.

using LiveMarkdown.Avalonia;

FileBasedAsyncImageLoaderCache.CacheDirectory = Path.Combine(
    Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData),
    "YourApp",
    "ImageCache");
FileBasedAsyncImageLoaderCache.MaxCacheSizeBytes = 256L * 1024L * 1024L;
FileBasedAsyncImageLoaderCache.MaxEntrySizeBytes = 32L * 1024L * 1024L;
FileBasedAsyncImageLoaderCache.DefaultFreshnessLifetime = TimeSpan.FromDays(7);
HttpAsyncImageLoaderHandler.Shared.EnableConditionalRequests = true;

The file cache stores original image bytes under SHA-256 keys and uses common HTTP freshness/validation headers such as Cache-Control, Expires, ETag, and Last-Modified when available.

For advanced scenarios, you can even implement your own AsyncImageLoaderCache.

Markdown elements can be styled using Avalonia's powerful styling system. You can override the default styles by defining your own styles in your application styles.

Avalonia Styling Docs:

• Avalonia Styles
• Style selector syntax

The <ResourceInclude Source="avares://LiveMarkdown.Avalonia/Defaults.axaml"/> line in your App.axaml imports the default resources used by the renderer. You can override these resources in your application to customize the look and feel.

Here are the available resource keys:

You can customize the syntax highlighting theme for code blocks. The default theme is DarkPlus.

To set the theme globally for a MarkdownRenderer instance, use the CodeBlockColorTheme property:

<md:MarkdownRenderer CodeBlockColorTheme="LightPlus"/>

You can also use Avalonia styles to set the theme for specific code blocks or based on conditions:

<Style Selector="md|CodeBlock">
  <Setter Property="ColorTheme" Value="SolarizedDark"/>
</Style>

Supported themes are defined in TextMateSharp.Grammars.ThemeName.

By default, the renderer implements the standard Markdown emphasis styles (e.g., *italic*, **bold**, ~~strikethrough~~) using simple font weight and style changes. If you want to customize these styles or extended styles like ==highlight==, you can define your own styles for the corresponding elements.

Here is a sample style definition that customizes the emphasis styles and adds support for subscript, superscript, underline and highlight. Note that the BaselineAlignment seems to be ignored in some cases due to Avalonia's text layout behavior.

<Style Selector="md|MarkdownRenderer">
  <Style Selector="^ Span.Emphasis">
    <!-- You can even set the bold style separately for **star** and __underscore__ -->
    <!-- For a full list of available style classes, please refer to the source code of the renderer -->
    <!-- https://github.com/DearVa/LiveMarkdown.Avalonia/blob/main/src/LiveMarkdown.Avalonia/Nodes/Inline/EmphasisInlineNode.cs -->
    <Style Selector="^.Bold.Star">
      <Setter Property="FontWeight" Value="Bold"/>
    </Style>
    <Style Selector="^.Bold.Underscore">
      <Setter Property="FontWeight" Value="Normal"/>
    </Style>

    <!-- You can define custom styles for the extended emphasis elements like subscript, superscript, underline and highlight -->
    <Style Selector="^.Subscript">
      <Setter Property="BaselineAlignment" Value="Subscript"/>
      <Setter Property="FontSize" Value="8"/>
    </Style>
    <Style Selector="^.Superscript">
      <Setter Property="BaselineAlignment" Value="Superscript"/>
      <Setter Property="FontSize" Value="8"/>
    </Style>
    <Style Selector="^.Underline">
      <Setter Property="TextDecorations" Value="Underline"/>
    </Style>
    <Style Selector="^.Highlight">
      <Setter Property="Background" Value="DarkOrange"/>
    </Style>
  </Style>

  <!-- You can set the style for error LaTex rendering result like this -->
  <Style Selector="^ md|MarkdownTextBlock.Math.Error">
    <Setter Property="Foreground" Value="Red"/>
  </Style>

  <Style Selector="^ md|MarkdownTextBlock.MathBlock.Error">
    <Setter Property="Foreground" Value="Red"/>
  </Style>
</Style>

• Q: Wait, I just want to render a single Markdown string, why do I need to use ObservableStringBuilder?

• A: ObservableStringBuilder is used for efficient string updates, especially in streaming scenarios. If you just want to bind to a single Markdown string, you can use the value converter as follows:

  <md:MarkdownRenderer MarkdownBuilder="{Binding MarkdownString, Converter={x:Static md:ValueConverters.ToObservableStringBuilder}}"/>

  or set the MarkdownBuilder property in code-behind:

  MarkdownRenderer.MarkdownBuilder = new ObservableStringBuilder(MarkdownString);

  However, if you want to append content incrementally (e.g., streaming output from an LLM), ObservableStringBuilder is more efficient.

• Q: Why some emojis not rendered correctly (rendered in single color)?

• A: This is a known issue caused by Skia (the render backend of Avalonia). You can upgrade SkiaSharp version (e.g. >= 3.117.0) to fix this. Related issue

• Q: How does cross-block text selection work?

• A: MarkdownRenderer uses MarkdownTextBlock to provide selection across Markdown blocks, including paragraphs, headings, tables, inline code, and code blocks. By default, the bundled style marks each MarkdownRenderer as a selection scope, so users can drag-select text across all selectable text blocks inside the same renderer.

  If you need multiple renderers or custom containers to share one selection, set MarkdownTextBlock.IsSelectionScope="True" on their nearest shared visual parent:

  <StackPanel md:MarkdownTextBlock.IsSelectionScope="True">
    <md:MarkdownRenderer/>
    <md:MarkdownRenderer/>
  </StackPanel>

  When scopes are nested, the topmost scope is used. This makes it possible to set a broad application-level selection scope, while still keeping the default renderer-level behavior for simple cases. The old MarkdownRenderer.SelectionScopeName API is kept for compatibility, but new code should use MarkdownTextBlock.IsSelectionScope.

  During drag selection, moving the pointer outside a ScrollViewer automatically scrolls the nearest scrollable parent. For nested scroll viewers, the renderer follows Avalonia scroll chaining: it tries the inner ScrollViewer first and continues to outer scroll viewers only when ScrollViewer.IsScrollChainingEnabled allows it.

• Q: Why is LaTeX like \(xxx\) not rendered?

• A: The default Markdig math parser supports $...$ and $$...$$. To support \(...\) and \[...\], enable the extended math parser before creating any MarkdownRenderer instances:

  MarkdownRenderer.ConfigurePipeline += x => x.UseExtendedMathematics();
  MarkdownNode.Edit(builder => builder
      .Register<MathInlineNode>()
      .Register<MathBlockNode>()
  );

We welcome issues, feature ideas, and PRs! See CONTRIBUTING.md for guidelines.

Distributed under the Apache 2.0 License. See LICENSE for more information.

• markdig - BSD-2-Clause License
  • Markdown parser for Everywhere.Markdown rendering
  • Source repo: https://github.com/xoofx/markdig
• Svg.Skia - MIT License
  • Svg rendering for images
  • Source repo: https://github.com/wieslawsoltes/Svg.Skia
• TextMateSharp - MIT License
  • Syntax highlighting for code blocks
  • Source repo: https://github.com/danipen/TextMateSharp
• CSharpMath - MIT License
  • LaTeX rendering support
  • Source repo: https://github.com/verybadcat/CSharpMath
• Mermaider - MIT License
  • LA pure dotnet mermaid parser, layout engine AND renderer, no js runtime, AOT ready.
  • Source repo: https://github.com/nullean/mermaider