MJML: cómo crear emails sin complicaciones

Por Equipo de i8 3 de julio de 2026 Editado: 13 de julio de 2026

MJML: cómo crear emails sin complicaciones

★ ★ ★ ★ ★

97 valoraciones de lectores

Si alguna vez has maquetado un email en HTML puro, ya sabes de qué va esto. Tablas anidadas hasta el infinito, bgcolor porque el CSS no se aplica en Outlook, mso- conditional comments, y ese momento mágico en el que se ve perfecto en Gmail y roto en Outlook 2016. El email HTML sigue viviendo, en muchos sentidos, en 2005.

MJML existe para arreglarte ese dolor de cabeza. Te lo cuento con calma.

¿Qué es MJML?

MJML (Mailjet Markup Language) es un lenguaje de marcado open source pensado específicamente para construir emails responsive. Tú escribes componentes semánticos tipo <mj-section>, <mj-column> o <mj-text>, y el compilador te devuelve el HTML de tabla infernal que necesitan los clientes de correo, ya optimizado para Outlook, Gmail, Apple Mail y compañía.

En resumen: tú escribes algo legible, MJML genera el desastre de HTML que en realidad hace falta.

<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text font-size="20px" color="#1a1a1a">
Hola, esto es un email de verdad
</mj-text>
<mj-button background-color="#f45e43" href="https://infinit8.es">
Ver más
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>

Eso, compilado, se convierte en cientos de líneas de tablas con estilos inline. No las quieres escribir tú a mano. Ni falta que hace.

Por qué merece la pena si vienes del mundo dev normal

Si trabajas con WordPress, PrestaShop o cualquier backend PHP, seguramente ya odias tener que tocar plantillas de email. Aquí es donde MJML encaja bien:

Componentes reutilizables: puedes crear tu propio <mj-header> o <mj-footer> como partial y reutilizarlo en todos los templates.
Responsive de serie: las columnas se apilan solas en móvil sin que tengas que pelearte con media queries que la mitad de los clientes de correo ignoran.
Compatibilidad real: el output está testeado contra los clientes de correo más problemáticos (sí, Outlook sigue siendo el enemigo).
Integrable en cualquier stack: hay CLI, API REST, y librerías para Node, pero también puedes compilar el MJML una vez y guardar el HTML resultante para usarlo donde quieras, incluido PHP.

Cómo empezar: las tres formas de usarlo

1. El Playground online

Para probar cosas rápido sin instalar nada: mjml.io/try-it-live. Escribes a la izquierda, ves el render a la derecha. Perfecto para prototipar un layout antes de meterlo en tu proyecto.

2. CLI (Node.js)

Es la vía más cómoda si vas a generar varios templates:

npm install -g mjml mjml plantilla.mjml -o plantilla.html

También tiene modo watch, útil si estás iterando el diseño, esto sirve para guardar automáticamente todos los cambios, te aconsejo esta opción.

mjml -w plantilla.mjml -o plantilla.html

3. API o librería, integrado en tu backend

Si generas emails dinámicamente desde PHP (confirmaciones de pedido, newsletters, notificaciones), lo normal es que no quieras depender de Node en producción. Dos caminos:

Precompilar: diseñas el MJML, lo compilas a HTML una vez, y ese HTML final lo guardas como plantilla con placeholders ({{nombre}}, {{pedido_id}}) que rellenas con PHP normal, tipo str_replace o con tu motor de plantillas habitual.
API de Mailjet: si quieres compilar al vuelo desde PHP sin montar un entorno Node, existe la API pública de MJML (de pago tras cierto volumen) a la que le mandas el MJML y te devuelve el HTML ya procesado.

Para la mayoría de proyectos con clientes tipo pyme, la opción de precompilar y dejar el HTML final integrado en el sistema de envío (PHPMailer, Symfony Mailer, lo que uses) es la más simple y la que menos dependencias añade.

mj-attributes te permite definir estilos globales una sola vez, en vez de repetirlos componente a componente. Esto es oro cuando tienes varios templates y quieres mantener consistencia sin copiar y pegar estilos por todos lados.

