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

Code Examples

API

streaming

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,
  }}
/>

FAQ

Can hasNextChunk always be true?

No. Set it to false for the last chunk so placeholders can be flushed into final rendered content.