From f9b4552907c6b7ee1ebcb2c387f624789bd64b8c Mon Sep 17 00:00:00 2001
From: David Iglesias Teixeira <ditman@gmail.com>
Date: Thu, 5 Mar 2026 18:28:04 -0800
Subject: [PATCH 1/6] [web_core] MarkdownRenderer is now async.

---
 renderers/web_core/CHANGELOG.md            | 9 +++++++++
 renderers/web_core/package.json            | 2 +-
 renderers/web_core/src/v0_8/types/types.ts | 4 ++--
 3 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 renderers/web_core/CHANGELOG.md

diff --git a/renderers/web_core/CHANGELOG.md b/renderers/web_core/CHANGELOG.md
new file mode 100644
index 000000000..b2638e27e
--- /dev/null
+++ b/renderers/web_core/CHANGELOG.md
@@ -0,0 +1,9 @@
+## 0.8.3
+
+* The `MarkdownRenderer` type is now async and returns a `Promise<string>`.
+
+## 0.8.2
+
+## 0.8.1
+
+## 0.8.0
diff --git a/renderers/web_core/package.json b/renderers/web_core/package.json
index 00236b9e8..e52fb2f48 100644
--- a/renderers/web_core/package.json
+++ b/renderers/web_core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@a2ui/web_core",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "A2UI Core Library",
   "main": "./dist/src/v0_8/index.js",
   "types": "./dist/src/v0_8/index.d.ts",
