XMarkdown streaming syntax

Streaming syntax processing LLM streaming returned Markdown: syntax completion and caching, incremental segmentation, typewriter, fade-in animation, and tail tags. Alignment React @ant-design/x-markdown@2.10.

Examples

Fast

Normal

Slow

No streaming

streaming={isStreaming}

Examples

No streaming on the left; streaming={isStreaming} on the right. A boolean preset enables incremental, incompleteMarkdown: 'complete', and typewriter (without tail).

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownStreamingPresetV2' });

import { computed, onMounted, onUnmounted, ref } from 'vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { Button, Card, Flex, Segmented, theme } from 'ant-design-vue';
import '@ant-design-x-vue/x-markdown/themes/light.css';
import '@ant-design-x-vue/x-markdown/themes/dark.css';

const { token } = theme.useToken();
const isDark = computed(() => {
  const c = token.value.colorBgContainer || '#fff';
  // simple luminance check
  const hex = c.replace('#', '');
  if (hex.length >= 6) {
    const r = parseInt(hex.slice(0, 2), 16);
    const g = parseInt(hex.slice(2, 4), 16);
    const b = parseInt(hex.slice(4, 6), 16);
    return (r * 299 + g * 587 + b * 114) / 1000 < 128;
  }
  return false;
});
const markdownClass = computed(() => (isDark.value ? 'x-markdown-dark' : 'x-markdown-light'));

const section = (i: number) =>
  [
    `## ${i + 1}. Section ${i + 1}`,
    '',
    `This paragraph has **bold text**, *emphasis*, \`inline code\` and a [link](https://x.ant.design).`,
    '',
    '```ts',
    `export function step${i}(a: number, b: number): number {`,
    '  return a * b + 1;',
    '}',
    '```',
    '',
  ].join('\n');

const fullText = `# Streaming preset\n\n${Array.from({ length: 4 }, (_, i) => section(i)).join('')}`;

const PACES = { fast: 40, normal: 120, slow: 280 } as const;
type Pace = keyof typeof PACES;
const pace = ref<Pace>('normal');
const content = ref('');
const isStreaming = ref(false);
let timer = 0;

function startStream() {
  window.clearTimeout(timer);
  content.value = '';
  isStreaming.value = true;
  let index = 0;
  const tick = () => {
    if (index < fullText.length) {
      index = Math.min(fullText.length, index + 24);
      content.value = fullText.slice(0, index);
      timer = window.setTimeout(tick, PACES[pace.value]);
    } else {
      isStreaming.value = false;
    }
  };
  tick();
}

onMounted(startStream);
onUnmounted(() => window.clearTimeout(timer));

const paneStyle = computed(() => ({
  height: '280px',
  overflow: 'auto',
  border: `1px solid ${token.value.colorBorderSecondary}`,
  borderRadius: '8px',
  padding: '12px',
  background: token.value.colorBgContainer,
}));

defineRender(() => (
  <Flex vertical gap={12}>
    <Flex gap={8} align="center" wrap="wrap">
      <Button type="primary" onClick={startStream}>
        Re-run
      </Button>
      <Segmented
        value={pace.value}
        options={[
          { label: 'Fast', value: 'fast' },
          { label: 'Normal', value: 'normal' },
          { label: 'Slow', value: 'slow' },
        ]}
        onChange={(v) => {
          pace.value = v as Pace;
        }}
      />
    </Flex>
    <Flex gap={12} wrap="wrap">
      <Card size="small" title="No streaming" style={{ flex: 1, minWidth: '280px' }}>
        <div style={paneStyle.value}>
          <XMarkdown className={markdownClass.value} content={content.value} />
        </div>
      </Card>
      <Card size="small" title="streaming={isStreaming}" style={{ flex: 1, minWidth: '280px' }}>
        <div style={paneStyle.value}>
          <XMarkdown
            className={markdownClass.value}
            content={content.value}
            streaming={isStreaming.value}
          />
        </div>
      </Card>
    </Flex>
  </Flex>
));
</script>

Hide source

Mixed

Link

Image

Html

Table

Emphasis

InlineCode

Markdown Source

Click Re-Render to start

Rendered Output

