Swap from ReactMarkdown to Streamdown

examples/react-cra/ecommerce-starter/package.json

@@ -26,26 +26,22 @@
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-markdown": "^9.0.1",
-    "rehype-highlight": "^7.0.0",
-    "rehype-raw": "^7.0.0",
-    "rehype-sanitize": "^6.0.0",
-    "remark-gfm": "^4.0.1",
+    "streamdown": "^1.6.5",
     "tailwindcss": "^4.0.6",
     "vite-tsconfig-paths": "^5.1.4",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "@content-collections/core": "^0.8.2",
     "@content-collections/vite": "^0.2.6",
+    "@tanstack/react-start-plugin": "^1.131.11",
+    "@tanstack/router-generator": "1.120.20",
+    "@tanstack/start": "^1.120.20",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@tanstack/router-generator": "1.120.20",
-    "@tanstack/start": "^1.120.20",
-    "@tanstack/react-start-plugin": "^1.131.11",
     "jsdom": "^26.0.0",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",

frameworks/react-cra/examples/tanchat/assets/src/components/example-AIAssistant.tsx

@@ -3,11 +3,7 @@ import { useStore } from '@tanstack/react-store'
 import { Store } from '@tanstack/store'
 
 import { Send, X, ChevronRight } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
-import rehypeSanitize from 'rehype-sanitize'
-import rehypeHighlight from 'rehype-highlight'
-import remarkGfm from 'remark-gfm'
+import Streamdown from 'streamdown'
 
 import { useChat } from '@ai-sdk/react'
 import { DefaultChatTransport } from 'ai'
@@ -61,16 +57,9 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
                     </div>
                   )}
                   <div className="flex-1 min-w-0 text-white prose dark:prose-invert max-w-none prose-sm">
-                    <ReactMarkdown
-                      rehypePlugins={[
-                        rehypeRaw,
-                        rehypeSanitize,
-                        rehypeHighlight,
-                        remarkGfm,
-                      ]}
-                    >
+                    <Streamdown>
                       {part.text}
-                    </ReactMarkdown>
+                    </Streamdown>
                   </div>
                 </div>
               )

frameworks/react-cra/examples/tanchat/assets/src/routes/demo/tanchat.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "highlight.js/styles/github-dark.css";
+@source "../../../../node_modules/streamdown/dist/*.js";
 
 /* Custom scrollbar styles */
 ::-webkit-scrollbar {

frameworks/react-cra/examples/tanchat/assets/src/routes/demo/tanchat.tsx

@@ -1,11 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { Send } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
-import rehypeSanitize from 'rehype-sanitize'
-import rehypeHighlight from 'rehype-highlight'
-import remarkGfm from 'remark-gfm'
+import Streamdown from 'streamdown'
 import { useChat } from '@ai-sdk/react'
 import { DefaultChatTransport } from 'ai'
 
@@ -87,16 +83,9 @@ function Messages({ messages }: { messages: Array<UIMessage> }) {
                         className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
                         key={index}
                       >
-                        <ReactMarkdown
-                          rehypePlugins={[
-                            rehypeRaw,
-                            rehypeSanitize,
-                            rehypeHighlight,
-                            remarkGfm,
-                          ]}
-                        >
+                        <Streamdown>
                           {part.text}
-                        </ReactMarkdown>
+                        </Streamdown>
                       </div>
                     )
                   }

frameworks/react-cra/examples/tanchat/package.json

@@ -6,11 +6,7 @@
     "@modelcontextprotocol/sdk": "^1.8.0",
     "ai": "^5.0.8",
     "highlight.js": "^11.11.1",
-    "react-markdown": "^10.1.0",
-    "rehype-highlight": "^7.0.0",
-    "rehype-raw": "^7.0.0",
-    "rehype-sanitize": "^6.0.0",
-    "remark-gfm": "^4.0.1",
+    "streamdown": "^1.6.5",
     "lucide-react": "^0.544.0",
     "zod": "^4.1.11"
   }

frameworks/react-cra/src/checksum.ts

@@ -1,3 +1,3 @@
 // This file is auto-generated. Do not edit manually.
 // Generated from add-ons, examples, hosts, project, and toolchains directories
-export const contentChecksum = 'a42905c8800e56f1a97cdfc380ba4543e2d296e1fde95246036a4eacdaa694d7'
+export const contentChecksum = 'b1b304034569c6d53f6f318b3e0927c52fd96d71939e21bc455e0c56ba9dbb86'