Streamdown

Toda la razón de ser de Streamdown es el caso del streaming. Detecta Markdown incompleto, como un **negrita abierto o un enlace al que le falta el corchete de cierre, y cierra el bloque para que nada se muestre como texto sin formato. Conforme llegan nuevos tokens, el componente actualiza el estilo en el sitio. ¿Alguna vez has visto una interfaz de chat mostrar asteriscos rotos antes de que se complete una palabra? Ese es el problema. Para quien construye una interfaz de chat en streaming, esa fluidez es justo el objetivo.

Si tu proyecto ya usa react-markdown, cambiar a Streamdown se parece bastante a un buscar y reemplazar. El componente acepta la misma cadena de markdown como hijo, así que la mayoría de las integraciones necesitan poco más que un nuevo import. Ese bajo coste de migración hace fácil probarlo sin comprometerte a reescribir tu vista de mensajes. Tampoco hay ataduras.

Streamdown cubre más que texto simple. GitHub Flavored Markdown trae tablas, listas de tareas, tachado y notas al pie. KaTeX se encarga de las matemáticas en LaTeX. Mermaid renderiza diagramas a partir de bloques de código y Shiki añade resaltado de sintaxis al código. Para respuestas de IA que mezclan prosa con fórmulas o fragmentos, obtienes el formato sin apilar renderizadores separados.

La prop animated hace aparecer las palabras una a una, con tres estilos integrados: fadeIn, blurIn y slideUp. Puedes ajustar la duración, la curva de aceleración y si dividir por palabra o por carácter. La opción blurIn resulta práctica con modelos rápidos, ya que el desenfoque oculta que muchos tokens llegaron en un solo lote. Cuando el streaming se detiene, la animación se elimina por completo.

Streamdown viene con rehype-sanitize y rehype-harden activados por defecto. El complemento harden te deja definir protocolos permitidos, prefijos de enlaces y prefijos de imágenes, y puedes decidir si se permiten las URLs de datos para imágenes. Como la salida de la IA puede incluir enlaces que tú nunca escribiste, ese control importa antes de que algo llegue a un usuario real.

El procesamiento integrado funciona en dos etapas, remark para la sintaxis de Markdown y rehype para la salida HTML. Puedes ampliar o reemplazar los valores por defecto pasando tus propias matrices de complementos, y los predeterminados se exportan si prefieres añadir en lugar de empezar de cero. Quienes tienen una tubería de procesamiento concreta en mente no quedan atados al comportamiento de fábrica.