N8N Chat UI
Docs
Render Markdown & HTML in Responses

Render Markdown & HTML in Responses

Learn how to display Markdown and HTML in your chat widget, with examples and configuration tips.

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 API webhook 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.

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"
}

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```"
}

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>"
}

Mix of markdown + HTML

{
  "output": "**Bold** and <i>italic (HTML)</i> and _italic (Markdown)_"
}

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.
Chat Widget ControlsFile Uploads