New to Kendo UI for Angular? Start a free 30-day trial

Angular Chat Markdown Content Visualization

Updated on Feb 6, 2026

Display formatted markdown content directly in Chat messages. Users can view tables, code snippets, and other formatted text as part of the conversation flow, making technical discussions more accessible and engaging.

Change Theme

Theme

Loading ...

Setup

To display markdown content inside the Chat messages interface, follow these steps:

Install a markdown parsing library in your project. This example uses the marked library:

Kendo UI for Angular is not affiliated with the marked library. You can use any markdown parsing library that fits your project requirements.
bash
```
npm install marked
```

Create a method to parse markdown content into safe HTML:

public parseMarkdown(text: string): SafeHtml {
  const parser = setOptions({});
  const parsedMessage = parser.parse(text || '') as string;
  return this.sanitizer.bypassSecurityTrustHtml(parsedMessage);
}

Use the kendoChatMessageTemplate to render markdown content in messages:

HTML

<kendo-chat [messages]="messages" [authorId]="user.id">
  <ng-template kendoChatMessageTemplate let-message>
    <div class="k-chat-bubble k-bubble">
      <div class="k-bubble-content">
        @if (message.author.id === user.id) {
          <span class="k-chat-bubble-text">{{ message.text }}</span>
        } @else {
          <div [innerHTML]="parseMarkdown(message.text)"></div>
        }
      </div>
    </div>
  </ng-template>
</kendo-chat>

Angular Chat Markdown Content Visualization

Setup

Suggested Links