PageKit: el creador de sitios GrapesJS autoalojado, con el código fuente incluido. Obtener acceso anticipado

GrapesJS + MJML

Crea tu propio editor de email con GrapesJS

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.

Código abiertoNúcleo BSD-3-ClauseMJML con grapesjs-mjmlAutoalojado$0 de cuota de plataforma

26k+

Estrellas en GitHub

100+

Plugins en GJS.Market

10 años

Desarrollo activo

$0

Coste de licencia, siempre

Por qué construirlo tú

Un editor de email son doce subsistemas, no un lienzo

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

  • Motor de diseño responsive
  • Inlining de CSS
  • Marcado condicional para Outlook
  • Variantes en modo oscuro
  • Etiquetas de combinación y personalización
  • Enlaces de baja y preferencias
  • Alojamiento de imágenes y píxeles de seguimiento
  • Versionado de plantillas
  • Borradores y autoguardado
  • Reglas de roles y permisos
  • Entrega al proveedor
  • Pruebas de renderizado por cliente

Construir el editor desde cero

Meses

  • Cada subsistema de arriba es tuyo
  • Las rarezas del email entran en tu hoja de ruta
  • Cada bloque nuevo es trabajo de ingeniería
  • El mantenimiento no termina nunca
  • Nada de esto es tu producto

Partir de GrapesJS

Días

  • El lienzo, los bloques y los estilos ya existen
  • MJML resuelve el marcado propio del email
  • Hay plugins para almacenamiento, recursos y exportación
  • Amplías en lugar de crear desde cero
  • Tu equipo construye el producto a su alrededor

Tu editor de email debería girar en torno a tu producto, y no al revés.

Por qué MJML

¿Por qué usar MJML para email?

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.

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.

Diseño responsive, compilado

El apilado de columnas y las media queries los produce el compilador, en lugar de mantenerse a mano en cada plantilla.

Estilos en línea por ti

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.

Una capa de autoría sensata

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.

Al final sigue siendo HTML

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.

Código abierto en ambas mitades

mjml es MIT; el plugin grapesjs-mjml que lo integra en GrapesJS es BSD-3-Clause. Ninguno añade coste de licencia.

MJML frente a HTML puro

Lo que hace el compilador y de otro modo harías tú

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.

AspectoMJMLHTML escrito a mano
Diseño responsiveGenerado desde los componentesMantenido a mano en cada plantilla
Componentes propios del emailLos aporta el lenguajeLos construyes y mantienes tú
CSS inlineParte del paso de compilaciónUna herramienta aparte en tu proceso
Rarezas de los clientesSe tratan en el compilador, de forma centralSe tratan en cada plantilla
AutoríaMarcado semántico, diffs legiblesTablas anidadas, más difícil de revisar
Edición visualLos componentes encajan bien como bloquesMás trabajo de adaptación por bloque
SalidaHTMLHTML

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.

El flujo

¿Qué produce tu editor de email?

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.

  1. Etapa 01

    Editor visual

    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()
  2. Etapa 02

    MJML

    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')
  3. Etapa 03

    HTML responsive

    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')
  4. Etapa 04

    Tu ESP o tu API

    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/send
GrapesJS se ocupa de la capa de edición visual. Tu aplicación controla usuarios, plantillas, datos, almacenamiento y entrega.
Propiedad

Tu editor de email. Tus datos. Tu infraestructura.

El 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

  • Campañas y programación
  • Lista de suscriptores y segmentos
  • Dominio de envío y DKIM

Editor de email GrapesJS

  • Lienzo y bloques
  • Componentes MJML
  • Gestor de estilos
  • Bloques de email
  • Gestor de plantillas
  • Subida de recursos
Ver plugins de email

Tu infraestructura

  • Tu base de datos
  • Tu almacenamiento de medios
  • Tus credenciales de proveedor
Nada de este diagrama exige que un tercero custodie tus plantillas ni tus destinatarios.

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

