Repolode
Enviar
vercel

vercel/streamdown

Uma alternativa drop-in ao react-markdown, feita para renderizar Markdown em streaming de modelos de IA, inclusive blocos incompletos.

Ver no GitHubSite
Estrelas
5,711
Forks
315
Issues abertas
44
Último commit
há 13 horas

O que é?

Streamdown é um renderizador de Markdown para React, desenvolvido para conteúdo que chega token por token, como respostas de modelos de IA. Renderizadores tradicionais de Markdown costumam exibir a formatação quebrada enquanto o texto ainda está sendo transmitido, por exemplo, um bloco de código sem fechamento ou uma tabela pela metade. O Streamdown foi feito para lidar com blocos de Markdown incompletos e sem fechamento, mantendo a saída legível à medida que cresce.

Ele pode ser usado como alternativa drop-in ao react-markdown. Entre seus recursos estão GitHub Flavored Markdown (tabelas, listas de tarefas e texto tachado), fórmulas LaTeX renderizadas com KaTeX, diagramas Mermaid com um botão para renderizá-los e realce de código baseado em Shiki. A segurança é tratada com rehype-harden, e a renderização é memoizada para reduzir o trabalho durante as atualizações.

O Streamdown é usado pelo componente Message do AI Elements, do AI SDK, e também pode ser instalado como pacote npm independente. A estilização usa Tailwind e propriedades CSS customizadas no estilo do shadcn/ui; o guia de configuração explica como utilizá-las.

Recursos principais

  • 01Alternativa drop-in ao react-markdown
  • 02Lida com Markdown incompleto e sem fechamento durante o streaming
  • 03Tabelas, listas de tarefas e texto tachado do GitHub Flavored Markdown
  • 04Renderização de fórmulas LaTeX com KaTeX
  • 05Diagramas Mermaid com um botão para renderizá-los
  • 06Realce de sintaxe de código com Shiki

Casos de uso

  • Renderizar respostas de chat de LLMs em um app React ou Next.js
  • Exibir respostas geradas por IA que incluam código, tabelas e fórmulas matemáticas
  • Exibir diagramas Mermaid produzidos por um assistente de IA

Início rápido

  1. 1

    Instale o pacote

    npm i streamdown
  2. 2

    Adicione a linha @source do Tailwind ao seu globals.css

  3. 3

    Renderize Markdown em streaming com o componente Streamdown no seu app React

Antes de usar

  • A licença não está claramente especificada nos metadados do projeto.
  • Para que os estilos sejam renderizados corretamente, são necessários o Tailwind CSS e propriedades personalizadas de CSS no estilo do shadcn/ui.

Tópicos

#markdown#react#streaming#llm#streaming-markdown#syntax-highlighting#katex#ai

Perguntas frequentes

O que é streamdown?
Uma alternativa drop-in ao react-markdown, feita para renderizar Markdown em streaming de modelos de IA, inclusive blocos incompletos. Streamdown é um renderizador de Markdown para React, desenvolvido para conteúdo que chega token por token, como respostas de modelos de IA. Renderizadores tradicionais de Markdown costumam exibir a formatação quebrada enquanto o texto ainda está sendo transmitido, por exemplo, um bloco de código sem fechamento ou uma tabela pela metade. O Streamdown foi feito para lidar com blocos de Markdown incompletos e sem fechamento, mantendo a saída legível à medida que cresce.
streamdown é gratuito? Qual é a licença?
streamdown é open source sob a licença Other. Confira os termos da licença antes de usá-lo em produtos comerciais.
streamdown ainda é mantido?
Manutenção ativa. O último commit de streamdown foi em 19 de out. de 2026.
Para que posso usar streamdown?
Renderizar respostas de chat de LLMs em um app React ou Next.js Exibir respostas geradas por IA que incluam código, tabelas e fórmulas matemáticas Exibir diagramas Mermaid produzidos por um assistente de IA
Como instalar streamdown?
Instale o pacote: npm i streamdown Adicione a linha @source do Tailwind ao seu globals.css Renderize Markdown em streaming com o componente Streamdown no seu app React
Onde consigo streamdown?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/vercel/streamdown

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados