Handle LLM streamed Markdown output: syntax completion and caching, animation, and tail suffix.

Code Examples

API

streaming

streaming accepts a boolean or an object. A boolean is the preset: true means streaming is in progress — the same as hasNextChunk: true with incremental, incompleteMarkdown: 'complete' and typewriter switched on; false means the stream has ended and the final content is rendered. Pass the isStreaming flag your app already has: <XMarkdown content={content} streaming={isStreaming} />. Pass an object for per-option control; the object form's behaviour and defaults are unchanged.

incremental only splits before a column-0 ATX heading; # lines inside fenced code, HTML blocks (<div>, <pre>, <script>, comments, …) and $$ math are not headings. Splitting is disabled once a link reference or footnote definition appears, or while a custom component tag spans the boundary. Sections render inside the same root element, so the DOM is identical to a whole-document render.

TypewriterConfig

What is shown is always a prefix of content, and a cut never lands inside an emoji (including multi-code-point sequences such as 👨‍👩‍👧‍👦, 🇨🇳, 👍🏽, ❤️) or an accented character; everything is revealed at once when hasNextChunk becomes false.

TailConfig

AnimationConfig

The tail displays ▋ by default. You can customize the character via content, or pass a custom React component via component for animations, delayed display, and other effects.

tsx

// Custom tail component example
const DelayedTail: React.FC<{ content?: string }> = ({ content }) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setVisible(true), 2000);
    return () => clearTimeout(timer);
  }, []);

  if (!visible) return null;
  return <span className="my-tail">{content}</span>;
};

debug

⚠️ debug is for development only. Disable in production to avoid overhead and information leakage.

Supported Incomplete Types

Minimal Setup

<XMarkdown
  content={content}
  streaming={{
    hasNextChunk,
    enableAnimation: true,
    tail: true,
    incompleteMarkdownComponentMap: {
      link: 'link-loading',
      table: 'table-loading',
    },
  }}
  components={{
    'link-loading': LinkSkeleton,
    'table-loading': TableSkeleton,
  }}
/>

Re-rendering of custom components

Every parse hands custom components a fresh domNode, so a plain React.memo never finds its props equal while streaming: a code highlighter re-highlights on every chunk even when what it shows has not changed. Use arePropsEqualIgnoringDomNode as the comparator; it ignores domNode and shallow-compares the remaining props:

import XMarkdown, { arePropsEqualIgnoringDomNode, type ComponentProps } from '@ant-design/x-markdown';

const Code = React.memo(
  (props: ComponentProps) => <CodeHighlighter lang={props.lang}>{String(props.children)}</CodeHighlighter>,
  arePropsEqualIgnoringDomNode,
);
// Kept outside the component: an inline literal is a new object on every render
const components = { code: Code };

<XMarkdown content={content} streaming={isStreaming} components={components} />;

It does not help container components whose children is an array of elements (such as table); those are covered by incremental. Keep components, config, streaming and similar objects outside the component or in useMemo; inline literals rebuild the parser on every render.

FAQ

Can hasNextChunk always be true?

No. Set it to false for the last chunk so placeholders can be flushed into final rendered content. With the boolean form, pass your isStreaming flag straight to streaming and this happens automatically.