Demo en vivo

Prueba un editor de email GrapesJS antes de construir el tuyo

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.

Abrir en una pestaña nueva

La demo del editor de newsletters de código abierto de grapesjs.com: arrastra bloques, edita contenido y exporta el HTML.

grapesjs.com/demo-newsletter-editor.htmlGratis

Carga una demo externa desde grapesjs.com

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.

El flujo de trabajo

De la plantilla al email enviado

  1. 1
    Paso 1

    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.

  2. 2
    Paso 2

    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.

  3. 3
    Paso 3

    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.

  4. 4
    Paso 4

    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.

  5. 5
    Paso 5

    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ó.

  6. 6
    Paso 6

    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.

Casos de uso

¿Qué puedes construir?

La misma base, apuntada a productos distintos. Cada uno es el editor más tu propio almacenamiento, permisos y entrega.

Por qué GrapesJS

¿Por qué usar GrapesJS para email?

GrapesJS 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.

Código abierto

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.

Autoalojado

El editor se ejecuta dentro de tu propia aplicación. Ningún tercero se interpone entre tus usuarios y sus plantillas.

Extensible

Bloques, componentes, comandos y paneles son puntos de extensión. Un bloque de email a medida es un plugin, no un fork.

Compatible con MJML

grapesjs-mjml, mantenido en la organización de GrapesJS, incorpora los componentes MJML al editor como bloques de primera clase.

Interfaz personalizable

Paneles, iconos y tema son tuyos para cambiarlos, de modo que el editor parezca parte de tu producto y no una herramienta incrustada.

Ecosistema de plugins

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.

GrapesJS frente a editores de email alojados

GrapesJS frente a Unlayer y Stripo

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.

AspectoGrapesJSUnlayerStripo Plugin
Código disponible y abiertoSí — BSD-3-ClauseNot publicly documentedNot publicly documented
Nivel gratuitoEl editor entero, $0Plan gratuito, $0Plan gratuito, $0
Planes de pagoNinguno — los plugins son pago único$250/mo / $750/mo / $2,000/mo$100/mo / $550/mo
Autoalojar el editorSiempre — se ejecuta en tu appOn-premise en EnterpriseComponentes de servidor en Enterprise
MJML como capa de autoríaSí — grapesjs-mjmlNot publicly documentedNot publicly documented
Plantillas en tu base de datosSí — la capa de almacenamiento la escribes túDepende del plan y del despliegueDepende 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.

Ecosistema de plugins

Amplía tu editor de email con plugins de GJS.Market

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.

Stacks recomendados

Monta el stack de editor de email que necesitas

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.

Los precios se toman en vivo del catálogo y pueden cambiar.

Por dónde empiezan los equipos

Empieza con un email ya hecho

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.

Bienvenida

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.

Newsletter

Estructura repetida: cabecera, una serie de historias, pie. La plantilla que más gana con bloques reutilizables, porque se rehace en cada número.

Novedades de producto

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.

Promocional

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.

Transaccional

Recibos, confirmaciones y avisos. Con mucho dato, casi todo generado, y donde más importan las etiquetas de combinación y las zonas bloqueadas.

Reactivación

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.

Formatos de salida

Tres artefactos, tres funciones

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

Guardar y restaurar proyectos

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

La representación de autoría

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

Lo que realmente envías

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.

output.jsJS
editor.getProjectData();                // JSON - you store this
editor.runCommand('mjml-code');         // MJML - you version this
editor.runCommand('mjml-code-to-html'); // HTML - you send this

Guarda los tres. El JSON mantiene el email editable, el MJML lo mantiene revisable y el HTML lo mantiene enviable.

Plan de implementación

