x-markdown

Original：🇨🇳 Chinese

Translated

Use this when tasks involve Markdown rendering, streaming output, custom component mapping, plugins, themes, or rich chat content display with @ant-design/x-markdown.

3installs

Sourceant-design/x

Added on2026-06-03

NPX Install

npx skill4agent add ant-design/x x-markdown

SKILL.md Content (Chinese)

View Translation Comparison →

🎯 Skill Positioning

This skill focuses on solving one problem: How to correctly and stably render Markdown content using

@ant-design/x-markdown

.

Coverage includes:

Basic rendering and package responsibility boundaries
LLM streaming output and incomplete syntax handling
Custom component mapping and rich chat content rendering
Plugins, themes, and secure default configurations

📦 Package Responsibility Boundaries

Layer	Package Name	Responsibility
UI Layer	`@ant-design/x`	Chat UI, Bubble, Sender, interactive components
Data Layer	`@ant-design/x-sdk`	Provider, requests, streaming data flow, state management
Rendering Layer	`@ant-design/x-markdown`	Markdown parsing, streaming rendering, plugins, themes, custom rendering

⚠️
x-markdown
is not a chat state management tool. It is responsible for rendering existing message content, not for requests or the message flow itself.

🚀 Quick Decision Guide

When you need to...	Priority Reading	Typical Outcome
Render Markdown with minimal configuration	CORE.md	Render basic content with `XMarkdown`
Render LLM streaming output	STREAMING.md	Correctly handle `hasNextChunk` , placeholders, and tail indicators
Map tags to business components	EXTENSIONS.md	Establish stable mappings for custom tags, code blocks, and rich content components
Add plugins or customize themes	EXTENSIONS.md	Complete plugin import, theme class name integration, and minimal CSS overrides
View property details and default values	API.md	Get the complete property table for `XMarkdown` and streaming

🛠 Recommended Workflow

First read CORE.md to get basic rendering working.
Only proceed to STREAMING.md if content arrives in chunks.
Only proceed to EXTENSIONS.md if you need custom tags, plugins, or themes.
Rely on API.md for property names and default values; don't guess from memory.

Minimal Usage Example

tsx

import { XMarkdown } from '@ant-design/x-markdown';

export default () => <XMarkdown content="# Hello" />;

🚨 Development Rules

Keep
```
components
```
mappings as stable as possible; do not create new inline component objects on each render.
The last chunk must set
```
streaming.hasNextChunk = false
```
, otherwise incomplete placeholder content will not be refreshed to the final result.
Handle raw HTML carefully. If you only want to retain text display, prioritize using
```
escapeRawHtml
```
.
If you must render HTML, explicitly review
```
dompurifyConfig
```
; do not rely on vague default behavior.
Minimize theme overrides. Inherit
```
x-markdown-light
```
or
```
x-markdown-dark
```
first, and only modify necessary variables.
If custom components depend on complete syntax, execute expensive logic only when
```
streamStatus === 'done'
```
.

🤝 Skill Collaboration

Scenario	Recommended Skill Combination	Reason
Rich text responses in chat	`x-chat-provider` → `x-request` → `use-x-chat` → `x-markdown`	The first three are responsible for data flow, `x-markdown` is responsible for final content rendering
Built-in Provider + Markdown responses	`x-request` → `use-x-chat` → `x-markdown`	Separation of request configuration and rendering responsibilities
Independent Markdown pages or document views	`x-markdown`	No chat state management required

Boundary Rules

To adapt interface formats, use x-chat-provider
To configure transmission, authentication, retries, and stream separation, use x-request
To manage React chat state, use use-x-chat
To handle Markdown parsing, streaming recovery, and rich component rendering, use x-markdown

🔗 Reference Resources

CORE.md - Package responsibilities, installation and getting started, secure defaults, common rendering modes
STREAMING.md - Chunked rendering, incomplete syntax recovery, loading/done behavior
EXTENSIONS.md - Component mapping, plugins, themes, custom tag recommendations
API.md - API reference generated from official
```
x-markdown
```
documentation