{"id":30071168,"url":"https://github.com/dearva/livemarkdown.avalonia","last_synced_at":"2026-04-10T11:07:01.031Z","repository":{"id":306439161,"uuid":"1026114217","full_name":"DearVa/LiveMarkdown.Avalonia","owner":"DearVa","description":"High performance, real-time markdown renderer for AI/LLM","archived":false,"fork":false,"pushed_at":"2026-04-10T09:50:26.000Z","size":53708,"stargazers_count":112,"open_issues_count":0,"forks_count":18,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-04-10T10:25:55.960Z","etag":null,"topics":["ai","avalonia","llm","markdig","markdown"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DearVa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"artemisli","thanks_dev":null,"custom":["https://afdian.tv/a/DearVa"]}},"created_at":"2025-07-25T10:28:50.000Z","updated_at":"2026-04-10T09:50:30.000Z","dependencies_parsed_at":"2025-07-25T20:15:37.229Z","dependency_job_id":"bc1c4a07-9c9b-43e3-b1fc-8a3f00666ac8","html_url":"https://github.com/DearVa/LiveMarkdown.Avalonia","commit_stats":null,"previous_names":["dearva/avalonia.livemarkdown"],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/DearVa/LiveMarkdown.Avalonia","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DearVa%2FLiveMarkdown.Avalonia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DearVa%2FLiveMarkdown.Avalonia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DearVa%2FLiveMarkdown.Avalonia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DearVa%2FLiveMarkdown.Avalonia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DearVa","download_url":"https://codeload.github.com/DearVa/LiveMarkdown.Avalonia/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DearVa%2FLiveMarkdown.Avalonia/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31639526,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","avalonia","llm","markdig","markdown"],"created_at":"2025-08-08T12:22:24.289Z","updated_at":"2026-04-10T11:07:01.025Z","avatar_url":"https://github.com/DearVa.png","language":"C#","funding_links":["https://buymeacoffee.com/artemisli","https://afdian.tv/a/DearVa","https://www.buymeacoffee.com/artemisli","https://img.buymeacoffee.com/button-api/?text=Support%20%20Me\u0026emoji=\u0026slug=artemisli\u0026button_colour=FFDD00\u0026font_colour=000000\u0026font_family=Comic\u0026outline_colour=000000\u0026coffee_colour=ffffff"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/DearVa/LiveMarkdown.Avalonia/main/img/icon-large.png\" alt=\"LiveMarkdown.Avalonia Logo\" width=\"128\" height=\"128\" /\u003e\n\n\u003ch1\u003eLiveMarkdown.Avalonia\u003c/h1\u003e\n\n**High performance, real-time markdown renderer for AI/LLM**\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://deepwiki.com/DearVa/LiveMarkdown.Avalonia\"\u003e\u003cimg src=\"https://deepwiki.com/badge.svg\" alt=\"Ask DeepWiki\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.nuget.org/packages/LiveMarkdown.Avalonia/\"\u003e\u003cimg src=\"https://img.shields.io/nuget/v/LiveMarkdown.Avalonia.svg?style=flat-square\" alt=\"NuGet\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://docs.microsoft.com/en-us/dotnet/standard/net-standard\"\u003e\u003cimg src=\"https://img.shields.io/badge/netstandard-2.0-blue.svg?style=flat-square\" alt=\"netstandard2.0\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://avaloniaui.net/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Avalonia-11-blue.svg?style=flat-square\" alt=\"Avalonia\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/DearVa/LiveMarkdown.Avalonia/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/DearVa/LiveMarkdown.Avalonia.svg?style=flat-square\" alt=\"GitHub issues\"\u003e\u003c/a\u003e\n  \u003ca href=\"LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/DearVa/LiveMarkdown.Avalonia/main/img/demo.gif\" alt=\"LiveMarkdown.Avalonia Demo\" width=\"800\" /\u003e\n\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n## 👋 Introduction\n\n`LiveMarkdown.Avalonia` is a High-performance Markdown viewer for Avalonia applications.\nIt supports **real-time rendering** of Markdown content, so it's ideal for applications that require dynamic text\nupdating, **especially when streaming large model outputs**.\n\n## ⭐ Features\n\n- 🚀 **High-performance rendering powered by [Markdig](https://github.com/xoofx/markdig)**\n- 🔄 **Real-time updates**: Automatically re-renders changes in Markdown content\n- 🎨 **Customizable styles**: Easily style Markdown elements using Avalonia's powerful styling system\n- 🔗 **Link support**: Clickable links with customizable behavior\n- 📊 **Table support**: Render tables with proper formatting\n- 📜 **Code block syntax highlighting**: Supports multiple languages\n  with [TextMateSharp](https://github.com/danipen/TextMateSharp)\n- 🖼️ **Image support**: Load online, local even `avares` images asynchronously\n- ✍️ **Selectable text**: Text can be selected across different Markdown elements\n\n\u003e [!NOTE]\n\u003e This library currently only supports `Append` and `Clear` operations on the Markdown content, which is enough for LLM\n\u003e streaming scenarios.\n\n\u003e [!WARNING]\n\u003e Known issue: Avalonia 11.3.5 and 11.3.6 changed text layout behavior, which may cause some text offset issues in\n\u003e certain scenarios. e.g. code inline has extra bottom margin, wried italic font rendering, etc.\n\u003e\n\u003e Please use 11.3.0 ~ 11.3.4 or \u003e= 11.3.7 to avoid this problem.\n\n## ❤️ Sponsor\n\nThis project is fully open-source and free. Your support will improve this project a lot. I sincerely thank all my\nsponsors!\n\n\u003ca href=\"https://www.buymeacoffee.com/artemisli\"\u003e\u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Support%20%20Me\u0026emoji=\u0026slug=artemisli\u0026button_colour=FFDD00\u0026font_colour=000000\u0026font_family=Comic\u0026outline_colour=000000\u0026coffee_colour=ffffff\" alt=\"Buy me a coffee\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://afdian.com/a/DearVa\"\u003e\u003cimg width=\"200\" src=\"https://pic1.afdiancdn.com/static/img/welcome/button-sponsorme.png\" alt=\"爱发电\"\u003e\u003c/a\u003e\n\u003ca href=\"https://app.fossa.com/projects/git%2Bgithub.com%2FDearVa%2FLiveMarkdown.Avalonia?ref=badge_shield\" alt=\"FOSSA Status\"\u003e\u003cimg src=\"https://app.fossa.com/api/projects/git%2Bgithub.com%2FDearVa%2FLiveMarkdown.Avalonia.svg?type=shield\"/\u003e\u003c/a\u003e\n\n## ✈️ Roadmap\n\n- [x] Basic Markdown rendering\n- [x] Real-time updates\n- [x] Link support\n- [x] Table support\n- [x] Code block syntax highlighting\n- [x] Image support\n  - [x] Bitmap\n  - [x] SVG\n  - [x] Online images\n  - [x] Local images\n  - [x] `avares` images\n- [x] Selectable text across elements\n- [x] LaTeX support\n- [ ] HTML support\n- [ ] 🚧 Mermaid diagram support\n\n## 🚀 Getting Started\n\n### 1. Install the NuGet package\n\nYou can install the latest version from NuGet CLI:\n\n```bash\ndotnet add package LiveMarkdown.Avalonia\n```\n\nor use the NuGet Package Manager in your IDE.\n\n### 2. Register the Markdown styles in your Avalonia application\n\n```xml\n\u003cApplication\n  x:Class=\"YourAppClass\" xmlns=\"https://github.com/avaloniaui\"\n  xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" RequestedThemeVariant=\"Default\"\u003e\n\n  \u003cApplication.Styles\u003e\n    \u003c!-- Your other styles here --\u003e\n    \u003cStyleInclude Source=\"avares://LiveMarkdown.Avalonia/Styles.axaml\"/\u003e\n  \u003c/Application.Styles\u003e\n\n  \u003cApplication.Resources\u003e\n    \u003c!-- Your other resources here --\u003e\n    \u003cResourceDictionary\u003e\n      \u003cResourceDictionary.MergedDictionaries\u003e\n        \u003cResourceInclude Source=\"avares://LiveMarkdown.Avalonia/Defaults.axaml\"/\u003e\n      \u003c/ResourceDictionary.MergedDictionaries\u003e\n    \u003c/ResourceDictionary\u003e\n  \u003c/Application.Resources\u003e\n\u003c/Application\u003e\n```\n\n### 3. Use the `MarkdownRenderer` control in your XAML\n\nAdd the `MarkdownRenderer` control to your `.axaml` file:\n\n```xml\n\u003cYourControl\n  xmlns:md=\"clr-namespace:LiveMarkdown.Avalonia;assembly=LiveMarkdown.Avalonia\"\u003e\n  \u003cmd:MarkdownRenderer x:Name=\"MarkdownRenderer\"/\u003e\n\u003c/YourControl\u003e\n```\n\nThen you can manage the Markdown content in your code-behind:\n\n```csharp\n// ObservableStringBuilder is used for efficient string updates\nvar markdownBuilder = new ObservableStringBuilder();\nMarkdownRenderer.MarkdownBuilder = markdownBuilder;\n\n// Append Markdown content, this will trigger re-rendering\nmarkdownBuilder.Append(\"# Hello, Markdown!\");\nmarkdownBuilder.Append(\"\\n\\nThis is a **live** Markdown viewer for Avalonia applications.\");\n\n// Clear the content\nmarkdownBuilder.Clear();\n```\n\nIf you want to load local images with relative paths, you can set the `MarkdownRenderer.ImageBasePath` property.\n\n### 4. (Optional) Enable LaTeX rendering\n\nLaTeX is supported via the `LiveMarkdown.Avalonia.Math` package. You can install it via NuGet:\n\n```bash\ndotnet add package LiveMarkdown.Avalonia.Math\n```\n\nThen register both the `MathInlineNode` and `MathBlockNode` before using LaTeX in your Markdown content (e.g. App.axaml.cs):\n\n```csharp\nusing LiveMarkdown.Avalonia;\n\nMarkdownNode.Register\u003cMathInlineNode\u003e();\nMarkdownNode.Register\u003cMathBlockNode\u003e(); // This is also required for block-level LaTeX support, e.g. $$...$$\n```\n\n### 5. (Optional) Enable SVG image rendering\n\nSVG rendering is supported via the `LiveMarkdown.Avalonia.Svg` or `LiveMarkdown.Avalonia.Svg.Skia` package. You can install one of them via NuGet:\n\n```bash\ndotnet add package LiveMarkdown.Avalonia.Svg\n```\n\nor\n\n```bash\ndotnet add package LiveMarkdown.Avalonia.Svg.Skia\n```\n\n\u003e [!NOTE] \n\u003e The `LiveMarkdown.Avalonia.Svg` and `LiveMarkdown.Avalonia.Svg.Skia` packages provide two different implementations for SVG rendering.\n\u003e The former uses `Svg.Controls.Avalonia` which is more Avalonia-native, while the latter uses `Svg.Skia` which is more powerful and has better compatibility.\n\nThen register the `SvgImageDecoder` into the `AsyncImageLoader` before using SVG images in your Markdown content (e.g. App.axaml.cs):\n\n```csharp\nusing LiveMarkdown.Avalonia;\n\nAsyncImageLoader.DefaultDecoders =\n[\n    SvgImageDecoder.Shared,\n    DefaultBitmapDecoder.Shared\n];\n```\n\nYou can also set the `AsyncImageLoader.Decoders` property on a per-renderer basis if you want different renderers to use different decoders.\n\n### 6. (Optional) Enable Mermaid diagram rendering\n\n\u003e [!WARNING]\n\u003e Mermaid diagram rendering is currently in early preview stage, and may have some issues.\n\u003e Only flowchart and state diagram are supported for now, and the rendering performance may not be optimal.\n\nMermaid diagram rendering is supported via the `LiveMarkdown.Avalonia.Mermaid` package. You can install it via NuGet:\n\n```bash\ndotnet add package LiveMarkdown.Avalonia.Mermaid\n```\n\nThen register the `MermaidDiagramNode` before using Mermaid diagrams in your Markdown content (e.g. App.axaml.cs):\n\n```csharp\nusing LiveMarkdown.Avalonia;\n\nMarkdownRenderer.ConfigurePipeline += x =\u003e x.UseMermaid();\nMarkdownNode.Register\u003cMermaidBlockNode\u003e();\n```\n\n## 🪄 Style Customization\n\nMarkdown elements can be styled using Avalonia's powerful styling system. You can override\nthe [default styles](https://github.com/DearVa/LiveMarkdown.Avalonia/blob/main/src/LiveMarkdown.Avalonia/Styles.axaml)\nby defining your own styles in your application styles.\n\nAvalonia Styling Docs:\n\n- [Avalonia Styles](https://docs.avaloniaui.net/docs/styling)\n- [Style selector syntax](https://docs.avaloniaui.net/docs/reference/styles/style-selector-syntax)\n\n### Customizing Resources\n\nThe `\u003cResourceInclude Source=\"avares://LiveMarkdown.Avalonia/Defaults.axaml\"/\u003e` line in your `App.axaml` imports the\ndefault resources used by the renderer. You can override these resources in your application to customize the look and\nfeel.\n\nHere are the available resource keys:\n\n| Key                            | Type     | Description                                         |\n|--------------------------------|----------|-----------------------------------------------------|\n| `BorderColor`                  | `Color`  | Color of borders (e.g., code blocks, tables)        |\n| `ForegroundColor`              | `Color`  | Default text color                                  |\n| `CardBackgroundColor`          | `Color`  | Background color for tables                         |\n| `SecondaryCardBackgroundColor` | `Color`  | Background color for code blocks and quotes         |\n| `CodeInlineColor`              | `Color`  | Text color for inline code                          |\n| `QuoteBorderColor`             | `Color`  | Border color for blockquotes                        |\n| `FontSizeS`                    | `Double` | Small font size (not used yet)                      |\n| `FontSizeM`                    | `Double` | Medium font size (default text size)                |\n| `FontSizeL`                    | `Double` | Large font size for Heading4, Heading5 and Heading6 |\n| `FontSizeXl`                   | `Double` | Extra large font size for Heading3                  |\n| `FontSize2Xl`                  | `Double` | 2XL font size for Heading2                          |\n| `FontSize3Xl`                  | `Double` | 3XL font size for Heading1                          |\n\n### Code Block Theme\n\nYou can customize the syntax highlighting theme for code blocks. The default theme is `DarkPlus`.\n\n#### Global Setting\n\nTo set the theme globally for a `MarkdownRenderer` instance, use the `CodeBlockColorTheme` property:\n\n```xml\n\u003cmd:MarkdownRenderer CodeBlockColorTheme=\"LightPlus\"/\u003e\n```\n\n#### Per-CodeBlock Setting via Styles\n\nYou can also use Avalonia styles to set the theme for specific code blocks or based on conditions:\n\n```xml\n\u003cStyle Selector=\"md|CodeBlock\"\u003e\n  \u003cSetter Property=\"ColorTheme\" Value=\"SolarizedDark\"/\u003e\n\u003c/Style\u003e\n```\n\nSupported themes are defined in `TextMateSharp.Grammars.ThemeName`.\n\n### Emphasis Styles\n\nBy 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.\n\nHere 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.\n\n```xml\n\u003cStyle Selector=\"md|MarkdownRenderer\"\u003e\n  \u003cStyle Selector=\"^ Span.Emphasis\"\u003e\n    \u003c!-- You can even set the bold style separately for **star** and __underscore__ --\u003e\n    \u003c!-- For a full list of available style classes, please refer to the source code of the renderer --\u003e\n    \u003c!-- https://github.com/DearVa/LiveMarkdown.Avalonia/blob/main/src/LiveMarkdown.Avalonia/Nodes/Inline/EmphasisInlineNode.cs --\u003e\n    \u003cStyle Selector=\"^.Bold.Star\"\u003e\n      \u003cSetter Property=\"FontWeight\" Value=\"Bold\"/\u003e\n    \u003c/Style\u003e\n    \u003cStyle Selector=\"^.Bold.Underscore\"\u003e\n      \u003cSetter Property=\"FontWeight\" Value=\"Normal\"/\u003e\n    \u003c/Style\u003e\n\n    \u003c!-- You can define custom styles for the extended emphasis elements like subscript, superscript, underline and highlight --\u003e\n    \u003cStyle Selector=\"^.Subscript\"\u003e\n      \u003cSetter Property=\"BaselineAlignment\" Value=\"Subscript\"/\u003e\n      \u003cSetter Property=\"FontSize\" Value=\"8\"/\u003e\n    \u003c/Style\u003e\n    \u003cStyle Selector=\"^.Superscript\"\u003e\n      \u003cSetter Property=\"BaselineAlignment\" Value=\"Superscript\"/\u003e\n      \u003cSetter Property=\"FontSize\" Value=\"8\"/\u003e\n    \u003c/Style\u003e\n    \u003cStyle Selector=\"^.Underline\"\u003e\n      \u003cSetter Property=\"TextDecorations\" Value=\"Underline\"/\u003e\n    \u003c/Style\u003e\n    \u003cStyle Selector=\"^.Highlight\"\u003e\n      \u003cSetter Property=\"Background\" Value=\"DarkOrange\"/\u003e\n    \u003c/Style\u003e\n  \u003c/Style\u003e\n\u003c/Style\u003e\n```\n\n## 🤔 FAQ\n\n- Q: Why some emojis not rendered correctly (rendered in single color)?\n- A: This is a known issue caused by Skia (the render backend of Avalonia). You can upgrade SkiaSharp version (e.g. \u003e=\n  3.117.0) to fix this. [Related issue](https://github.com/AvaloniaUI/Avalonia/issues/18677)\n\n## 🤝 Contributing\n\nWe welcome issues, feature ideas, and PRs! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n## 📄 License\n\nDistributed under the Apache 2.0 License. See [LICENSE](LICENSE) for more information.\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FDearVa%2FLiveMarkdown.Avalonia.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FDearVa%2FLiveMarkdown.Avalonia?ref=badge_large)\n\n### Third-Party Licenses\n\n- **markdig** - [BSD-2-Clause License](https://github.com/xoofx/markdig/blob/master/license.txt)\n  - Markdown parser for Everywhere.Markdown rendering\n  - Source repo: https://github.com/xoofx/markdig\n- **Svg.Skia** - [MIT License](https://github.com/wieslawsoltes/Svg.Skia/blob/master/LICENSE.TXT)\n  - Svg rendering for images\n  - Source repo: https://github.com/wieslawsoltes/Svg.Skia\n- **TextMateSharp** - [MIT License](https://github.com/danipen/TextMateSharp/blob/master/LICENSE.md)\n  - Syntax highlighting for code blocks\n  - Source repo: https://github.com/danipen/TextMateSharp\n- **CSharpMath** - [MIT License](https://github.com/verybadcat/CSharpMath/blob/master/License)\n  - LaTeX rendering support\n  - Source repo: https://github.com/verybadcat/CSharpMath\n- **Mermaider** - [MIT License](https://github.com/nullean/mermaider/blob/main/LICENSE.txt)\n  - LA pure dotnet mermaid parser, layout engine AND renderer, no js runtime, AOT ready.\n  - Source repo: https://github.com/nullean/mermaider","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdearva%2Flivemarkdown.avalonia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdearva%2Flivemarkdown.avalonia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdearva%2Flivemarkdown.avalonia/lists"}