Syncfusion.Maui.MarkdownViewer

Syncfusion .NET MAUI Markdown Viewer (SfMarkdownViewer)

The Syncfusion .NET MAUI Markdown Viewer renders Markdown content with rich formatting, interactive hyperlinks, and Mermaid diagram support. Built on a lightweight engine, it displays Markdown documents beautifully on Android, iOS, macOS, and Windows from a single codebase—perfect for documentation viewers, AI chat responses, and in-app help.

Documentation · Getting Started · API Reference · Demos on GitHub · Product Page · Release Notes

---

Using this package with an AI coding agent

Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:

Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project’s platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.

Platform reference: https://ai.syncfusion.com/maui/llms.txt

Key features

Rendering

• Full Markdown syntax: headings, paragraphs, lists (including task lists and definition lists), tables, block quotes, code blocks, and images.
• Mermaid diagram visualization directly inside the Markdown content.
• The Source property accepts raw Markdown text, a remote URL, or a local file path.
• Raw inline HTML elements are supported alongside standard Markdown.

Styling

• Fine-grained control through MarkdownStyleSettings: font sizes and colors for H1-H3, body text, and tables (header text, data text, and background).
• Built-in light and dark theme support.

Interaction

• Interactive hyperlinks with a HyperlinkClicked event that exposes the URL and lets you cancel navigation.
• Auto height: EnableAutoHeight measures the rendered content and resizes the control automatically.
• Streaming rendering: IsStreamingEnabled renders content incrementally (word by word) as the source grows-ideal for AI assistant responses-instead of reloading the whole document.

---

Supported platforms

Platform	Target framework
Android	net9.0-android, net10.0-android
iOS	net9.0-ios, net10.0-ios
macOS (Mac Catalyst)	net9.0-maccatalyst, net10.0-maccatalyst
Windows	net9.0-windows10.0.19041, net10.0-windows10.0.19041

Minimum OS versions follow the .NET MAUI supported platforms.

---

Installation

.NET CLI

dotnet add package Syncfusion.Maui.MarkdownViewer

Package Manager Console

Install-Package Syncfusion.Maui.MarkdownViewer

---

Getting started

1. Register the Syncfusion core handler

In MauiProgram.cs, call ConfigureSyncfusionCore():

using Syncfusion.Maui.Core.Hosting;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore();

        return builder.Build();
    }
}

2. Add SfMarkdownViewer to your page

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.MarkdownViewer;assembly=Syncfusion.Maui.MarkdownViewer"
             x:Class="YourAppNamespace.MainPage">

    <syncfusion:SfMarkdownViewer Source="# Hello World"
                                EnableAutoHeight="True" />

</ContentPage>

Run the app. The Markdown content is parsed and rendered with rich formatting, interactive links, and diagram support.

3. Load Markdown from any source

The Source property accepts raw Markdown text, a remote URL, or a local file path:

SfMarkdownViewer markdownViewer = new SfMarkdownViewer();

markdownViewer.Source = "# Hello World";
// (or)
markdownViewer.Source = "https://example.com/readme.md";
// (or)
markdownViewer.Source = "file:///storage/emulated/0/docs/readme.md";

4. Render Mermaid diagrams

Use the familiar Mermaid fenced code block, and the viewer renders it as an interactive diagram:

```mermaid
flowchart LR
    A[Start] --> B{Valid?}
    B -- Yes --> C[Process]
    B -- No --> A
```

---

Common scenarios

Customize the appearance with MarkdownStyleSettings

Control fonts and colors for headings, body text, and tables. On top of that, apply any custom CSS through CssStyleRules, which overrides or complements the base styles:

XAML

<syncfusion:SfMarkdownViewer Source="# Hello World">
    <syncfusion:SfMarkdownViewer.Settings>
        <syncfusion:MarkdownStyleSettings
            H1FontSize="32px"
            H1Color="#2C3E50"
            H2FontSize="24px"
            H2Color="#34495E"
            H3FontSize="18px"
            H3Color="#7F8C8D"
            BodyTextColor="#2C3E50"
            BodyFontSize="14px"
            TableHeaderFontSize="18px"
            TableHeaderTextColor="#2C3E50"
            TableDataFontSize="18px"
            TableDataTextColor="#2C3E50"
            TableBackground="#F8F9FA"
            CssStyleRules="body { line-height: 1.6; margin: 16px; }" />
    </syncfusion:SfMarkdownViewer.Settings>
</syncfusion:SfMarkdownViewer>

C#

SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
markdownViewer.Source = "# Hello World";

markdownViewer.Settings = new MarkdownStyleSettings()
{
    H1FontSize = "32px",
    H1Color = "#2C3E50",
    H2FontSize = "24px",
    H2Color = "#34495E",
    H3FontSize = "18px",
    H3Color = "#7F8C8D",
    BodyTextColor = "#2C3E50",
    BodyFontSize = "14px",
    TableHeaderFontSize = "18px",
    TableHeaderTextColor = "#2C3E50",
    TableDataFontSize = "18px",
    TableDataTextColor = "#2C3E50",
    TableBackground = "#F8F9FA",
    CssStyleRules = "body { line-height: 1.6; margin: 16px; }"
};

Enable streaming rendering for AI responses

When IsStreamingEnabled is true, the content is rendered incrementally (word by word) instead of reloading the full document on every Source update:

<syncfusion:SfMarkdownViewer x:Name="markdownViewer" IsStreamingEnabled="True" />

// Simulate a token stream from an AI service.
string[] tokens = { "## ", "Answer", "\n\n", "The ", "Markdown ", "Viewer ", "streams ", "this ", "text." };

foreach (string token in tokens)
{
    markdownViewer.Source += token;
    await Task.Delay(100);
}

Handle hyperlink clicks

The HyperlinkClicked event provides the URL and lets you cancel the built-in navigation:

markdownViewer.HyperlinkClicked += async (sender, e) =>
{
    if (e.Url.StartsWith("https"))
    {
        // Open the link in the system browser instead of the viewer.
        await Launcher.OpenAsync(e.Url);
        e.Cancel = true;
    }
};

Let the control size itself to its content

Set EnableAutoHeight to measure the rendered content and adjust the control height automatically:

<syncfusion:SfMarkdownViewer Source="{Binding MarkdownText}" EnableAutoHeight="True" />

---

Dependencies

Installing this package also installs the following packages:

• Microsoft.Maui.Controls
• Syncfusion.Maui.Core
• Syncfusion.Markdown

---

License

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. You can purchase a license here or start a free 30-day trial here.

Register your license key

Register the key in App.xaml.cs before the app is built:

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

For details, see Licensing overview.

---

Support and feedback

• Support tickets: Syncfusion Support Portal
• Community forums: .NET MAUI Forums
• Feature requests and bug reports: Feedback Portal
• Samples: Syncfusion .NET MAUI demos on GitHub

---

About Syncfusion®

Syncfusion® provides an ecosystem of compatible developer control suites, embeddable BI platforms, and business software. Our 1,900+ components and frameworks for mobile, web, and desktop development get your products to market faster, and our Bold line delivers a diverse set of enterprise solutions, ranging from data analysis and visualization, to customer service software, to an electronic signature platform. With endless customization options, you can deliver an optimal user experience while saving development time and cost.

We are proud to serve a wide variety of customers, from individual developers to Fortune 500 companies. No matter your needs or your budget, we have the tools to help your team succeed.

---

Please contact us if you have any questions—we’d love to hear from you.