[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73583":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},73583,"streamdown","vercel\u002Fstreamdown","vercel","A drop-in replacement for react-markdown, designed for AI-powered streaming.","https:\u002F\u002Fstreamdown.ai\u002F",null,"TypeScript",5279,266,10,33,0,9,24,105,27,38.28,"Other",false,"main",[26,27,28],"ai","markdown","streaming","2026-06-12 02:03:15","# Streamdown\n\nA drop-in replacement for react-markdown, designed for AI-powered streaming.\n\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fstreamdown)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fstreamdown)\n\n## Overview\n\nFormatting Markdown is easy, but when you tokenize and stream it, new challenges arise. Streamdown is built specifically to handle the unique requirements of streaming Markdown content from AI models, providing seamless formatting even with incomplete or unterminated Markdown blocks.\n\nStreamdown powers the [AI Elements Message](https:\u002F\u002Fai-sdk.dev\u002Felements\u002Fcomponents\u002Fmessage) component but can be installed as a standalone package for your own streaming needs.\n\n## Features\n\n- 🚀 **Drop-in replacement** for `react-markdown`\n- 🔄 **Streaming-optimized** - Handles incomplete Markdown gracefully\n- 🎨 **Unterminated block parsing** - Build with `remend` for better streaming quality\n- 📊 **GitHub Flavored Markdown** - Tables, task lists, and strikethrough support\n- 🔢 **Math rendering** - LaTeX equations via KaTeX\n- 📈 **Mermaid diagrams** - Render Mermaid diagrams as code blocks with a button to render them\n- 🎯 **Code syntax highlighting** - Beautiful code blocks with Shiki\n- 🛡️ **Security-first** - Built with `rehype-harden` for safe rendering\n- ⚡ **Performance optimized** - Memoized rendering for efficient updates\n\n## Installation\n\n```bash\nnpm i streamdown\n```\n\nThen, update your Tailwind `globals.css` to include the following so that Tailwind can detect the utility classes used by Streamdown.\n\n```css\n@source \"..\u002Fnode_modules\u002Fstreamdown\u002Fdist\u002F*.js\";\n```\n\nThe path must be relative from your CSS file to the `node_modules` folder containing `streamdown`. In a standard Next.js project where `globals.css` lives in `app\u002F`, the default path above should work.\n\nIf you install optional Streamdown plugins, add their matching `@source` lines from the relevant plugin docs (`\u002Fdocs\u002Fplugins\u002Fcode`, `\u002Fdocs\u002Fplugins\u002Fcjk`, `\u002Fdocs\u002Fplugins\u002Fmath`, `\u002Fdocs\u002Fplugins\u002Fmermaid`). Only include plugin `@source` entries for packages that are actually installed.\n\nExample:\n\n```css\n@source \"..\u002Fnode_modules\u002F@streamdown\u002Fcode\u002Fdist\u002F*.js\";\n```\n\n\n### Monorepo setup\n\nIn a monorepo (npm workspaces, Turbo, pnpm, etc.), dependencies are typically hoisted to the root `node_modules`. You need to adjust the relative path to point there:\n\n```\nmonorepo\u002F\n├── node_modules\u002Fstreamdown\u002F  ← hoisted here\n├── apps\u002F\n│   └── web\u002F\n│       └── app\u002F\n│           └── globals.css   ← your CSS file\n```\n\n```css\n\u002F* apps\u002Fweb\u002Fapp\u002Fglobals.css → 3 levels up to reach root node_modules *\u002F\n@source \"..\u002F..\u002F..\u002Fnode_modules\u002Fstreamdown\u002Fdist\u002F*.js\";\n```\n\nAdjust the number of `..\u002F` segments based on where your CSS file lives relative to the root `node_modules`. If you install Streamdown plugins, add their respective `@source` entries only when those packages are installed.\n\n### CSS Custom Properties (Design Tokens)\n\nStreamdown components are built using shadcn\u002Fui's design system and rely on CSS custom properties for colors, border radius, and spacing. Without these variables defined, components may render with missing backgrounds, borders, or incorrect spacing.\n\nIf you are already using shadcn\u002Fui, these variables are set up automatically. If not, add the following minimal set to your global CSS:\n\n```css\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --radius: 0.625rem;\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --border: oklch(0.269 0 0);\n  --input: oklch(0.269 0 0);\n  --primary: oklch(0.985 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --radius: 0.625rem;\n}\n```\n\nYou can also use the shadcn\u002Fui [theme generator](https:\u002F\u002Fui.shadcn.com\u002Fthemes) to create a custom palette and copy the generated CSS variables directly into your project.\n\n## Usage\n\nHere's how you can use Streamdown in your React application with the AI SDK:\n\n```tsx\nimport { useChat } from \"@ai-sdk\u002Freact\";\nimport { Streamdown } from \"streamdown\";\nimport { code } from \"@streamdown\u002Fcode\";\nimport { mermaid } from \"@streamdown\u002Fmermaid\";\nimport { math } from \"@streamdown\u002Fmath\";\nimport { cjk } from \"@streamdown\u002Fcjk\";\nimport \"katex\u002Fdist\u002Fkatex.min.css\";\nimport \"streamdown\u002Fstyles.css\";\n\nexport default function Chat() {\n  const { messages, status } = useChat();\n\n  return (\n    \u003Cdiv>\n      {messages.map(message => (\n        \u003Cdiv key={message.id}>\n          {message.role === 'user' ? 'User: ' : 'AI: '}\n          {message.parts.map((part, index) =>\n            part.type === 'text' ? (\n              \u003CStreamdown\n                key={index}\n                animated\n                plugins={{ code, mermaid, math, cjk }}\n                isAnimating={status === 'streaming'}\n              >\n                {part.text}\n              \u003C\u002FStreamdown>\n            ) : null,\n          )}\n        \u003C\u002Fdiv>\n      ))}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\nFor more info, see the [documentation](https:\u002F\u002Fstreamdown.ai\u002Fdocs).\n","Streamdown是一个专为AI驱动的流式处理设计的Markdown渲染库，可作为react-markdown的直接替代品。其核心功能包括优化的流式处理能力，能够优雅地处理不完整或未结束的Markdown块，支持GitHub Flavored Markdown、LaTeX数学公式渲染、Mermaid图表以及代码语法高亮等特性。此外，它还通过使用rehype-harden来确保安全渲染，并且性能经过优化以实现高效的更新。适用于需要实时展示AI生成内容的场景，如在线聊天机器人、即时文档编辑器等应用。",2,"2026-06-11 03:46:16","high_star"]