Switch Mixed / Link / Image / Html / Table / Emphasis / InlineCode above. The left side types the source; the right side renders it. Incomplete links show a 16px placeholder instead of raw [text](url. Re-Render / Run Stream types from the start with fade-in.

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownStreamingSyntaxV2' });

import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { XMarkdown, type ComponentProps } from '@ant-design-x-vue/x-markdown';
import { Welcome } from 'ant-design-x-vue';
import { Button, Card, Flex, Segmented, Skeleton, theme } from 'ant-design-vue';
import '@ant-design-x-vue/x-markdown/themes/light.css';
import '@ant-design-x-vue/x-markdown/themes/dark.css';
import { isDarkColor } from '../_shared/playground-shell';
import {
  incompleteEmphasisParts,
  streamingFormatDemos,
} from '../_shared/streaming-format';

const { token } = theme.useToken();
const markdownClass = computed(() => (
  isDarkColor(token.value.colorBgContainer) ? 'x-markdown-dark' : 'x-markdown-light'
));

const current = ref(0);
const displayText = ref('');
const isStreaming = ref(false);
let timer = 0;

function startStream() {
  window.clearTimeout(timer);
  const content = streamingFormatDemos[current.value].content;
  displayText.value = '';
  isStreaming.value = true;
  let index = 0;
  const tick = () => {
    if (index <= content.length) {
      displayText.value = content.slice(0, index);
      index += 1;
      timer = window.setTimeout(tick, 30);
    }
    else {
      isStreaming.value = false;
    }
  };
  tick();
}

onMounted(startStream);
watch(current, () => startStream());
onUnmounted(() => window.clearTimeout(timer));

const IncompleteLink = (_props: ComponentProps) => (
  <Skeleton.Button active size="small" style={{ width: '16px', height: '16px', minWidth: '16px' }} />
);

const IncompleteEmphasis = (props: ComponentProps) => {
  const parts = incompleteEmphasisParts(String(props['data-raw'] || ''));
  if (!parts)
    return null;
  if (parts.level === 1)
    return <em>{parts.content}</em>;
  if (parts.level === 2)
    return <strong>{parts.content}</strong>;
  return <em><strong>{parts.content}</strong></em>;
};

const ImageSkeleton = () => <Skeleton.Image active style={{ width: '60px', height: '60px' }} />;
const TableSkeleton = () => <Skeleton.Button active style={{ width: '160px', height: '22px' }} />;
const HtmlSkeleton = () => <Skeleton.Button active style={{ width: '383px', height: '120px' }} />;

const WelcomeCard = (props: Record<string, any>) => (
  <Welcome
    styles={{ icon: { flexShrink: 0 } }}
    icon={props['data-icon']}
    title={props.title}
    description={props['data-description']}
  />
);

const sourceStyle = computed(() => ({
  background: token.value.colorFillQuaternary,
  color: token.value.colorText,
  padding: '12px',
  borderRadius: '4px',
  fontSize: '13px',
  fontFamily: 'monospace',
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-word',
  margin: 0,
  maxHeight: '800px',
  overflow: 'auto',
}));

defineRender(() => (
  <div>
    <Flex gap={8} align="center" wrap="wrap" style={{ marginBottom: '12px' }}>
      <Segmented
        value={current.value}
        options={streamingFormatDemos.map((demo, index) => ({ label: demo.title, value: index }))}
        onChange={(value: string | number) => { current.value = Number(value); }}
      />
      <Button style={{ alignSelf: 'flex-start' }} onClick={startStream} loading={isStreaming.value}>
        Run Stream
      </Button>
    </Flex>
    <Flex gap={16} style={{ width: '100%' }}>
      <Card title="Markdown Source" size="small" style={{ flex: 1, minWidth: 0 }}>
        <div style={sourceStyle.value}>
          {displayText.value || 'Click Re-Render to start'}
        </div>
      </Card>
      <Card
        title="Rendered Output"
        size="small"
        style={{ flex: 1, minWidth: 0, overflow: 'auto' }}
        extra={(
          <Button type="primary" onClick={startStream} loading={isStreaming.value}>
            Re-Render
          </Button>
        )}
      >
        <div style={{ border: `1px solid ${token.value.colorBorderSecondary}`, borderRadius: '4px', padding: '12px', maxHeight: '800px', overflow: 'auto' }}>
          <XMarkdown
            content={displayText.value}
            className={markdownClass.value}
            openLinksInNewTab
            dompurifyConfig={{ ADD_ATTR: ['icon', 'description'] }}
            components={{
              'incomplete-image': ImageSkeleton,
              'incomplete-link': IncompleteLink,
              'incomplete-table': TableSkeleton,
              'incomplete-html': HtmlSkeleton,
              'incomplete-emphasis': IncompleteEmphasis,
              welcome: WelcomeCard,
            }}
            streaming={{
              hasNextChunk: isStreaming.value,
              enableAnimation: true,
            }}
          />
          {isStreaming.value ? <span aria-hidden="true">▋</span> : null}
        </div>
      </Card>
    </Flex>
  </div>
));
</script>

Hide source

You can also pass boolean streaming and watch fade-in with typewriter output.

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownAnimationV2' });

import { onMounted, ref } from 'vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import '@ant-design-x-vue/x-markdown/themes/light.css';

const full = `# 流式动画

这一段会**淡入**。

- 第一行
- 第二行
`;

const content = ref('');

onMounted(() => {
  let i = 0;
  const timer = setInterval(() => {
    i += 2;
    content.value = full.slice(0, i);
    if (i >= full.length) clearInterval(timer);
  }, 40);
});

defineRender(() => (
  <XMarkdown
    className="x-markdown-light"
    content={content.value}
    streaming={{
      hasNextChunk: content.value.length < full.length,
      enableAnimation: true,
      animationConfig: { fadeDuration: 200, easing: 'ease-in-out' },
    }}
  />
));
</script>

Hide source

API

streaming

streaming accepts boolean values ​​or objects. Passing a Boolean value is the default: true means that streaming is in progress, which is equivalent to hasNextChunk: true and turning on incremental, incompleteMarkdown: 'complete', and typewriter; false means that the stream has ended and the final content will be rendered. Just pass the existing isStreaming in the application directly: <XMarkdown :content="content" :streaming="isStreaming" />. Passing objects is controlled item by item.

Argument	Description	Type	Default
hasNextChunk	Is there any data behind? Refresh the cache and complete rendering when false	boolean	false
incremental	Cut into segments by title, and each chunk only re-parses and renders the last segment that is growing. The passed object can set minSectionChars (sections shorter than this length are merged into the next section) and keepSectionsOnEnd (default true: each section remains unchanged after the end of the stream; false: when the stream ends, the whole article returns to one-time rendering)	boolean | { minSectionChars?: number; keepSectionsOnEnd?: boolean }	false
incompleteMarkdown	How to display unfinished grammar: placeholder holds or displays the placeholder component; complete displays the half-written emphasis, inline code, link text, and list items as complete text immediately	'placeholder' | 'complete'	'placeholder'
incompleteMarkdownComponentMap	Component mapping of incomplete grammar; after explicit configuration of a certain grammar, the placeholder component shall prevail	Partial\<Record\<Exclude\<StreamCacheTokenType, 'text'\>, string\>\>	{}
typewriter	Typewriter effect: Newly arrived content is released at a constant speed according to chunk rhythm, rather than appearing in whole blocks	boolean | TypewriterConfig	false
enableAnimation	Enable text fade-in animation	boolean	false
animationConfig	Text animation configuration	AnimationConfig	{ fadeDuration: 200, easing: 'ease-in-out' }
tail	Whether to enable tail indicators; 'true' uses the default '▋', object transfer can be customized	boolean | TailConfig	false

'incremental' is only split before the top-level ATX title; Fenced code, HTML blocks, and '#' lines in the '$$' formula are not counted as titles. If a link reference definition, footnote definition, or custom component tag crosses the cutoff point in the document, do not split.

TypewriterConfig

Prop	Description	Type	Default
unit	Release units. 'char' Word by word; 'sentence' Collect separators and release them together	'char' | 'sentence'	'char'
delimiters	Sentence Separator	string[]	['。 ', '！ ', '？ ', '.', '!', '?', '\n']
minCps	Minimum speed (words/second)	number	24
maxCps	Top speed (words/second)	number	3000
pauseMs	Pause after playing the separator when 'unit' is 'char' (in milliseconds)	number	0
maxSentenceChars	'unit' is the longest word count for 'sentence'; if exceeded, it is reverted and displayed word by word	number	120

TailConfig

Prop	Description	Type	Default
content	Contents displayed at the end	string	'▋'
component	Custom tail components, prioritizing over content	Component	-

AnimationConfig

Prop	Description	Type	Default
fadeDuration	Fade-in duration (milliseconds)	number	200
easing	easing function	string	'ease-in-out'
splitBy	Fade into the unit. 'chunk' Fade in each new text separately; 'sentence' Merge into the current sentence	'chunk' | 'sentence'	'chunk'
delimiters	The delimiter when splitBy is sentence	string[]	['. ', '! ', '? ', '.', '!', '?', '\n']
maxSentenceChars	The maximum number of characters in a fade-in unit when splitBy is sentence	number	120

debug

Prop	Description	Type	Default
debug	Enable the FPS / memory performance overlay, including recording and a performance chart	boolean	false

debug is for development only. Disable it in production to avoid extra overhead and information exposure.

Custom component caching

arePropsEqualIgnoringDomNode is exported in parity with React 2.10. It ignores the domNode reference that changes on every parse and shallow-compares the remaining props. Vue has no public React.memo render-bailout equivalent, so use it in your own cache or third-party rendering adapter; prefer incremental to reduce repeated parsing while streaming.

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

const unchanged = arePropsEqualIgnoringDomNode(previousProps, nextProps);

Incomplete syntax conversion

When hasNextChunk is true and incompleteMarkdown is placeholder (default), the unfinished syntax token will be converted into incomplete-<token> form, and the original text is returned through data-raw (encodeURIComponent). When incompleteMarkdown: 'complete' is set, the emphasis / inline code / link text / list item will be displayed immediately as completed text as much as possible; pictures, HTML, and tables will still use placeholder logic.

You can use incompleteMarkdownComponentMap to replace the default label name with a custom name (for example, link: 'link-loading'), and then register the corresponding component in components. Explicitly configured mappings take precedence over complete mode.

StreamCacheTokenType

Consistent with React @ant-design/x-markdown@2.10 source code enumeration:

type StreamCacheTokenType =
  | 'text' // 纯文本（不生成占位标签）
  | 'link' // 链接 [text](url)
  | 'image' // 图片 ![alt](src)
  | 'html' // HTML / 自定义标签 <tag>
  | 'emphasis' // 强调 *斜体* **粗体**
  | 'list' // 列表 - + *
  | 'table' // 表格 | header | content |
  | 'inline-code'; // 行内代码 `code`

Supported syntax types

Syntax type	Format example	Processing mechanism	Unfinished example	TokenType
Link	[text](url)	Detect unclosed link tags	[Example](https://example	link
Image		Detect unclosed image tags	![Product](https://cdn.example.com/images/produc	image
HTML	<tag\>	Processing HTML / custom tag closing state	<div class="	html
Emphasis	*italic* **bold**	Processing * / _ emphasized unclosed	**Unfinished bold	emphasis
List	- + *	Detect spaces after list tags	-	list
Table	GFM Table	Detect unclosed table rows/cells	| Header1 | Header2 |	table
Inline code	`code`	Detect unclosed inline code	`partial	inline-code

Minimal configuration

<script setup lang="ts">
import { XMarkdown } from '@ant-design-x-vue/x-markdown';

const content = '...';
const isStreaming = true;
</script>

<template>
  <!-- 布尔预设：incremental + incompleteMarkdown:complete + typewriter -->
  <XMarkdown :content="content" :streaming="isStreaming" />

  <!-- 或对象形式细调 -->
  <XMarkdown
    :content="content"
    :streaming="{
      hasNextChunk: isStreaming,
      enableAnimation: true,
      tail: true,
      incompleteMarkdown: 'complete',
    }"
  />
</template>

FAQ

Why streaming syntax handling is needed

When streaming, Markdown may stop halfway, for example:

[Example Website](https://example
![Product Image](https://cdn.example.com/images/produc

Incomplete structures may cause links not to jump, images fail to load, or formatting tags to display directly in the text.

Why hasNextChunk should not stay true forever

hasNextChunk should not always be true, otherwise:

1. Syntax keeps pending: unclosed links, images, etc., will remain in a loading/placeholder state
2. Experience worsens: users only see continuous loading and cannot get the complete content
3. State accumulation: cache and placeholder states cannot be properly finalized and cleaned up

With boolean preset, switch streaming from true to false to end the stream and render based on the final content (keepSectionsOnEnd defaults to keeping already segmented sections to avoid remounting custom components already mounted).