Streamdown
Vercel · 程式設計
Streamdown 是給 React 應用程式用的串流 Markdown 渲染器，專門處理 AI 模型逐個 token 傳來的 Markdown。它是由 Vercel 推出的 react-markdown 直接替代方案，能應付串流輸出中那些麻煩的部分，例如還沒關閉的粗體文字，或是少了結尾反引號的程式碼區塊。如果你正在打造串流聊天介面或任何 AI 串流介面，Streamdown 能讓格式保持穩定，而不是任由它閃爍、破版。免費。開源。以 npm 套件形式發布。
關於 Streamdown
Streamdown 是什麼
Streamdown 是開源的 Markdown 渲染器，給顯示 AI 生成內容的 React 應用程式使用。它要解決的核心問題是時機。一般渲染器預設收到的是完成品文件，但當 LLM 串流輸出答案時，你的應用程式收到的是片段。一句話可能斷在單字中間。一個連結可能少了結尾的括號。一張表格可能在標頭列之前就冒出來。像 react-markdown 這類傳統工具，不是卡在這些不完整的區塊上，就是把它們渲染錯誤。
Streamdown 刻意解析不完整的區塊。它偵測沒有結束的語法，把樣式套用到已經抵達的內容，並隨著更多 token 進來平順更新。結果就是一段看起來像是刻意設計、而非壞掉的文字揭示效果。
代價是：這是給開發者用的工具，不是完成品。沒有應用程式可下載，也沒有儀表板可點。你需要一個 React 專案、Node.js 18 以上版本，以及對 Tailwind CSS 的若干熟悉度來為輸出加上樣式。如果你不寫程式，這東西不適合你。
開始使用
- 用你的套件管理工具安裝，例如
npm i streamdown，或從 AI Elements 函式庫取出 message 元件。 - 把 Streamdown 的原始檔加進你的 Tailwind 設定，在你的全域 CSS 檔中加入
@source "../node_modules/streamdown/dist/*.js";。 - 把
<Streamdown>元件放進你的頁面或聊天檢視，並將進來的 markdown 字串當作它的子項傳入。 - 用
animated屬性開啟逐字動畫，並在想要打字效果時把isAnimating綁到你的串流狀態。 - 發布前用 rehype-harden 選項限制連結與圖片，這樣使用者或模型內容就無法載入你不信任的東西。
產品資訊
快速了解 Streamdown 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 打造 AI 聊天應用的 React 開發者：Streamdown 幾乎不用設定就能嵌入既有的元件樹，讓你不必自己寫解析器，就能發布精緻的串流檢視。
- AI 產品團隊：如果你的應用程式顯示即時模型輸出，處理不完整區塊的能力能幫你避開使用者一眼就察覺的閃爍與版面跳動。
- 想同時處理 Markdown、數學與圖表的前端工程師：KaTeX、Mermaid 與 Shiki 支援意味著你不必接三套各自獨立的函式庫。
任務
- 渲染串流的 LLM 回應：這個元件為逐 token 更新而打造，所以還未完成的粗體、連結與程式碼在抵達時就能乾淨呈現。
- 打造具豐富輸出的聊天介面：表格、待辦清單、註腳與刪除線透過 GitHub Flavored Markdown 開箱即用。
- 在 AI 答案中顯示程式碼與公式：語法突顯與 LaTeX 渲染能處理純 Markdown 不足應付的情況。
情境
- 發布逐字串流回覆的 AI 助理：`animated` 屬性會加入逐字揭示效果，並在訊息完成後消失，不會留下多餘負擔。
- 顯示混合語言答案：CJK 文字有自己的外掛，如果你的使用者用中文、日文或韓文書寫，這點很重要。
- 讓不受信任的內容保持安全：rehype-harden 讓你限制允許哪些連結與圖片，當 markdown 來自模型而非你自己的文案時特別有用。
主要功能
為串流最佳化的渲染
Streamdown 存在的全部理由就是串流情境。它會偵測不完整的 Markdown，例如還沒關閉的 **粗體 或少了結尾括號的連結，並把區塊補完，讓任何內容都不會以原始文字形式呈現。隨著新 token 抵達，元件會就地更新樣式。你可曾看過聊天介面在一個字完成前閃出破掉的星號？那就是問題所在。對打造串流聊天介面的人來說，這份平順正是重點。
react-markdown 的直接替代品
如果你的專案已經在用 react-markdown，換成 Streamdown 差不多就是尋找和取代。這個元件同樣以 markdown 字串作為子項，所以大多數整合只需要多一個 import。這樣低的移轉成本，讓你很容易先試用，而不必承諾重寫你的訊息檢視。也沒有綁定問題。
豐富內容支援
Streamdown 涵蓋的不只是純文字。GitHub Flavored Markdown 帶來表格、待辦清單、刪除線與註腳。KaTeX 處理 LaTeX 數學。Mermaid 從程式碼區塊渲染圖表，Shiki 為程式碼加上語法突顯。對於混合散文與公式或程式碼片段的 AI 答案，你能取得格式，而不必堆疊各自獨立的渲染器。
逐字動畫
animated 屬性讓單字一個接一個淡入，內建三種樣式：fadeIn、blurIn 與 slideUp。你可以設定時長、緩動，以及要按單字還是按字元分割。blurIn 選項在搭配快速模型時很好用，因為模糊能掩蓋許多 token 在同一批抵達的事實。串流停止時，動畫會完全移除。
安全強化
Streamdown 預設啟用 rehype-sanitize 與 rehype-harden。harden 外掛讓你設定允許的通訊協定、連結前綴與圖片前綴，也能決定是否允許圖片的 data URL。由於 AI 輸出可能包含你從未寫過的連結，在任何內容送到真實使用者面前之前，這份控制很重要。
外掛架構
內建處理分成兩階段，remark 負責 Markdown 語法，rehype 負責 HTML 輸出。你可以傳入自己的外掛陣列來擴充或取代預設值，而預設值也有匯出，方便你在其上補充而非從頭來過。心中已有特定處理流程的人，不會被制式行為綁死。
優缺點
優點
- 能優雅處理不完整的 Markdown，而這正是純 react-markdown 在串流時卡住的地方。
- 免費且開源，所以不必考慮授權費或 API 帳單。
- 對表格、數學、圖表與程式碼的內容支援廣泛，不需要額外函式庫。
- 動畫在串流結束後會自行清理，完成訊息上不會殘留 DOM 負擔。
- 對已建立在 react-markdown 上的專案來說，移轉路徑合理。
缺點
- 完整支援需要 React 19.1.1 以上版本，還要有 Tailwind CSS 設定，所以不適合所有技術堆疊。
- 沒有託管版本或視覺化建構工具。你寫的是元件程式碼，不是拖曳元素。
- 外掛與設定的介面足夠深，初學者會很依賴文件。
- 它只把一個問題做好，並不試圖成為完整的聊天框架，所以周圍的介面還是得你自己打造。
常見問題
它在 React 應用程式裡渲染從 AI 模型逐漸抵達的 Markdown。它不會因為半完成的文字而壞掉，而是把不完整的內容格式化，並隨著更多 token 進來更新，讓聊天介面保持可讀。
相關內容
探索與 Streamdown 相關的工具、技能與文章。
Streamdown 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。