Componentes propios del email
Secciones, columnas, botones y separadores ya existen como componentes, así que el bloque que sueltas en el lienzo se traduce a marcado escrito para el email y no para el navegador.
PageKit: el creador de sitios GrapesJS autoalojado, con el código fuente incluido. Obtener acceso anticipado
Diseña emails responsive de forma visual con MJML, exporta HTML listo para producción y mantén tus plantillas, tus datos y tus integraciones en tu propia infraestructura.
26k+
Estrellas en GitHub
100+
Plugins en GJS.Market
10 años
Desarrollo activo
$0
Coste de licencia, siempre
Arrastrar bloques es la parte que todo el mundo imagina. Lo que de verdad consume una hoja de ruta es todo lo que hay detrás del lienzo, y la lista es la misma tanto si añades email a un CRM, a una plataforma de ecommerce o a un SaaS de marketing.
Lo que hay detrás del lienzo
Construir el editor desde cero
Meses
Partir de GrapesJS
Días
Tu editor de email debería girar en torno a tu producto, y no al revés.
El HTML de email no se comporta como el HTML web. MJML es un lenguaje de marcado pensado para el email: tú escribes componentes semánticos y su compilador genera el HTML basado en tablas y con CSS inline que esperan los clientes de correo. Es lo que convierte un editor visual en un editor de email.
Secciones, columnas, botones y separadores ya existen como componentes, así que el bloque que sueltas en el lienzo se traduce a marcado escrito para el email y no para el navegador.
El apilado de columnas y las media queries los produce el compilador, en lugar de mantenerse a mano en cada plantilla.
El paso de compilación aplica el CSS inline, que es lo que necesitan la mayoría de clientes de correo. No tienes que enchufar otro inliner al proceso.
El código MJML es legible y comparable, de modo que un cambio de plantilla se revisa como código y no como un muro de tablas anidadas.
La salida es HTML corriente. Cualquier sistema capaz de enviar email HTML puede enviarlo: no hay dependencia de MJML en el momento del envío.
mjml es MIT; el plugin grapesjs-mjml que lo integra en GrapesJS es BSD-3-Clause. Ninguno añade coste de licencia.
Ambos caminos terminan en HTML. La diferencia está en cuánto del trabajo propio del email mantienes a mano y cuánto se genera solo en cada guardado.
| Aspecto | MJML | HTML escrito a mano |
|---|---|---|
| Diseño responsive | Generado desde los componentes | Mantenido a mano en cada plantilla |
| Componentes propios del email | Los aporta el lenguaje | Los construyes y mantienes tú |
| CSS inline | Parte del paso de compilación | Una herramienta aparte en tu proceso |
| Rarezas de los clientes | Se tratan en el compilador, de forma central | Se tratan en cada plantilla |
| Autoría | Marcado semántico, diffs legibles | Tablas anidadas, más difícil de revisar |
| Edición visual | Los componentes encajan bien como bloques | Más trabajo de adaptación por bloque |
| Salida | HTML | HTML |
MJML está diseñado para simplificar el desarrollo de email responsive en los principales clientes de correo. Elimina una categoría de trabajo; no elimina la necesidad de probar lo que envías.
Del editor salen tres artefactos y cada uno tiene una función. Saber cuál es cuál es casi toda la decisión de arquitectura.
Etapa 01
El usuario coloca bloques en el lienzo. El estado propio del proyecto es JSON: esto es lo que guardas para que el email pueda reabrirse y editarse más adelante.
editor.getProjectData()Etapa 02
La representación de autoría. Legible, comparable y lo correcto que versionar cuando quieres ver qué cambió realmente entre dos revisiones de una plantilla.
editor.runCommand('mjml-code')Etapa 03
La salida compilada, basada en tablas y con CSS inline. Es el artefacto que transmites y el único que tu infraestructura de envío necesita entender.
editor.runCommand('mjml-code-to-html')Etapa 04
La entrega sigue siendo tuya. Cualquier proveedor o servicio propio que acepte HTML puede enviarlo, con tus credenciales y tu dominio de envío.
POST /your-api/campaigns/:id/sendEl editor es una capa. Todo lo comercialmente sensible del email —la lista, el dominio de envío, la reputación que has construido con él— se queda donde ya está.
Tu producto
Editor de email GrapesJS
Tu infraestructura
Para el detalle de cómo montar el editor dentro de una aplicación existente, incluidas la autenticación y la estrategia de iframe: Ver la guía del editor embebible
La demo del editor de newsletters publicada por el proyecto GrapesJS. Solo se carga cuando tú lo pides, así que hasta entonces no le cuesta nada a la página.
La demo del editor de newsletters de código abierto de grapesjs.com: arrastra bloques, edita contenido y exporta el HTML.
Demo alojada por el proyecto GrapesJS. Muestra la experiencia de edición del núcleo, no los plugins que aparecen más abajo en esta página.
Elegir una plantilla
El usuario parte de una plantilla guardada y no de un lienzo vacío. Las plantillas son filas de tu base de datos, así que tú decides quién ve cuáles.
Editar visualmente
Se arrastran bloques, se edita el texto en línea y se ajustan estilos en el gestor. El editor contiene componentes MJML, de modo que cada cambio se queda dentro de marcado seguro para email.
Guardar el borrador
Persiste el JSON del proyecto en tu propia API a través del gestor de almacenamiento. El autoguardado, los borradores y el historial de versiones son comportamiento de tu aplicación, no del editor.
Previsualizar y probar
Renderiza el HTML compilado para revisarlo y envía mensajes de prueba con tu proveedor. Las pruebas de renderizado cliente por cliente son una capacidad que añades tú: no vienen incluidas.
Exportar el HTML
Compila el MJML a HTML con estilos en línea. Guárdalo junto al JSON y al MJML y siempre sabrás exactamente qué se envió.
Enviar y medir
Entrega el HTML a tu ESP o a tu propio servicio de envío. Aperturas, clics y rebotes vuelven por ese proveedor hasta tus informes.
Los pasos 1, 3, 4 y 6 son tu aplicación. GrapesJS y MJML se encargan del paso 2 y del paso 5, que es justamente la parte que de otro modo llevaría meses.
La misma base, apuntada a productos distintos. Cada uno es el editor más tu propio almacenamiento, permisos y entrega.
Da a tus clientes un editor visual de campañas dentro de tu producto, en vez de pedirles que peguen HTML traído de otro sitio.
Ver el enfoque de arrastrar y soltarPermite que los equipos comerciales y de éxito de cliente creen y ajusten sus emails sin abrir un ticket a ingeniería.
Ver la gestión de plantillasRedacta los emails que envían tus flujos de ciclo de vida con el mismo editor que tus usuarios ya conocen.
Ver la implementación en ReactEnvíos promocionales, confirmaciones de pedido y recuperación de carrito, todo desde una biblioteca de bloques y tus propias normas de marca.
Ver la arquitectura SaaSEmails de onboarding, activación y retención que tu equipo de producto puede cambiar sin un despliegue.
Ver plugins de emailSistemas de email de marca reutilizables por cliente, sobre infraestructura que controlas y no sobre una plataforma por puesto.
Ver opciones de marca blancaGrapesJS es un framework de editor, no un producto alojado. Esa distinción es justo la razón por la que puede convertirse en tu editor de email en vez de quedarse al lado.
El núcleo se publica bajo BSD-3-Clause y es gratuito para uso comercial. Puedes leerlo, bifurcarlo y distribuirlo dentro de un producto de pago.
El editor se ejecuta dentro de tu propia aplicación. Ningún tercero se interpone entre tus usuarios y sus plantillas.
Bloques, componentes, comandos y paneles son puntos de extensión. Un bloque de email a medida es un plugin, no un fork.
grapesjs-mjml, mantenido en la organización de GrapesJS, incorpora los componentes MJML al editor como bloques de primera clase.
Paneles, iconos y tema son tuyos para cambiarlos, de modo que el editor parezca parte de tu producto y no una herramienta incrustada.
100+ plugins en GJS.Market cubren almacenamiento, recursos, bloques y exportación, así que gran parte del trabajo periférico es una compra y no un sprint.
Unlayer y Stripo son productos alojados y con soporte comercial, y para muchos equipos ese es el intercambio correcto. Esta tabla trata de qué controlas y qué pagas, no de qué editor es mejor.
| Aspecto | GrapesJS | Unlayer | Stripo Plugin |
|---|---|---|---|
| Código disponible y abierto | Sí — BSD-3-Clause | Not publicly documented | Not publicly documented |
| Nivel gratuito | El editor entero, $0 | Plan gratuito, $0 | Plan gratuito, $0 |
| Planes de pago | Ninguno — los plugins son pago único | $250/mo / $750/mo / $2,000/mo | $100/mo / $550/mo |
| Autoalojar el editor | Siempre — se ejecuta en tu app | On-premise en Enterprise | Componentes de servidor en Enterprise |
| MJML como capa de autoría | Sí — grapesjs-mjml | Not publicly documented | Not publicly documented |
| Plantillas en tu base de datos | Sí — la capa de almacenamiento la escribes tú | Depende del plan y del despliegue | Depende del plan y del despliegue |
Los nombres de plan y los precios de los proveedores se consultaron en sus propias páginas públicas de precios el 2026-08-27 y pueden cambiar en cualquier momento: comprueba la fuente antes de presupuestar con ellos. Fuentes: Precios de Unlayer · Stripo Plugin. «Not publicly documented» significa que el proveedor no lo declara públicamente. No es una afirmación de que la capacidad no exista.
Cada elemento de abajo es un producto real con precio en vivo. Entre todos cubren las capas que rodean al lienzo: presets, bloques, almacenamiento, recursos y exportación.
Incorpora los componentes MJML al editor para que el lienzo produzca marcado de email y no marcado web.
Una configuración de editor orientada a newsletters, como punto de partida cuando no necesitas el paso de compilación de MJML.
Secciones listas para usar y una capa de plantillas para organizarlas.
Ver esta categoríaUn conjunto premium de bloques de email responsive, para que tu primera plantilla sea una composición y no una construcción.
Añade una capa de plantillas al editor: guarda, lista y reabre los diseños de los que parten tus usuarios.
Superficies de edición extra para quien quiere llegar al marcado.
Ver esta categoríaPersiste los proyectos del editor en Firebase cuando prefieres no escribir antes un endpoint de almacenamiento.
Guarda los proyectos a través de Directus, manteniendo las plantillas junto al resto de tu modelo de contenido.
Las imágenes del email tienen que alojarse en algún sitio que controles.
Ver esta categoríaCanaliza la selección de imágenes por Cloudinary, de modo que las imágenes del email se alojan y transforman en tu cuenta.
Añade un flujo de subida al gestor de recursos para equipos que meten sus propias imágenes en los emails.
Cuatro combinaciones a partir de los productos de arriba. Cada una es un punto de partida: cambia cualquier capa por tu propia implementación cuando la tengas.
Para campañas y envío de newsletters
Para edición de cara al cliente dentro de tu producto
Ver la arquitectura SaaSPara recibos, notificaciones y correo del sistema
Ver la gestión de plantillasPara sistemas de marca reutilizables por cliente
Los precios se toman en vivo del catálogo y pueden cambiar.
Seis formatos cubren casi todo lo que se construye primero. Léelos como briefings para tu propia biblioteca de bloques, no como un catálogo.
El primer mensaje tras el registro. Una única acción clara, mínima decoración y contenido que siga teniendo sentido una semana después si se envía con retraso.
Estructura repetida: cabecera, una serie de historias, pie. La plantilla que más gana con bloques reutilizables, porque se rehace en cada número.
Anuncios de funciones y notas de versión. Suele ser una cabecera, dos o tres bloques de elemento y un enlace de vuelta al producto.
Diseño guiado por la oferta, con una cabecera potente, filas de producto y una llamada a la acción destacada. La plantilla que tu equipo de marketing querrá editar más a menudo.
Recibos, confirmaciones y avisos. Con mucho dato, casi todo generado, y donde más importan las etiquetas de combinación y las zonas bloqueadas.
Mensajes de recuperación para usuarios inactivos, normalmente con los enlaces de preferencias y baja más visibles de lo habitual.
Estas son descripciones de tipos de email habituales, no productos a la venta. Parte de uno de los presets de arriba y constrúyelos como bloques propios.
Guardar solo el HTML es el error que conviene evitar: es precisamente la única representación que no puedes volver a editar con fiabilidad.
JSON
El estado propio del proyecto en el editor. Guárdalo para que un usuario pueda reabrir un email tal como lo dejó. Es el artefacto que escribe tu gestor de almacenamiento.
MJML
Marcado legible que se revisa y se compara como código. Versiónalo cuando quieras un historial de qué cambió en una plantilla y no un historial de blobs.
HTML
Compilado, basado en tablas y con estilos en línea. Entrégalo a tu infraestructura de envío y guarda la copia exacta de lo enviado como registro.
editor.getProjectData(); // JSON - you store this
editor.runCommand('mjml-code'); // MJML - you version this
editor.runCommand('mjml-code-to-html'); // HTML - you send thisGuarda los tres. El JSON mantiene el email editable, el MJML lo mantiene revisable y el HTML lo mantiene enviable.
Editor
Empieza con GrapesJS y el plugin de MJML. En este punto ya tienes un lienzo de email funcionando y puedes producir HTML.
Plantillas y bloques
Convierte tus emails actuales en bloques reutilizables y decide qué zonas pueden editar los usuarios y cuáles quedan bloqueadas.
Almacenamiento
Apunta el gestor de almacenamiento a tu API. Guarda el JSON del proyecto más los metadatos de plantilla: propietario, nombre, fecha de actualización, lo que tu producto necesite.
Previsualización y validación
Renderiza el HTML compilado para revisarlo y comprueba enlaces, imágenes y contenido obligatorio antes de que nada entre en la cola de entrega.
Exportación y entrega
Compila a HTML y entrégalo a tu ESP o a tu propio servicio de envío; después devuelve las métricas resultantes a tus informes.
Los pasos 1 y 5 los resuelven en gran medida los paquetes de esta página. En los pasos 2 a 4 es donde viven los requisitos reales de tu producto.
Núcleo independiente del framework más el plugin oficial de MJML. Si trabajas con React o Next.js, tienes debajo la configuración específica de cada uno.
npm install grapesjs grapesjs-mjmlimport grapesjs from 'grapesjs';
import grapesjsMjml from 'grapesjs-mjml';
import 'grapesjs/dist/css/grapes.min.css';
// The editor core plus the official MJML plugin. Both BSD-3-Clause.
const editor = grapesjs.init({
container: '#email-editor',
fromElement: true,
plugins: [grapesjsMjml],
pluginsOpts: {
[grapesjsMjml]: {
// Serve the drag-in placeholder from your own CDN, not a third party.
imagePlaceholderSrc: 'https://cdn.your-app.com/email/placeholder.png',
},
},
});Con el editor montado, tres comandos te dan los tres artefactos:
// 1 - the MJML source the editor is currently holding.
const mjml = editor.runCommand('mjml-code');
// 2 - the compiled, table-based, CSS-inlined HTML you actually send.
const { html } = editor.runCommand('mjml-code-to-html');
// 3 - store all three; hand only the HTML to your sending provider.
await fetch(`/api/campaigns/${campaignId}/template`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
project: editor.getProjectData(), // re-openable in the editor
mjml, // diffable source of truth
html, // what your provider receives
}),
});Si no quieres un paso de compilación, el preset de newsletter es el camino más antiguo y sencillo: bloques de tabla con un inliner de CSS y sin MJML:
import newsletter from 'grapesjs-preset-newsletter';
// The pre-MJML path: table blocks and a CSS inliner, no compile step.
const editor = grapesjs.init({
container: '#email-editor',
plugins: [newsletter],
pluginsOpts: {
'grapesjs-preset-newsletter': { inlineCss: true },
},
});
const html = editor.runCommand('gjs-get-inlined-html');Versiones verificadas el 2026-08-27: grapesjs 0.23.6, grapesjs-mjml 1.0.8, grapesjs-preset-newsletter 1.0.2.
La pregunta rara vez es si podrías construir un editor. Es qué partes de uno merecen el tiempo de tu equipo.
| Capa | Desde cero | GrapesJS + GJS.Market |
|---|---|---|
| Lienzo del editor | Lo construyes y mantienes tú | Núcleo de código abierto, BSD-3-Clause |
| Arrastrar y soltar | Lo construyes y mantienes tú | Incluido |
| Marcado de email | Las rarezas de los clientes las resuelves tú | MJML con grapesjs-mjml |
| Bloques y componentes | Cada bloque es trabajo de ingeniería | Plugins, más los tuyos con la misma API |
| Almacenamiento y recursos | Lo construyes y mantienes tú | Plugins, o tu propio endpoint |
| Backend, base de datos y ESP | Tuyos | Tuyos — sin cambios |
| Mantenimiento continuo | El editor entero | Tus extensiones |
Construye tu producto de email, no otro editor de email desde cero.
La edición de email no es solo una decisión de ingeniería. Dónde vive cambia cómo se usa tu producto.
Los cambios rutinarios de texto, imagen y maquetación dejan de llegar como tickets, porque quien los quiere puede hacerlos.
La creación de emails se queda dentro de tu aplicación en lugar de mandar a los usuarios a otra herramienta y de vuelta.
La edición avanzada, las bibliotecas de plantillas o los controles de marca pueden ir en planes superiores, porque controlas la función en vez de revender la de otro.
Plantillas, normas de marca e historial se acumulan dentro de tu plataforma, lo que la convierte en el sitio natural para seguir trabajando.
Sin cuota de plataforma por puesto o por envío interpuesta entre tu crecimiento y tu margen.
Destinatarios, plantillas y contenido de campañas viven en tu base de datos, lo que simplifica tanto las respuestas de cumplimiento como las migraciones.
Estos son los resultados hacia los que trabajan los equipos. No publicamos cifras de conversión ni de ahorro de tiempo que no hayamos medido.
Esta página está escrita para quienes tienen que decidir si la edición de email se compra, se alquila o se construye.
Lanza la edición de email sin financiar primero la infraestructura de editor que hay debajo.
Mantén el modelo de datos, el alojamiento y la ruta de entrega dentro de decisiones que ya controlas.
Haz del email una función nativa con tu propia experiencia de uso, y no una superficie de terceros incrustada.
Amplía una API de editor documentada con bloques, componentes y comandos propios.
Lleva el email promocional y el transaccional con una sola biblioteca de bloques y un solo conjunto de normas de marca.
Construye sistemas de email de marca reutilizables por cliente sin costes de plataforma por puesto.
Bloques propios, integraciones, almacenamiento, interfaz de marca blanca o una implementación completa de editor de email: podemos construirlo alrededor de tu producto y no a su lado.
Esta página trata de GrapesJS y MJML como base. Estas cubren las preguntas vecinas.
La misma base integrada en una aplicación React, con el ciclo de vida del componente bien resuelto.
Construir un editor de email en ReactLa experiencia de edición en sí: qué ven tus usuarios no técnicos y cómo se comporta.
Ver la edición de email visualCrear, guardar y reutilizar plantillas entre equipos y campañas.
Gestionar plantillas de emailEl caso general: incrustar un editor visual de cualquier tipo dentro de un producto SaaS.
Incrustar un editor visualEmpieza con GrapesJS y MJML, y añade después los plugins y las integraciones que tu producto necesite.
Presets, bloques, almacenamiento, recursos y exportación: productos reales con precios en vivo.
Ver plugins de emailInstala el núcleo de código abierto y el plugin de MJML, y ten un lienzo de email funcionando hoy mismo.
Leer el tutorialBloques propios, integraciones o un editor de email completo construido alrededor de tu producto.
Hablemos de tu proyectoSeguir leyendo