Algunos consejos si te lanzas

No abuses de imágenes de fondo: muchos clientes de correo (Outlook, otra vez) las bloquean o las ignoran. Usa color de fondo sólido como respaldo.
Prueba en Litmus o Email on Acid si el email es importante de verdad. MJML resuelve el 90% del problema, pero el último 10% siempre depende del cliente de correo específico.
Guarda tus componentes reutilizables (header, footer, botón con tu estilo de marca) como snippets. Te ahorras montar cada template desde cero.
No mezcles mj-raw a la ligera: puedes meter HTML crudo dentro de MJML con <mj-raw> para casos especiales, pero cuanto menos lo uses, más predecible es el resultado final.

¿Merece la pena para un proyecto pequeño?

Depende del volumen. Si vas a mandar dos emails transaccionales sueltos, quizás te compensa más una plantilla HTML simple hecha a mano aunque falle en móvil o no acabe de verse como quieres. Pero en cuanto entran en juego newsletters, múltiples templates, o un cliente que va a pedir cambios de diseño cada dos por tres, MJML te ahorra muchísimas horas y dolores de cabeza con la compatibilidad entre clientes de correo.

Si te dedicas a montar sistemas para pymes, como yo, es una de esas herramientas que una vez la metes en el flujo, no vuelves atrás.

Estructura básico de ejemplo:

<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="Helvetica, Arial, sans-serif" />
<mj-text font-size="16px" color="#333333" line-height="1.5" />
</mj-attributes>
</mj-head>

<mj-body background-color="#f4f4f4">
<mj-section background-color="#ffffff" padding="20px">
<mj-column>
<mj-image src="https://infinit8.es/logo.png" width="150px" />
<mj-divider border-color="#eeeeee" />
<mj-text>
Aquí va el contenido principal del email.
</mj-text>
<mj-button background-color="#111111" href="https://infinit8.es">
Llamada a la acción
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>

Resumen:

MJML es una tecnología que compila a HTML responsive para email, compatible con todos los clientes de correo. Reduce mucho la complejidad frente a HTML puro, aunque necesitas conocimientos de CSS para los estilos y Node.js instalado para compilar (vía CLI), aparte de eso no requiere ningún IDE específico.

¿Necesitas montar un sistema de emails transaccionales o newsletters para tu negocio? En Infinit8 me encargo de todo, desde el diseño hasta la integración con tu backend.

Preguntas frecuentes

¿Puedo usar MJML sin depender de Node.js en mi proyecto PHP?

Sí, pero con matices. MJML en sí necesita Node para compilar (CLI o librería), no hay puerto nativo a PHP. Lo habitual en un stack PHP es compilar el MJML a HTML una sola vez (en local o en un paso de build) y luego integrar ese HTML final como plantilla en tu sistema de envío (PHPMailer, Symfony Mailer, etc.), sustituyendo placeholders con PHP normal. Node solo entra en el proceso de diseño, no en producción.

¿Qué pasa si necesito HTML muy específico que MJML no cubre?

Para esos casos existe <mj-raw>, que te permite inyectar HTML crudo dentro del documento MJML sin que el compilador lo toque. Es útil para trackers de email marketing, condicionales de Outlook muy concretos, o markup que MJML no contempla. Eso sí, cuanto más lo uses, menos consistente es el resultado final entre clientes de correo, así que se recomienda como excepción, no como norma.

¿MJML sirve también para plantillas transaccionales dinámicas (pedidos, facturas, etc.)?

Sí, es uno de sus usos más habituales. La estrategia normal es diseñar el MJML con placeholders ({{cliente}}, {{total}}, {{items}}), compilarlo a HTML, y ese HTML pasa a ser tu plantilla base en PHP. Ahí simplemente rellenas los placeholders con str_replace, un motor de plantillas (Twig, Blade) o lo que ya uses en el proyecto. La parte de diseño responsive queda resuelta de fábrica, tú solo te preocupas de inyectar los datos.

¿Necesitas mejorar tu web?