diff --git a/renderers/web_core/src/v0_8/types/types.ts b/renderers/web_core/src/v0_8/types/types.ts
index 24e225db0..2cfa15298 100644
--- a/renderers/web_core/src/v0_8/types/types.ts
+++ b/renderers/web_core/src/v0_8/types/types.ts
@@ -514,12 +514,12 @@ export declare interface Surface {
 // Markdown rendering
 /**
  * Renders `markdown` using `options`.
- * @returns The rendered HTML as a string.
+ * @returns A promise that resolves to the rendered HTML as a string.
  */
 export declare type MarkdownRenderer = (
   markdown: string,
   options?: MarkdownRendererOptions,
-) => string;
+) => Promise<string>;
 
 /**
  * A map of tag names to a list of classnames to be applied to a tag.

From ed254fb5b8fe74406830c73f5ba41eda8b707011 Mon Sep 17 00:00:00 2001
From: David Iglesias Teixeira <ditman@gmail.com>
Date: Thu, 5 Mar 2026 18:29:29 -0800
Subject: [PATCH 2/6] [markdown-it] Made render async to conform to the
 MarkdownRenderer interface

---
 renderers/markdown/markdown-it/CHANGELOG.md   |  7 +++++++
 renderers/markdown/markdown-it/package.json   |  2 +-
 .../markdown/markdown-it/src/markdown.test.ts | 20 +++++++++----------
 .../markdown/markdown-it/src/markdown.ts      |  6 +++---
 4 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 renderers/markdown/markdown-it/CHANGELOG.md

diff --git a/renderers/markdown/markdown-it/CHANGELOG.md b/renderers/markdown/markdown-it/CHANGELOG.md
new file mode 100644
index 000000000..28cfacc03
--- /dev/null
+++ b/renderers/markdown/markdown-it/CHANGELOG.md
@@ -0,0 +1,7 @@
+## 0.0.2
+
+* Made the markdown renderer async to support async markdown renderers.
+
+## 0.0.1
+
+* Initial release
\ No newline at end of file
diff --git a/renderers/markdown/markdown-it/package.json b/renderers/markdown/markdown-it/package.json
index 69de3d150..03580ba74 100644
--- a/renderers/markdown/markdown-it/package.json
+++ b/renderers/markdown/markdown-it/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@a2ui/markdown-it",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A Markdown renderer using markdown-it and dompurify.",
   "keywords": [],
   "homepage": "https://github.com/google/A2UI/tree/main/web#readme",
diff --git a/renderers/markdown/markdown-it/src/markdown.test.ts b/renderers/markdown/markdown-it/src/markdown.test.ts
index 4378f8f95..e3ca65674 100644
--- a/renderers/markdown/markdown-it/src/markdown.test.ts
+++ b/renderers/markdown/markdown-it/src/markdown.test.ts
@@ -50,42 +50,42 @@ describe('MarkdownItRenderer', () => {
 });
 
 describe('renderMarkdown', () => {
-  it('renders markdown successfully', () => {
-    const html = renderMarkdown('# Hello World');
+  it('renders markdown successfully', async () => {
+    const html = await renderMarkdown('# Hello World');
     assert.match(html, /<h1>Hello World<\/h1>/);
   });
 
-  it('sanitizes malicious markdown links', () => {
+  it('sanitizes malicious markdown links', async () => {
     // Markdown-it strips javascript links by default, emitting the raw markdown string.
     // DOMPurify acts as a secondary layer of defense.
     const input = 'This is a test [link](javascript:alert("XSS"))';
-    const html = renderMarkdown(input);
+    const html = await renderMarkdown(input);
 
     // Ensure the javascript protocol link is neutralized completely
     assert.doesNotMatch(html, /href="javascript:alert/);
     assert.match(html, /\[link\]\(javascript:alert\("XSS"\)\)/); // It remains raw text
   });
 
-  it('safely escapes HTML input without enabling raw HTML', () => {
+  it('safely escapes HTML input without enabling raw HTML', async () => {
     const input = 'This is a test <script>alert("XSS")</script>';
-    const html = renderMarkdown(input);
+    const html = await renderMarkdown(input);
 
     // Markdown-it will escape it to &lt;script&gt;
     assert.match(html, /&lt;script&gt;alert\("XSS"\)&lt;\/script&gt;/);
     assert.doesNotMatch(html, /<script>/);
   });
 
-  it('preserves safe HTML output', () => {
+  it('preserves safe HTML output', async () => {
     const input = 'This is **bold** and *italic*.';
-    const html = renderMarkdown(input);
+    const html = await renderMarkdown(input);
 
     assert.match(html, /<strong>bold<\/strong>/);
     assert.match(html, /<em>italic<\/em>/);
   });
 
-  it('preserves classnames applied via tagClassMap', () => {
+  it('preserves classnames applied via tagClassMap', async () => {
     const input = '# Heading\n\nParagraph text';
-    const html = renderMarkdown(input, {
+    const html = await renderMarkdown(input, {
       tagClassMap: {
         h1: ['text-h1', 'bold'],
         p: ['body-text'],
diff --git a/renderers/markdown/markdown-it/src/markdown.ts b/renderers/markdown/markdown-it/src/markdown.ts
index 95b113523..f7e0af506 100644
--- a/renderers/markdown/markdown-it/src/markdown.ts
+++ b/renderers/markdown/markdown-it/src/markdown.ts
@@ -22,9 +22,9 @@ import * as Types from '@a2ui/web_core';
  * A Markdown to HTML renderer using markdown-it and dompurify.
  * @param value The markdown code to render.
  * @param options Options for the markdown renderer.
- * @returns The rendered HTML as a string.
+ * @returns A promise that resolves to the rendered HTML as a string.
  */
