Markdown Rendering

AI messages in @threadplane/chat can render full markdown -- headings, code blocks, tables, lists, blockquotes, math, HTML nodes, and inline formatting. Use <chat-streaming-md> for the live node-based renderer. Use renderMarkdown() only when you need a small sanitized-HTML helper in a custom template.

How It Works

The markdown pipeline has two stages:

1. Streaming renderer: <chat-streaming-md> parses markdown into node keys and renders those keys through cacheplaneMarkdownViews.
2. Sanitized HTML helper: renderMarkdown() converts markdown text to sanitized HTML using the required marked peer dependency. If marked cannot be loaded at runtime, it falls back to escaped plain text with <br> newline conversion.

The renderMarkdown() Function

import { renderMarkdown } from '@threadplane/chat';
import { DomSanitizer } from '@angular/platform-browser';
 
// In a component:
private sanitizer = inject(DomSanitizer);
 
renderMd(content: string): SafeHtml {
  return renderMarkdown(content, this.sanitizer);
}

Signature:

function renderMarkdown(content: string, sanitizer: DomSanitizer): SafeHtml

Returns: SafeHtml -- sanitized HTML that can be bound via [innerHTML].

Behavior:

• Parses markdown to HTML with marked, sanitizes it through Angular's SecurityContext.HTML, then marks the result as trusted.
• If the dynamic marked import fails at runtime, escapes HTML entities (&, <, >) and converts newlines to <br> tags as a defensive fallback.

Using Markdown in Custom Components

For custom message templates, prefer <chat-streaming-md> so you get the same node registry, math, citation, table, and code-block behavior as the built-in chat components:

import {
  ChatStreamingMdComponent,
  ChatMessageListComponent,
  MessageTemplateDirective,
  markdownDocument,
  type Message,
  type StreamingMarkdownDocument,
} from '@threadplane/chat';
 
@Component({
  selector: 'app-chat-view',
  standalone: true,
  imports: [ChatMessageListComponent, MessageTemplateDirective, ChatStreamingMdComponent],
  template: `
    <chat-message-list [agent]="chatRef">
      <ng-template chatMessageTemplate="ai" let-message>
        <chat-streaming-md [document]="documentFor(message)" />
      </ng-template>
    </chat-message-list>
  `,
})
export class ChatViewComponent {
  // chatRef = injectAgent(); // with provideAgent({...}) in the component's providers
 
  documentFor(message: Message): StreamingMarkdownDocument {
    const content = typeof message.content === 'string'
      ? message.content
      : message.content
          .filter((block) => block.type === 'text')
          .map((block) => block.text)
          .join('');
    return markdownDocument(content, message.delivery);
  }
}

If you only need sanitized HTML, call renderMarkdown() directly and provide your own styling for the host element:

import { Component, inject } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { renderMarkdown } from '@threadplane/chat';
 
@Component({
  selector: 'app-markdown-html',
  template: `<div class="markdown-body" [innerHTML]="renderMd(content)" />`,
})
export class MarkdownHtmlComponent {
  private sanitizer = inject(DomSanitizer);
  content = '';
  renderMd(content: string | unknown) {
    if (typeof content !== 'string') return '';
    return renderMarkdown(content, this.sanitizer);
  }
}

Streaming Markdown with chat-streaming-md

<chat-streaming-md> is the component that renders AI message content token-by-token using the node-based rendering pipeline. It requires one atomic [document] input with this shape:

interface StreamingMarkdownDocument {
  generation: string;
  phase: 'streaming' | 'complete';
  content: string;
}

Use the exported markdownDocument(content, delivery) helper to derive it from message content and the adapter-owned Message.delivery. Within one generation, streaming content must be append-only. Complete the same generation once, then leave its content unchanged. A retry or replacement starts a new generation. The component uses those guarantees to preserve parser and rendered-node identity while chunks arrive.

It resolves each markdown node type against MARKDOWN_VIEW_REGISTRY — a chat-internal DI token exported from @threadplane/chat.

By default the component provides cacheplaneMarkdownViews (the full 22-node registry) on its own component injector. You can override this at two levels:

• App-wide — provide a custom registry in your root or feature providers.
• Per-instance — pass a ViewRegistry via the [viewRegistry] input; the component uses that value instead of the DI tree.

Overriding Markdown Components

App-wide override

To replace a node-type renderer for every <chat-streaming-md> in your app, provide a custom MARKDOWN_VIEW_REGISTRY in your application config:

import { ApplicationConfig } from '@angular/core';
import { MARKDOWN_VIEW_REGISTRY, cacheplaneMarkdownViews } from '@threadplane/chat';
import { overrideViews } from '@threadplane/render';
import { MyCodeBlockComponent } from './my-code-block.component';
 
export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: MARKDOWN_VIEW_REGISTRY,
      useValue: overrideViews(cacheplaneMarkdownViews, {
        'code-block': MyCodeBlockComponent,
      }),
    },
  ],
};

overrideViews(base, overrides) replaces every key listed in overrides and preserves all other entries from base. Import it from @threadplane/render (chat does not re-export it).

Per-instance override

Pass a ViewRegistry directly to a single <chat-streaming-md> via its [viewRegistry] input. The component uses the provided value and ignores the DI tree for that instance:

import { Component } from '@angular/core';
import {
  ChatStreamingMdComponent,
  cacheplaneMarkdownViews,
  markdownDocument,
  staticDelivery,
} from '@threadplane/chat';
import { overrideViews } from '@threadplane/render';
import { MyCodeBlockComponent } from './my-code-block.component';
 
@Component({
  selector: 'app-custom-chat',
  standalone: true,
  imports: [ChatStreamingMdComponent],
  template: `
    <chat-streaming-md [document]="document" [viewRegistry]="myRegistry" />
  `,
})
export class CustomChatComponent {
  document = markdownDocument(
    '# Custom renderer\n\nThis document is already complete.',
    staticDelivery('custom-preview'),
  );
  myRegistry = overrideViews(cacheplaneMarkdownViews, {
    'code-block': MyCodeBlockComponent,
  });
}

Node-Type Reference

cacheplaneMarkdownViews covers every node type emitted by @cacheplane/partial-markdown. Use these keys when calling overrideViews or withViews.

Theming Markdown Components

All built-in markdown view components consume the same --tplane-chat-* and --a2ui-* CSS custom properties as the rest of the chat UI. No extra tokens are needed — changing the active theme automatically re-styles markdown output. See the chat theming guide for the full token reference.

Defensive Plain-Text Fallback

marked is a required peer dependency for supported @threadplane/chat installs:

npm install marked

If the dynamic import('marked') still fails at runtime, renderMarkdown() falls back to escaped plain text with line breaks preserved. Treat that fallback as a resilience path, not as the recommended installation mode; the built-in chat experience expects marked to be present for rich markdown.