Ant Design X

Code Examples

Ant Design X

Code Examples

When To Use

Used for rendering streaming Markdown format returned by LLMs.

Code Demos

API

Property	Description	Type	Default
content	Markdown content to be rendered	`string`	-
children	Markdown content, alias for `content` property	`string`	-
components	Custom React components to replace HTML elements	`Record<string, React.ComponentType<ComponentProps> \| keyof JSX.IntrinsicElements>`, see details	-
paragraphTag	Custom HTML tag for paragraph elements. Prevents validation errors when custom components contain block-level elements	`keyof JSX.IntrinsicElements`	`'p'`
streaming	Configuration for streaming rendering behavior	`SteamingOption`, see details	-
config	Marked.js configuration for Markdown parsing and extensions	`MarkedExtension`	`{ gfm: true }`
openLinksInNewTab	Whether to add `target="_blank"` to all anchor tags	`boolean`	`false`
dompurifyConfig	DOMPurify configuration for HTML sanitization and XSS protection	`DOMPurify.Config`	-
className	Additional CSS class name for the root container	`string`	-
rootClassName	Alias for `className`, additional CSS class for the root element	`string`	-
style	Inline styles for the root container	`CSSProperties`	-

SteamingOption

Property	Description	Type	Default
hasNextChunk	Indicates whether more content chunks are expected. When false, flushes all cached content and completes rendering	`boolean`	`false`
enableAnimation	Enables text fade-in animation for block elements (`p`, `li`, `h1`, `h2`, `h3`, `h4`)	`boolean`	`false`
animationConfig	Configuration for text appearance animation effects	`AnimationConfig`	`{ fadeDuration: 200, easing: 'ease-in-out' }`
incompletePlaceholderMap	Placeholder mapping for unclosed Markdown elements, supports custom placeholder components for links and images	`{ link?: string; image?: string }`	`{ link: 'incomplete-link', image: 'incomplete-image' }`

AnimationConfig

Property	Description	Type	Default
fadeDuration	Duration of the fade-in animation in milliseconds	`number`	`200`
easing	Easing function for the animation	`string`	`'ease-in-out'`

ComponentProps

Property	Description	Type	Default
domNode	Component Element from html-react-parser, contains the parsed DOM node information	`DOMNode`	-
streamStatus	Streaming status, `loading` indicates streaming in progress, `done` indicates streaming complete	`'loading' \| 'done'`	-
rest	Component properties, supports all standard HTML attributes (e.g. `href`, `title`, `className`, etc.) and custom data attributes	`Record<string, any>`	-

FAQ

Difference Between Components and Config Marked Extensions

Config Marked Extensions (Plugin Extensions)

The extensions in the config property are used to extend the functionality of the Markdown parser, acting during the Markdown to HTML conversion process:

Stage: Markdown parsing stage
Function: Recognize and convert special Markdown syntax
Example: Convert [^1] footnote syntax to <footnote>1</footnote> HTML tags
Use Case: Extend Markdown syntax to support more markup formats

typescript

// Plugin example: Footnote extension
const footnoteExtension = {
  name: 'footnote',
  level: 'inline',
  start(src) { return src.match(/\[\^/)?.index; },
  tokenizer(src) {
    const rule = /^\[\^([^\]]+)\]/;
    const match = rule.exec(src);
    if (match) {
      return {
        type: 'footnote',
        raw: match[0],
        text: match[1]
      };
    }
  },
  renderer(token) {
    return `<footnote>${token.text}</footnote>`;
  }
};

// Using the plugin
<XMarkdown
  content="This is a footnote example[^1]"
  config={{ extensions: [footnoteExtension] }}
/>

Components (Component Replacement)

The components property is used to replace generated HTML tags with custom React components:

Stage: HTML rendering stage
Function: Replace HTML tags with React components
Example: Replace <footnote>1</footnote> with <CustomFootnote>1</CustomFootnote>
Use Case: Customize tag rendering styles and interactive behavior

typescript

// Custom footnote component
const CustomFootnote = ({ children, ...props }) => (
  <sup
    className="footnote-ref"
    onClick={() => console.log('Clicked footnote:', children)}
    style={{ color: 'blue', cursor: 'pointer' }}
  >
    {children}
  </sup>
);

// Using component replacement
<XMarkdown
  content="<footnote>1</footnote>"
  components={{ footnote: CustomFootnote }}