Cómo construir un editor de email

  1. 1
    01

    Editor

    Empieza con GrapesJS y el plugin de MJML. En este punto ya tienes un lienzo de email funcionando y puedes producir HTML.

  2. 2
    02

    Plantillas y bloques

    Convierte tus emails actuales en bloques reutilizables y decide qué zonas pueden editar los usuarios y cuáles quedan bloqueadas.

  3. 3
    03

    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.

  4. 4
    04

    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.

  5. 5
    05

    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.

Inicio rápido

Empieza a construir en minutos

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-mjml
editor.jsJS
import 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:

export.jsJS
// 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:

newsletter.jsJS
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.

Construir o adoptar

¿Construir un editor de email desde cero o usar GrapesJS?

La pregunta rara vez es si podrías construir un editor. Es qué partes de uno merecen el tiempo de tu equipo.

CapaDesde ceroGrapesJS + GJS.Market
Lienzo del editorLo construyes y mantienes túNúcleo de código abierto, BSD-3-Clause
Arrastrar y soltarLo construyes y mantienes túIncluido
Marcado de emailLas rarezas de los clientes las resuelves túMJML con grapesjs-mjml
Bloques y componentesCada bloque es trabajo de ingenieríaPlugins, más los tuyos con la misma API
Almacenamiento y recursosLo construyes y mantienes túPlugins, o tu propio endpoint
Backend, base de datos y ESPTuyosTuyos — sin cambios
Mantenimiento continuoEl editor enteroTus extensiones

Construye tu producto de email, no otro editor de email desde cero.

Valor de producto

Convierte la edición de email en una función de producto

La edición de email no es solo una decisión de ingeniería. Dónde vive cambia cómo se usa tu producto.

Menos peticiones a ingeniería

Los cambios rutinarios de texto, imagen y maquetación dejan de llegar como tickets, porque quien los quiere puede hacerlos.

Un producto más completo

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.

Espacio para planes premium

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.

Más motivos para quedarse

Plantillas, normas de marca e historial se acumulan dentro de tu plataforma, lo que la convierte en el sitio natural para seguir trabajando.

Coste predecible

Sin cuota de plataforma por puesto o por envío interpuesta entre tu crecimiento y tu margen.

Los datos siguen siendo tuyos

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.

Para quién es

Pensado para equipos que necesitan edición de email

Esta página está escrita para quienes tienen que decidir si la edición de email se compra, se alquila o se construye.

Fundadores de SaaS

Lanza la edición de email sin financiar primero la infraestructura de editor que hay debajo.

CTO y arquitectos

Mantén el modelo de datos, el alojamiento y la ruta de entrega dentro de decisiones que ya controlas.

Equipos de producto

Haz del email una función nativa con tu propia experiencia de uso, y no una superficie de terceros incrustada.

Desarrolladores

Amplía una API de editor documentada con bloques, componentes y comandos propios.

Equipos de ecommerce

Lleva el email promocional y el transaccional con una sola biblioteca de bloques y un solo conjunto de normas de marca.

Agencias

Construye sistemas de email de marca reutilizables por cliente sin costes de plataforma por puesto.

Desarrollo a medida

¿Necesitas un editor de email a medida?

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.

Soluciones relacionadas

¿Buscas algo más concreto?

Esta página trata de GrapesJS y MJML como base. Estas cubren las preguntas vecinas.

Preguntas frecuentes

Preguntas frecuentes

Empezar

Crea tu propio editor de email

Empieza con GrapesJS y MJML, y añade después los plugins y las integraciones que tu producto necesite.

Empieza aquí

Ver plugins de email

Presets, bloques, almacenamiento, recursos y exportación: productos reales con precios en vivo.

Ver plugins de email
Gratis

Empieza con GrapesJS

Instala el núcleo de código abierto y el plugin de MJML, y ten un lienzo de email funcionando hoy mismo.

Leer el tutorial
Lo hacemos por ti

¿Necesitas desarrollo a medida?

Bloques propios, integraciones o un editor de email completo construido alrededor de tu producto.

Hablemos de tu proyecto