Repolode
Enviar
vercel

vercel/streamdown

Un reemplazo directo de react-markdown para renderizar Markdown en streaming de modelos de IA, incluso con bloques incompletos.

Ver en GitHubSitio web
Estrellas
5,711
Forks
315
Issues abiertos
44
Último commit
hace 13 horas

¿Qué es?

Streamdown es un renderizador de Markdown para React diseñado para contenido que llega token a token, como las respuestas de modelos de IA. Los renderizadores de Markdown estándar suelen mostrar formatos rotos mientras el texto sigue llegando, por ejemplo, un bloque de código sin cerrar o una tabla a medio escribir. Streamdown está preparado para manejar bloques de Markdown incompletos y sin terminar, para que el resultado siga siendo legible a medida que crece.

Se puede usar como reemplazo directo de react-markdown. Entre sus funciones se incluyen GitHub Flavored Markdown (tablas, listas de tareas y texto tachado), fórmulas LaTeX renderizadas con KaTeX, diagramas Mermaid con un botón para renderizarlos y resaltado de código basado en Shiki. La seguridad se gestiona con rehype-harden, y el renderizado se memoriza para reducir el trabajo en las actualizaciones.

Streamdown impulsa el componente Message de AI Elements, parte de AI SDK, y también se puede instalar como paquete npm independiente. Los estilos se basan en Tailwind y en propiedades CSS personalizadas al estilo de shadcn/ui; la guía de configuración explica cómo configurarlos.

Funciones clave

  • 01Reemplazo directo de react-markdown
  • 02Gestiona Markdown incompleto y sin terminar durante el streaming
  • 03Tablas, listas de tareas y texto tachado de GitHub Flavored Markdown
  • 04Renderizado de fórmulas LaTeX con KaTeX
  • 05Diagramas Mermaid con un botón para renderizarlos
  • 06Resaltado de sintaxis de código con Shiki

Casos de uso

  • Renderizar respuestas de chat de LLM en una aplicación React o Next.js
  • Mostrar respuestas generadas por IA que incluyen código, tablas y fórmulas
  • Mostrar diagramas Mermaid generados por un asistente de IA

Inicio rápido

  1. 1

    Instala el paquete

    npm i streamdown
  2. 2

    Añade la línea @source de Tailwind a tu globals.css

  3. 3

    Renderiza Markdown en streaming con el componente Streamdown en tu aplicación React

Antes de usarlo

  • La licencia no está especificada claramente en los metadatos del proyecto.
  • Para que los estilos se rendericen correctamente, se necesitan Tailwind CSS y propiedades personalizadas de CSS al estilo de shadcn/ui.

Temas

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

Preguntas frecuentes

¿Qué es streamdown?
Un reemplazo directo de react-markdown para renderizar Markdown en streaming de modelos de IA, incluso con bloques incompletos. Streamdown es un renderizador de Markdown para React diseñado para contenido que llega token a token, como las respuestas de modelos de IA. Los renderizadores de Markdown estándar suelen mostrar formatos rotos mientras el texto sigue llegando, por ejemplo, un bloque de código sin cerrar o una tabla a medio escribir. Streamdown está preparado para manejar bloques de Markdown incompletos y sin terminar, para que el resultado siga siendo legible a medida que crece.
¿streamdown es gratuito? ¿Qué licencia tiene?
streamdown es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿streamdown sigue mantenido?
Mantenimiento activo. El último commit de streamdown fue el 19 oct 2026.
¿Para qué puedo usar streamdown?
Renderizar respuestas de chat de LLM en una aplicación React o Next.js Mostrar respuestas generadas por IA que incluyen código, tablas y fórmulas Mostrar diagramas Mermaid generados por un asistente de IA
¿Cómo se instala streamdown?
Instala el paquete: npm i streamdown Añade la línea @source de Tailwind a tu globals.css Renderiza Markdown en streaming con el componente Streamdown en tu aplicación React
¿Dónde consigo streamdown?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/vercel/streamdown

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados