React Chat Markdown Content Visualization

Premium

Updated on Feb 10, 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:

1. Install a markdown parsing library

This example uses the marked library:

Note: KendoReact is not affiliated with the marked library. You can use any markdown parsing library that fits your project requirements.

bash

npm install marked

2. Create a function to parse markdown content

tsx

import { setOptions } from 'marked';

const parseMarkdown = (text: string): string => {
  const parser = setOptions({});
  return parser.parse(text || '') as string;
};

3. Use the messageTemplate to render markdown content

tsx

const MessageTemplate = (props: ChatMessageTemplateProps) => {
  const message = props.item as AppMessage;
  const isUser = message.author?.id === user.id;

  if (isUser) {
    return (
      <div className="k-chat-bubble k-bubble">
        <div className="k-bubble-content">
          <span className="k-chat-bubble-text">{message.text}</span>
        </div>
      </div>
    );
  }

  const htmlContent = parseMarkdown(message.text || '');

  return (
    <div className="k-chat-bubble k-bubble">
      <div className="k-bubble-content">
        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
      </div>
    </div>
  );
};

<Chat
  messages={messages}
  authorId={user.id}
  messageTemplate={MessageTemplate}
/>

Suggested Links

• Getting Started with KendoReact Chat
• Chat API Reference
• Getting Started with KendoReact (Online Guide)
• KendoReact Learning Resources
• React Conversational UI Product Page