Streaming Rendering

Introduction

Optimize streaming Markdown rendering in LLM scenarios by caching to hide markdown formatting and animation effects.

Code Demos

Configuration

streaming

Parameter	Description	Type	Default
hasNextChunk	Whether there is more streaming data	`boolean`	`false`
enableAnimation	Enable text fade-in animation	`boolean`	`false`
animationConfig	Text animation configuration	`ControllerUpdate`	`{ from: { opacity: 0 }, to: { opacity: 1 }, config: { tension: 170, friction: 26 } }`

Usage Example

tsx

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

const App = () => {
  return (
    <XMarkdown
      content="# Hello World\n\nThis is a streaming rendering example."
      streaming={{
        hasNextChunk: true,
        enableAnimation: true,
        animationConfig: {
          from: { opacity: 0 },
          to: { opacity: 1 },
        },
      }}
    />
  );
};

Ant Design X

Streaming Rendering

Ant Design X

Streaming Rendering

Introduction

Code Demos

Configuration

streaming

Usage Example

Introduction

Code Demos

Configuration

streaming

Usage Example