N8N Chat UI
Docs
Configuration
Render Markdown & HTML in Responses

Render Markdown & HTML in Responses

Display rich Markdown and HTML in n8n chat responses, including tables, images, buttons, and code blocks, with examples for the N8N Chat UI widget.

The N8N Chat UI widget supports not only plain text, but also Markdown and HTML in bot responses. This allows you to create rich, interactive messages, cards, code snippets, and more—whether your responses come from a custom backend or directly from n8n.

Markdown is Supported by Default

  • The widget renders Markdown out of the box—no configuration needed.
  • HTML rendering must be enabled in the widget settings (see below).
  • Formatting is only applied to bot responses. User messages are always displayed as plain text, regardless of any Markdown or HTML included.

Enabling HTML Rendering

To display HTML content in your chat widget, you must enable the Render HTML switch:

  • Go to the Window section of the widget customization panel.
  • Find the Render HTML in Bot Responses option and turn it on.
The Render HTML in Bot Responses toggle in the widget settings

Note: If this switch is off, any HTML in your response will be shown as plain text.

Supported Content Types

You can render plain text, Markdown, HTML, or even a mix of Markdown and HTML in your responses.

Plain Text

{
  "output": "Hello world"
}
Chat widget showing a plain text bot reply that says Hello world

Markdown

{
  "output": "# Heading 1\n\n**Bold text**\n\n*Italic text*\n\n- List item 1\n- List item 2\n\n[Link to Google](https://www.google.com)\n\n```js\nfunction hello() {\n  console.log(\"Hello, world!\");\n}\n```"
}
Chat widget showing a Markdown bot reply with a heading, bold and italic text, a list, a link and a code block

HTML

{
  "output": "<div style=\"width:250px;border-radius:8px;overflow:hidden;font-family:Arial,sans-serif;background-color:orange;\"><a href=\"https://google.com\" target=\"_blank\"><img src=\"https://randomuser.me/api/portraits/men/9.jpg\" alt=\"Item Image\" style=\"width:100%;height:auto;\"></a><div style=\"padding:10px;\"><h3 style=\"margin:0 0 8px;color:#2c2c2c;\">Hi, I'm Jake</h3></div></div>"
}
Chat widget showing an HTML bot reply rendered as a styled card with a photo and a name

Mix of markdown + HTML

{
  "output": "**Bold** and <i>italic (HTML)</i> and _italic (Markdown)_"
}
Chat widget showing a bot reply that mixes HTML and Markdown formatting

Summary

  • Markdown is rendered by default. No additional configuration is needed.
  • HTML requires enabling the Render HTML in Bot Responses switch in the Window section of the widget customization panel.
  • You can combine Markdown and HTML in the same response to enable advanced formatting and create a more engaging user experience.
  • For integration with custom APIs, see our custom API webhook guide.
RTL Layout SupportSend Custom Metadata from Chat Widget to n8n