Constructor de correo electrónico de arrastrar y soltar para equipos de producto reales

Edición visual moderna de correo electrónico con GrapesJS + MJML, totalmente propiedad de tu stack

Edición de correo electrónico lista para producción

Lanza un generador de correo electrónico moderno en el que tus usuarios puedan confiar

Combina GrapesJS con plugins MJML para ofrecer edición de arrastrar y soltar, resultados responsivos y la propiedad total de plantillas, datos e integraciones. No hay impuesto por envío de plataforma, ni puertas ocultas de funcionalidades, ni bloqueo.

100% de propiedad

Arquitectura y datos autoalojados

Listo para MJML

Salida responsiva para clientes principales

API-flexible

Funciona con cualquier flujo de trabajo ESP

Rápido para enviar

Ecosistema de plugins para necesidades comunes

Por qué usar GrapesJS para el correo electrónico — 5 razones por las que no hay herramientas alojadas

No hay precio por envío

Los creadores de correos alojados suelen cobrar por correo enviado o por suscriptor. Con GrapesJS, el constructor es tuyo: intégralo con cualquier ESP y paga solo por lo que envíes.

Posee tus datos

Las plantillas de correo, las preferencias de usuario e historial de exportaciones permanecen en tu infraestructura. No hay acceso de terceros a tus plantillas ni a tus datos de clientes.

Bloques personalizados

Crea bloques personalizados ilimitados adaptados a tu marca — tarjetas de producto, banners de eventos, zonas de contenido dinámicas — con control total sobre la salida HTML.

Autoalojado

Despliega el creador de correo electrónico en tu propio servidor, VPS o entorno en la nube. Sin dependencia de SaaS, sin cambios en los niveles de precios, sin bloqueo de funcionalidades.

Integrar con cualquier API

Conéctate directamente con Mailchimp, SendGrid, Postmark o tu propio servicio de correo electrónico. GrapesJS es agnóstico: la salida es HTML limpio y MJML.

Para quién es mejor este constructor

Equipos de producto SaaS

Añade un editor de plantillas dentro de la app para que los clientes puedan diseñar correos de ciclo de vida, de incorporación y de marketing sin soporte técnico.

Agencias y estudios

Crea sistemas de plantillas de marca reutilizables con secciones bloqueadas, zonas editables y exportaciones listas para aprobar.

Equipos de crecimiento interno

Ejecuta campañas más rápidas con módulos preaprobados, restricciones de edición más seguras y resultados responsivos consistentes.

Integración MJML — Por qué resuelve el renderizado de correos electrónicos

El HTML del correo electrónico es notoriamente difícil de transmitir correctamente entre clientes. Gmail elimina ciertas propiedades de CSS. Outlook utiliza el motor de renderizado de Microsoft Word. Apple Mail vuelve a manejar las cosas de forma diferente. El resultado: los desarrolladores pasan horas depurando diseños basados en tablas que parecen rotos en un cliente u otro.

MJML soluciona esto proporcionando un conjunto de componentes semánticos — mj-section, mj-column, mj-text, mj-image — que se compilan en layouts de tablas HTML probados. El plugin GrapesJS MJML asigna estos componentes a bloques arrastrables, ofreciendo a tus usuarios un editor visual que genera automáticamente HTML de correo responsivo entre clientes.

Compatibilidad con GmailCompleto
Soporte para OutlookCompleto (a través de tablas)
Apple MailCompleto
Móvil responsivoEmpotrado
Salida HTML limpia

Inicialización de presets de correo electrónico GrapesJS

El siguiente ejemplo inicializa GrapesJS con el plugin de presets de boletín y demuestra cómo recuperar la salida de HTML, CSS y MJML del editor.

editor-setup.ts
import grapesjs from 'grapesjs';
import grapesjsNewsletterPlugin from 'grapesjs-preset-newsletter';
import { loadFunnelTranslations } from '@/lib/i18n-page';
import type { GetStaticProps } from 'next';
import { useTranslation } from 'next-i18next';

const editor = grapesjs.init({
  container: '#editor',
  plugins: [grapesjsNewsletterPlugin],
  pluginsOpts: {
    [grapesjsNewsletterPlugin]: {
      // Newsletter plugin options
      modalLabelImport: 'Paste all your code here below and click import',
      modalLabelExport: 'Copy the code and use it wherever you want',
    },
  },
  storageManager: false,
});

// Get HTML output
const html = editor.getHtml();
const css = editor.getCss();

// Get MJML output (with MJML plugin)
const mjml = editor.runCommand('mjml-export');

Plugins de Email Builder en GJS.Market

Correo electrónicoGratis

GrapesJS MJML

Crea plantillas de correo electrónico responsivas basadas en MJML con arrastrar y soltar

PresetGratis

Preset del boletín

Bloques de boletines, secciones y disposiciones de columnas preconstruidos

AvanceGratis

Plugin de Vista previa de correo electrónico

Previsualizar correos electrónicos en los viewports de escritorio y móviles

DinámicaGratis

Bloques de contenido dinámicos

Soporte para etiquetas de fusión y bloques de contenido condicional

ExportaciónGratis

Plugin de exportación ESP

Exportar plantillas directamente a Mailchimp, SendGrid o Postmark

CSSGratis

Inliner de correo electrónico HTML

CSS en línea automáticamente para máxima compatibilidad con clientes de correo electrónico

Hoja de ruta práctica para el lanzamiento

Paso 01

Incrustar el editor

Instala GrapesJS en tu app con boletín y plugins de MJML para que los usuarios puedan empezar desde bloques seguros para correo electrónico.

Paso 02

JSON del proyecto Store

Guarda editor.getProjectData() para guardado automático, historial de versiones y restauración de borradores entre sesiones.

Paso 03

Exportar y validar

Compila a HTML/MJML, CSS en línea y ejecuta previsualizaciones del cliente antes de pasarlas a tu ESP.

Paso 04

Integraciones de naves

Conecta APIs de Mailchimp, SendGrid, Postmark o internas para sincronizar plantillas y flujos de trabajo de campaña.

Formatos de salida de correo electrónico

HTML

Más compatibles

Salida HTML estándar con estilos en línea. Compatible con todos los clientes de correo. Utiliza editor.getHtml() y editor.getCss() para recuperar la salida.

MJML

Recomendado

MJML es un lenguaje de marcado que compila a HTML responsivo. Usando el plugin GrapesJS MJML, tus usuarios construyen con componentes MJML y exportan HTML limpio y seguro para clientes.

JSON

Para almacenamiento

GrapesJS almacena el lienzo como un árbol componente JSON. Utiliza editor.getProjectData() para guardar y restaurar plantillas de forma programática en tu base de datos.

Preguntas frecuentes

¿Listo para ofrecer una mejor experiencia de creación de correos electrónicos?

Explora plugins, integra el editor en tu producto y lanza un flujo de trabajo que tu equipo y usuarios realmente disfruten.