Análisis de Markdown de forma nativa con Bun

Si alguna vez has tenido que conectar unified, remark-parse, remark-rehype y rehype-stringify solo para convertir una cadena de Markdown a HTML, conoces la sobrecarga que esto implica. Bun 1.3.8 (lanzado en enero de 2026) incluye un analizador de Markdown integrado que reemplaza toda esa cadena con una única llamada a la API — sin instalaciones, sin imports, sin configuración de plugins requerida.

A continuación, veremos qué hace la nueva API Bun.markdown, cómo funciona y dónde encaja en tu flujo de trabajo.

¿Qué es el analizador de Markdown de Bun?

Bun.markdown es un analizador de Markdown nativo integrado directamente en el runtime de Bun. Sigue la especificación CommonMark y está implementado como un port en Zig de la biblioteca C md4c — un analizador utilizado en entornos sensibles al rendimiento como Qt.

Dado que se ejecuta como código Zig compilado en lugar de JavaScript, evita la sobrecarga de los pipelines de análisis basados en JavaScript como unified y remark. En lugar de encadenar múltiples paquetes, Bun expone una única API de runtime para el procesamiento de Markdown.

Nota: La API Bun.markdown actualmente está marcada como inestable en la documentación oficial de Bun. La interfaz funciona hoy, pero opciones específicas y firmas de métodos pueden cambiar en futuras versiones de Bun. Consulta las notas de lanzamiento de Bun antes de actualizar en producción.

Markdown a HTML con Bun: El método html()

El caso de uso más simple — convertir Markdown a una cadena HTML — no requiere configuración:

const html = Bun.markdown.html("# Hello **world**")
// "<h1>Hello <strong>world</strong></h1>\n"

Pasa opciones como segundo argumento. La opción headings es útil para sitios de documentación y generación de tablas de contenido:

const html = Bun.markdown.html("## Getting Started", {
  headings: { ids: true }
})
// '<h2 id="getting-started">Getting Started</h2>\n'

Las extensiones de GitHub Flavored Markdown (GFM) están habilitadas por defecto, incluyendo tablas, tachado (~~text~~), listas de tareas (- [x] done) y autoenlaces permisivos. También se admiten opciones adicionales como wikiLinks, latexMath y autoenlazado de encabezados.

Renderizado personalizado con Bun.markdown.render()

Cuando necesitas una salida que no sea HTML estándar — marcado estilizado, salida ANSI para terminal o texto plano — render() acepta callbacks de JavaScript para cada tipo de elemento:

// Agregar clases CSS a los elementos
const html = Bun.markdown.render("# Title\n\nHello **world**", {
  heading: (children, { level }) => `<h${level} class="title">${children}</h${level}>`,
  paragraph: (children) => `<p class="body">${children}</p>`,
  strong: (children) => `<b>${children}</b>`,
})

// Eliminar todo el formato para obtener texto plano
const plain = Bun.markdown.render("# Title\n\n**bold** text", {
  heading: (children) => children + "\n",
  strong: (children) => children,
  paragraph: (children) => children + "\n",
})

// Devolver null para omitir elementos específicos por completo
const noImages = Bun.markdown.render("# Title\n\n![logo](img.png)", {
  image: () => null,
  heading: (children) => `<h1>${children}</h1>`,
})

Esto hace que render() sea útil para herramientas CLI, generación de correos electrónicos o cualquier pipeline donde HTML no sea el formato objetivo.

Renderizado de Markdown con React usando react()

Bun.markdown.react() devuelve elementos de React que pueden usarse directamente en un árbol de componentes:

function Markdown({ text }: { text: string }) {
  return Bun.markdown.react(text)
}

// Mapear elementos Markdown a componentes personalizados
const element = Bun.markdown.react("# Hello", {
  h1: ({ children }) => <h1 className="page-title">{children}</h1>,
})

// Funciona con renderizado del lado del servidor
import { renderToString } from "react-dom/server"
const html = renderToString(Bun.markdown.react("# Hello **world**"))

Si estás usando React 18 o anterior, puedes pasar una opción de compatibilidad:

Bun.markdown.react(markdownText, undefined, { reactVersion: 18 })

Cuándo usar Bun.markdown vs. Remark

Conclusión

Si ya estás ejecutando Bun 1.3.8 o posterior, Bun.markdown está disponible globalmente — no se necesita instalación. Comienza con Bun.markdown.html() para pipelines de contenido sencillos, y recurre a render() o react() cuando necesites más control sobre la salida.

Dado que la API todavía está marcada como inestable, fija tu versión de Bun y prueba la salida del renderizado contra tu HTML esperado antes de desplegar a producción.

Preguntas frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.