# What Types of Rich Content Can Dify Chat Render Beyond Markdown?

> Discover the rich content Dify Chat renders beyond Markdown: images, videos, code, diagrams, charts, SVG, LaTeX, forms, buttons, and more for enhanced user experiences.

- Repository: [lexmin0412/dify-chat](https://github.com/lexmin0412/dify-chat)
- Tags: deep-dive
- Published: 2026-03-06

---

**Dify Chat renders images, videos, syntax-highlighted code, Mermaid diagrams, ECharts visualizations, SVG graphics, LaTeX equations, interactive forms, action buttons, and collapsible think blocks through its MarkdownRenderer component.**

The `lexmin0412/dify-chat` repository extends standard markdown with a sophisticated rendering pipeline that transforms specific HTML tags and code fences into interactive React components. Understanding what types of rich content Dify Chat can render helps developers leverage the full capabilities of this AI chat interface.

## Rich Media Support: Images and Videos

### Zoomable Image Previews

Dify Chat replaces standard markdown images with an interactive zoom experience. The **ImageBlock** component in [`packages/react-app/src/components/markdown-renderer/blocks/image.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/blocks/image.tsx) integrates `react-photo-view` to enable pinch-to-zoom and pan functionality. Users can click any image to expand it into a full-screen lightbox without leaving the conversation context.

### Native Video Playback

Video content renders through the **VideoBlock** component located at [`packages/react-app/src/components/markdown-renderer/blocks/video.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/blocks/video.tsx). This component outputs a standard HTML5 `<video>` element with native browser controls, supporting MP4, WebM, and other standard formats directly within chat messages.

## Code and Visualization Rendering

### Syntax-Highlighted Code Blocks

Code fences receive automatic syntax highlighting via **react-syntax-highlighter** with support for light and dark themes. The **CodeBlock** component inside [`packages/react-app/src/components/markdown-renderer/index.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/index.tsx) parses language identifiers (e.g., ```python, ```javascript) and applies appropriate highlighting rules.

### Mermaid Diagrams and Flowcharts

Dify Chat compiles Mermaid syntax into interactive SVG diagrams. The **Flowchart** component in [`packages/react-app/src/components/markdown-renderer/blocks/mermaid.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/blocks/mermaid.tsx) processes Mermaid code blocks and renders them as scalable vector graphics. Users can toggle between classic and hand-drawn sketch styles for visual variety.

### ECharts Data Visualizations

JSON chart configurations render as interactive data visualizations using **echarts-for-react**. When the **CodeBlock** detects `language-echarts` in [`packages/react-app/src/components/markdown-renderer/index.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/index.tsx), it parses the JSON and instantiates the corresponding ECharts instance with full interactivity including tooltips and zooming.

### Raw SVG Graphics

Sanitized SVG strings display via **@svgdotjs/svg.js** through the **SVGRenderer** component at [`packages/react-app/src/components/markdown-renderer/blocks/svg-renderer.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/blocks/svg-renderer.tsx). A toggle button allows users to switch between raw SVG markup and rasterized preview modes, ensuring both developer debugging and end-user clarity.

## Mathematical and Scientific Content

### LaTeX Equations with KaTeX

Mathematical expressions render beautifully through **KaTeX** integration. The **MarkdownRenderer** in [`packages/react-app/src/components/markdown-renderer/index.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/index.tsx) configures `rehype-katex` and `remark-math` to parse LaTeX syntax (both inline `$...$` and block `$$...$$`) into high-quality mathematical typography without external image dependencies.

## Interactive UI Components

### Interactive Forms

HTML form elements transform into Ant Design form controls through the **MarkdownForm** component at [`packages/react-app/src/components/markdown-renderer/blocks/form.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/blocks/form.tsx). Supported inputs include `<input>`, `<textarea>`, `<select>`, and `<date-picker>` elements. Form submissions feed directly back into the chat conversation, enabling structured data collection within the AI interface.

### Action Buttons

Custom `<button>` elements become functional **ButtonBlock** components located at [`packages/react-app/src/components/markdown-renderer/blocks/button.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/blocks/button.tsx). These buttons can trigger predefined messages or actions when clicked, allowing chat designers to create guided workflows and quick-reply interfaces without custom frontend development.

### Collapsible Think Blocks

Deep-thinking AI steps display in expandable panels via the **ThinkBlock** component at [`packages/react-app/src/components/markdown-renderer/blocks/think-block.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/blocks/think-block.tsx). When the renderer encounters `<details data-think>`, it creates a collapsible section with a visual timer indicating the AI's reasoning duration, keeping the main chat stream clean while preserving transparency about the AI's thought process.

## Security and HTML Handling

Dify Chat implements strict HTML sanitization to prevent XSS attacks while preserving rich functionality. The **MarkdownRenderer** uses `rehypeRaw` combined with a custom tree walk to strip disallowed tags like `<iframe>` and `<script>`, rendering unknown or dangerous tags as plain text. This security layer ensures that user-generated or AI-generated markdown cannot execute arbitrary code while still supporting the rich component ecosystem described above.

The component mapping occurs through ReactMarkdown's `components` prop in [`packages/react-app/src/components/markdown-renderer/index.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/index.tsx):

```tsx
components={{
  code: CodeBlock,
  a: Link,
  p: Paragraph,
  form: MarkdownForm,
  img: ImageBlock,
  video: VideoBlock,
  button: (props) => <ButtonBlock {...props} onSend={onSubmit} />,
  details: ThinkBlock,
  // …additional mappings
}}

```

## Summary

Dify Chat transforms standard markdown into a rich interactive experience through its **MarkdownRenderer** architecture. Key capabilities include:

- **Media rendering** with zoomable images and native video playback
- **Data visualization** via Mermaid diagrams, ECharts charts, and raw SVG
- **Technical content** including syntax-highlighted code and KaTeX mathematical equations
- **Interactive components** such as forms, action buttons, and collapsible think blocks
- **Security protections** that sanitize HTML while preserving rich functionality

## Frequently Asked Questions

### Can Dify Chat render interactive charts and graphs?

Yes. Dify Chat supports **ECharts** visualizations through JSON configuration blocks and **Mermaid** diagrams for flowcharts and sequence diagrams. The **CodeBlock** component in [`packages/react-app/src/components/markdown-renderer/index.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/index.tsx) detects `language-echarts` fences and renders them using `echarts-for-react`, while the **Flowchart** component handles Mermaid syntax.

### How does Dify Chat handle mathematical equations?

Dify Chat renders **LaTeX** mathematical expressions using **KaTeX** via the `rehype-katex` plugin. Both inline math (delimited by single dollar signs) and block equations (delimited by double dollar signs) are supported. This implementation resides in the **MarkdownRenderer** at [`packages/react-app/src/components/markdown-renderer/index.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/index.tsx).

### Is it safe to render user-generated HTML in Dify Chat?

Yes, Dify Chat implements strict **HTML sanitization** to prevent XSS attacks. The renderer uses `rehypeRaw` combined with a custom tree walk to strip dangerous tags like `<iframe>` and `<script>`, rendering unknown elements as plain text. This security layer allows rich interactive components while blocking arbitrary code execution.

### Can users submit data through forms within chat messages?

Yes. Dify Chat supports **interactive forms** through the **MarkdownForm** component in [`packages/react-app/src/components/markdown-renderer/blocks/form.tsx`](https://github.com/lexmin0412/dify-chat/blob/main/packages/react-app/src/components/markdown-renderer/blocks/form.tsx). HTML form elements including inputs, textareas, selects, and date pickers are transformed into Ant Design controls, and submissions feed directly back into the chat conversation as structured data.