streamdown

To render streaming Markdown in React without layout shifts, use a component that automatically handles incomplete syntax blocks during AI generation. This prevents visual jumps as partial code or math content streams in real-time.

Yes, this React Markdown renderer supports syntax highlighting via Shiki, interactive Mermaid diagrams, and KaTeX math rendering. It provides a rich plugin ecosystem for displaying complex AI-generated content in chat interfaces.

To secure AI-generated Markdown content against XSS attacks, use a renderer with built-in sanitization. This component includes rehype-sanitize and harden plugins, offering granular control over allowed HTML tags and URL protocols.

Yes, you can use Streamdown to render LaTeX math and CJK text in AI responses. It supports KaTeX math rendering and CJK text formatting, ensuring diverse content types display correctly in your chat interface.

The best way to handle incomplete Markdown blocks during AI generation is using a streaming-optimized renderer. It gracefully processes partial code or math syntax, preventing rendering errors until the AI completes the response.

To integrate a streaming Markdown component, wrap your message content and set the isAnimating prop to true during AI generation. This enables real-time UI updates while the response streams.