-export function renderMarkdown(value: string, options?: Types.MarkdownRendererOptions): string {
+export async function renderMarkdown(value: string, options?: Types.MarkdownRendererOptions): Promise<string> {
   const htmlString = rawMarkdownRenderer.render(value, options?.tagClassMap);
-  return sanitize(htmlString);
+  return Promise.resolve(sanitize(htmlString));
 }

From 37b4ec2fe0c2a54c2d125515ff241fa5cf732475 Mon Sep 17 00:00:00 2001
From: David Iglesias Teixeira <ditman@gmail.com>
Date: Thu, 5 Mar 2026 18:31:05 -0800
Subject: [PATCH 3/6] [angular] Made markdown renderer async, and updated Text
 widget to support it.

---
 renderers/angular/src/lib/catalog/text.ts  | 6 ++++--
 renderers/angular/src/lib/data/markdown.ts | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/renderers/angular/src/lib/catalog/text.ts b/renderers/angular/src/lib/catalog/text.ts
index 631849760..eba0228c0 100644
--- a/renderers/angular/src/lib/catalog/text.ts
+++ b/renderers/angular/src/lib/catalog/text.ts
@@ -22,6 +22,7 @@ import {
   input,
   ViewEncapsulation,
 } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
 import { DynamicComponent } from '../rendering/dynamic-component';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Styles from '@a2ui/web_core/styles/index';
@@ -45,10 +46,11 @@ interface HintedStyles {
     <section
       [class]="classes()"
       [style]="additionalStyles()"
-      [innerHTML]="resolvedText()"
+      [innerHTML]="resolvedText() | async"
     ></section>
   `,
   encapsulation: ViewEncapsulation.None,
+  imports: [AsyncPipe],
   styles: `
     a2ui-text {
       display: block;
@@ -75,7 +77,7 @@ export class Text extends DynamicComponent {
     let value = super.resolvePrimitive(this.text());
 
     if (value == null) {
-      return '(empty)';
+      return Promise.resolve('(empty)');
     }
 
     switch (usageHint) {
diff --git a/renderers/angular/src/lib/data/markdown.ts b/renderers/angular/src/lib/data/markdown.ts
index 4250b9733..cb7031557 100644
--- a/renderers/angular/src/lib/data/markdown.ts
+++ b/renderers/angular/src/lib/data/markdown.ts
@@ -28,7 +28,7 @@ export class MarkdownRenderer {
   private sanitizer = inject(DomSanitizer);
   private static defaultMarkdownWarningLogged = false;
 
-  render(value: string, markdownOptions?: Types.MarkdownRendererOptions) {
+  async render(value: string, markdownOptions?: Types.MarkdownRendererOptions): Promise<string> {
     if (this.markdownRenderer) {
       // The markdownRenderer should return a sanitized string.
       return this.markdownRenderer(value, markdownOptions);
@@ -43,7 +43,7 @@ export class MarkdownRenderer {
 
     // Return a span with a sanitized version of the input `value`.
     const sanitizedValue = this.sanitizer.sanitize(SecurityContext.HTML, value);
-    return `<span class="no-markdown-renderer">${sanitizedValue}</span>`;
+    return Promise.resolve(`<span class="no-markdown-renderer">${sanitizedValue}</span>`);
   }
 }
 

From 3ad36bc82d05a2e106515ba4e3df662b54911656 Mon Sep 17 00:00:00 2001
From: David Iglesias Teixeira <ditman@gmail.com>
Date: Thu, 5 Mar 2026 18:32:05 -0800
Subject: [PATCH 4/6] [lit] Support markdownRenderer being async on the Text
 widget.

---
 renderers/lit/src/0.8/ui/directives/markdown.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/renderers/lit/src/0.8/ui/directives/markdown.ts b/renderers/lit/src/0.8/ui/directives/markdown.ts
index 20ee6b0be..4536fa7f4 100644
--- a/renderers/lit/src/0.8/ui/directives/markdown.ts
+++ b/renderers/lit/src/0.8/ui/directives/markdown.ts
@@ -22,6 +22,7 @@ import {
   directive,
 } from "lit/directive.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { until } from "lit/directives/until.js";
 import * as Types from "@a2ui/web_core/types/types";
 
 class MarkdownDirective extends Directive {
@@ -49,10 +50,15 @@ class MarkdownDirective extends Directive {
    */
   render(value: string, markdownRenderer?: Types.MarkdownRenderer, markdownOptions?: Types.MarkdownRendererOptions) {
     if (markdownRenderer) {
-      // The markdown renderer returns a string, which we need to convert to a
-      // template result using unsafeHTML.
-      // It is the responsibilty of the markdown renderer to sanitize the HTML.
-      return unsafeHTML(markdownRenderer(value, markdownOptions));
+      const rendered = markdownRenderer(value, markdownOptions).then((value) => {
+        // `value` is a plain string, which we need to convert to a template
+        // with the `unsafeHTML` directive.
+        // It is the responsibility of the markdown renderer to sanitize the HTML.
+        return unsafeHTML(value);
+      })
+      // The until directive lets us render a placeholder *until* the rendered
+      // content resolves.
+      return until(rendered, html`<span class="no-markdown-renderer">${value}</span>`);
     }
 
     if (!MarkdownDirective.defaultMarkdownWarningLogged) {

From d482f4608d6aa8dd7420c699cd988faaf3b1b215 Mon Sep 17 00:00:00 2001
From: David Iglesias Teixeira <ditman@gmail.com>
Date: Thu, 5 Mar 2026 18:57:21 -0800
Subject: [PATCH 5/6] Address PR feedback.

---
 renderers/angular/src/lib/data/markdown.ts     | 2 +-
 renderers/markdown/markdown-it/src/markdown.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/renderers/angular/src/lib/data/markdown.ts b/renderers/angular/src/lib/data/markdown.ts
index cb7031557..a4914ee29 100644
--- a/renderers/angular/src/lib/data/markdown.ts
+++ b/renderers/angular/src/lib/data/markdown.ts
@@ -43,7 +43,7 @@ export class MarkdownRenderer {
 
     // Return a span with a sanitized version of the input `value`.
     const sanitizedValue = this.sanitizer.sanitize(SecurityContext.HTML, value);
-    return Promise.resolve(`<span class="no-markdown-renderer">${sanitizedValue}</span>`);
+    return `<span class="no-markdown-renderer">${sanitizedValue}</span>`;
   }
 }
 
diff --git a/renderers/markdown/markdown-it/src/markdown.ts b/renderers/markdown/markdown-it/src/markdown.ts
index f7e0af506..bdbc86b4a 100644
--- a/renderers/markdown/markdown-it/src/markdown.ts
+++ b/renderers/markdown/markdown-it/src/markdown.ts
@@ -26,5 +26,5 @@ import * as Types from '@a2ui/web_core';
  */
 export async function renderMarkdown(value: string, options?: Types.MarkdownRendererOptions): Promise<string> {
   const htmlString = rawMarkdownRenderer.render(value, options?.tagClassMap);
-  return Promise.resolve(sanitize(htmlString));
+  return sanitize(htmlString);
 }

From 5af063ccae217e3da351d651b3dd08b1f68e70f9 Mon Sep 17 00:00:00 2001
From: David Iglesias Teixeira <ditman@gmail.com>
Date: Thu, 5 Mar 2026 18:58:52 -0800
Subject: [PATCH 6/6] Formatting

---
 renderers/markdown/markdown-it/CHANGELOG.md    | 4 ++--
 renderers/markdown/markdown-it/src/markdown.ts | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/renderers/markdown/markdown-it/CHANGELOG.md b/renderers/markdown/markdown-it/CHANGELOG.md
index 28cfacc03..34ed72139 100644
--- a/renderers/markdown/markdown-it/CHANGELOG.md
+++ b/renderers/markdown/markdown-it/CHANGELOG.md
@@ -1,7 +1,7 @@
 ## 0.0.2
 
-* Made the markdown renderer async to support async markdown renderers.
+- Made the markdown renderer async to support async markdown renderers.
 
 ## 0.0.1
 
-* Initial release
\ No newline at end of file
+- Initial release
diff --git a/renderers/markdown/markdown-it/src/markdown.ts b/renderers/markdown/markdown-it/src/markdown.ts
index bdbc86b4a..1191a05b0 100644
--- a/renderers/markdown/markdown-it/src/markdown.ts
+++ b/renderers/markdown/markdown-it/src/markdown.ts
@@ -24,7 +24,10 @@ import * as Types from '@a2ui/web_core';
  * @param options Options for the markdown renderer.
  * @returns A promise that resolves to the rendered HTML as a string.
  */
-export async function renderMarkdown(value: string, options?: Types.MarkdownRendererOptions): Promise<string> {
+export async function renderMarkdown(
+  value: string,
+  options?: Types.MarkdownRendererOptions,
+): Promise<string> {
   const htmlString = rawMarkdownRenderer.render(value, options?.tagClassMap);
   return sanitize(htmlString);
 }