/>

When To Use

Used for rendering streaming Markdown format returned by LLMs.

Code Demos

API

Property	Description	Type	Default
content	Markdown content to be rendered	`string`	-
children	Markdown content, alias for `content` property	`string`	-
components	Custom React components to replace HTML elements	`Record<string, React.ComponentType<ComponentProps> \| keyof JSX.IntrinsicElements>`, see details	-
paragraphTag	Custom HTML tag for paragraph elements. Prevents validation errors when custom components contain block-level elements	`keyof JSX.IntrinsicElements`	`'p'`
streaming	Configuration for streaming rendering behavior	`SteamingOption`, see details	-
config	Marked.js configuration for Markdown parsing and extensions	`MarkedExtension`	`{ gfm: true }`
openLinksInNewTab	Whether to add `target="_blank"` to all anchor tags	`boolean`	`false`
dompurifyConfig	DOMPurify configuration for HTML sanitization and XSS protection	`DOMPurify.Config`	-
className	Additional CSS class name for the root container	`string`	-
rootClassName	Alias for `className`, additional CSS class for the root element	`string`	-
style	Inline styles for the root container	`CSSProperties`	-

SteamingOption

Property	Description	Type	Default
hasNextChunk	Indicates whether more content chunks are expected. When false, flushes all cached content and completes rendering	`boolean`	`false`
enableAnimation	Enables text fade-in animation for block elements (`p`, `li`, `h1`, `h2`, `h3`, `h4`)	`boolean`	`false`
animationConfig	Configuration for text appearance animation effects	`AnimationConfig`	`{ fadeDuration: 200, easing: 'ease-in-out' }`
incompletePlaceholderMap	Placeholder mapping for unclosed Markdown elements, supports custom placeholder components for links and images	`{ link?: string; image?: string }`	`{ link: 'incomplete-link', image: 'incomplete-image' }`

AnimationConfig

Property	Description	Type	Default
fadeDuration	Duration of the fade-in animation in milliseconds	`number`	`200`
easing	Easing function for the animation	`string`	`'ease-in-out'`

ComponentProps

Property	Description	Type	Default
domNode	Component Element from html-react-parser, contains the parsed DOM node information	`DOMNode`	-
streamStatus	Streaming status, `loading` indicates streaming in progress, `done` indicates streaming complete	`'loading' \| 'done'`	-
rest	Component properties, supports all standard HTML attributes (e.g. `href`, `title`, `className`, etc.) and custom data attributes	`Record<string, any>`	-

FAQ

Difference Between Components and Config Marked Extensions

Config Marked Extensions (Plugin Extensions)

The extensions in the config property are used to extend the functionality of the Markdown parser, acting during the Markdown to HTML conversion process:

Stage: Markdown parsing stage
Function: Recognize and convert special Markdown syntax
Example: Convert [^1] footnote syntax to <footnote>1</footnote> HTML tags
Use Case: Extend Markdown syntax to support more markup formats

typescript

// Plugin example: Footnote extension
const footnoteExtension = {
  name: 'footnote',
  level: 'inline',
  start(src) { return src.match(/\[\^/)?.index; },
  tokenizer(src) {
    const rule = /^\[\^([^\]]+)\]/;
    const match = rule.exec(src);
    if (match) {
      return {
        type: 'footnote',
        raw: match[0],
        text: match[1]
      };
    }
  },
  renderer(token) {
    return `<footnote>${token.text}</footnote>`;
  }
};

// Using the plugin
<XMarkdown
  content="This is a footnote example[^1]"
  config={{ extensions: [footnoteExtension] }}
/>

Components (Component Replacement)

The components property is used to replace generated HTML tags with custom React components:

Stage: HTML rendering stage
Function: Replace HTML tags with React components
Example: Replace <footnote>1</footnote> with <CustomFootnote>1</CustomFootnote>
Use Case: Customize tag rendering styles and interactive behavior

typescript

// Custom footnote component
const CustomFootnote = ({ children, ...props }) => (
  <sup
    className="footnote-ref"
    onClick={() => console.log('Clicked footnote:', children)}
    style={{ color: 'blue', cursor: 'pointer' }}
  >
    {children}
  </sup>
);

// Using component replacement
<XMarkdown
  content="<footnote>1</footnote>"
  components={{ footnote: CustomFootnote }}
/>