| name | x-markdown |
| version | 2.8.1 |
| description | Use when building or reviewing Markdown rendering with @ant-design/x-markdown, including streaming Markdown, custom component mapping, plugins, themes, and chat-oriented rich content. |
🎯 Skill Positioning
This skill focuses on one job: render Markdown correctly and predictably with @ant-design/x-markdown.
It covers:
- Basic rendering and package boundaries
- LLM streaming output and incomplete syntax handling
- Custom component mapping for rich chat or data-display blocks
- Plugins, themes, and safe rendering defaults
Table of Contents
📦 Package Boundaries
| Layer | Package | Responsibility |
|---|
| UI layer | @ant-design/x | Chat UI, bubble lists, sender, rich interaction components |
| Data layer | @ant-design/x-sdk | Providers, requests, streaming data flow, state management |
| Render layer | @ant-design/x-markdown | Markdown parsing, streaming rendering, plugins, themes, custom renderers |
⚠️ x-markdown is not a chat-state tool. Use it to render content after @ant-design/x and @ant-design/x-sdk have already produced the message data.
🚀 Quick Start Decision Guide
| If you need to... | Read first | Typical outcome |
|---|
| Render Markdown with the smallest setup | CORE.md | XMarkdown renders trusted content with basic styling |
| Render LLM streaming chunks | STREAMING.md | Correct hasNextChunk, placeholders, tail indicator, loading states |
| Replace tags with business components | EXTENSIONS.md | Stable components map for custom tags and code blocks |
| Add plugins or theme overrides | EXTENSIONS.md | Plugin imports, theme class wiring, minimal CSS overrides |
| Check prop details and defaults | API.md | Full prop table for XMarkdown and streaming options |
🛠 Recommended Workflow
- Start with CORE.md and get a plain render working first.
- Add STREAMING.md only when the content arrives chunk-by-chunk.
- Add EXTENSIONS.md when you need custom tags, plugins, syntax blocks, or themes.
- Use API.md to confirm prop names and defaults instead of guessing.
Minimal Setup Reminder
import { XMarkdown } from '@ant-design/x-markdown';
export default () => <XMarkdown content="# Hello" />;
🚨 Development Rules
- Prefer a stable
components object. Do not create new inline component mappings on every render.
- Use
streaming.hasNextChunk = false on the final chunk, otherwise incomplete placeholders will not flush into final content.
- Treat raw HTML carefully. Prefer
escapeRawHtml when raw HTML should stay visible as text.
- If raw HTML must be rendered, keep
dompurifyConfig explicit and minimal.
- Keep theme overrides small. Start from
x-markdown-light or x-markdown-dark and override only the variables you need.
- If a custom component depends on complete syntax, branch on
streamStatus === 'done'.
🤝 Skill Collaboration
| Scenario | Recommended skill combination | Why |
|---|
| Rich assistant replies in chat | x-chat-provider → x-request → use-x-chat → x-markdown | Provider and request handle data flow, x-markdown handles final rendering |
| Built-in provider with Markdown replies | x-request → use-x-chat → x-markdown | Keep request config and rendering concerns separate |
| Standalone Markdown page or docs viewer | x-markdown only | No chat data flow needed |
Boundary Rules
- Use
x-chat-provider when adapting an API shape.
- Use
x-request when configuring transport, auth, retries, or streaming separators.
- Use
use-x-chat when managing chat state in React.
- Use
x-markdown when the content itself needs Markdown parsing, streaming recovery, or rich component rendering.
🔗 Reference Resources
- CORE.md - Package boundaries, install/setup, safe defaults, common render patterns
- STREAMING.md - Chunked rendering, incomplete syntax recovery, loading vs done behavior
- EXTENSIONS.md - Components, plugins, themes, custom tag guidance
- API.md - Generated API reference from the official
x-markdown docs
Official Docs
