Añadir un editor de correo moderno sin necesidad de fijar el proveedor
Utiliza GrapesJS y React para lanzar una experiencia de correo electrónico de marca blanca que realmente disfruten tus usuarios. Crea plantillas visualmente, guarda tus datos en tu pila y exporta HTML limpio para cualquier proveedor.
Instantánea de lanzamiento
Lista para la producciónTiempo de preparación
< 30 min
Coste Núcleo
Licencia de 0 $
Formato de exportación
HTML + CSS
Renderizado
MJML listo
Lo que tus usuarios reciben el primer día
Compositor de plantilla visual
Arrastra bloques, edita, copia en línea y crea secciones reutilizables sin tocar el código.
Previsualizaciones responsivas
Cambia entre previsualizaciones de escritorio y móviles para detectar problemas de diseño antes de enviarlas.
Consistencia de marca
Bloquea logotipos, colores y zapatas legales mientras sigues dando libertad creativa a los clientes.
Colaboración segura
Controla quién puede editar, aprobar y publicar plantillas dentro de tu modelo de cuenta actual.
Oleoducto limpio de exportación
Envía automáticamente HTML/CSS generado a tu ESP, trabajador de cola o servicio de campaña.
No permiten licencias para trampas
Aloja y escala por tu cuenta sin que las comisiones de editor por asiento te afecten el margen.
Plan de implementación
Ver detalles de integración con React1. Montar el editor
Crea un componente envoltorio en el lado del cliente e inicializa GrapesJS en useEffect con un preajuste del boletín.
2. Sincronizar estado del contenido
Escucha los eventos de cambio y guarda HTML/CSS como borradores en tu API para guardar automáticamente e historial.
3. Añadir controles de equipo
Habilitar la publicación basada en roles para que los responsables de marketing puedan editar mientras los administradores gestionan secciones bloqueadas.
4. Entregar a gran escala
Empuja las plantillas exportadas a tu pipeline de campaña y ejecuta envíos de prueba antes del lanzamiento en producción.
Inicio rápido
Este fragmento inicial te da un editor de correo React funcional con ganchos de exportación en vivo.
import { useEffect, useRef } from 'react';
import grapesjs from 'grapesjs';
import grapesjsNewsletter from 'grapesjs-preset-newsletter';
import 'grapesjs/dist/css/grapes.min.css';
export default function EmailEditor({ onChange }) {
const editorRef = useRef(null);
useEffect(() => {
const editor = grapesjs.init({
container: editorRef.current,
plugins: [grapesjsNewsletter],
pluginsOpts: {
[grapesjsNewsletter]: {},
},
storageManager: false,
});
editor.on('change:changesCount', () => {
onChange?.({
html: editor.getHtml(),
css: editor.getCss(),
});
});
return () => editor.destroy();
}, []);
return <div ref={editorRef} style={{ height: '600px' }} />;
}Pila de plugins recomendada
Empieza con lean, luego añade capacidades que tus clientes más piden.
Preselección del boletín MJML
Constructor de correo MJML preparado para React
Envoltorio de correo electrónico de React
Componente React directo para edición de correo electrónico
Biblioteca de bloques de correo electrónico
Bloques de cabecera, pie de página, CTA y contenido
Exportador de HTML
Exportar HTML en línea para cualquier ESP
Vista previa responsiva
Prueba en tamaños móviles, tabletas y escritorios
Correos electrónicos en modo oscuro
Soporte automático para consultas de medios en modo oscuro
Matriz de decisión: GrapesJS vs Unlayer
| Característica | GrapesJS + GJS. Mercado | Unlayer (react-email-editor) |
|---|---|---|
| Código abierto | ✓ MIT | ✗ Propietario |
| Precios | Gratis | $149–$2.499/mes |
| Soporte para MJML | ✓ | ✗ |
| Autoalojado | ✓ | ✗ Solo alojado |
| Bloques personalizados | Ilimitado | Limitada |
| Marca blanca | ✓ Libre | ✓ Solo planes de pago |
Casos de uso de alto impacto
Enviar SaaS por correo electrónico
Crea un generador de plantillas de correo electrónico independiente como un producto SaaS con facturación de suscripción.
Plataforma CRM
Integra un diseñador de correo electrónico en tu CRM para que los usuarios puedan crear campañas sin salir de tu app.
Plataforma de marketing
Añade un editor de plantillas a tu herramienta de email marketing y deja que los usuarios diseñen sus propios boletines.
Lista de verificación previa al lanzamiento para equipos
Configurar el guardado automático y la gestión de versiones de plantillas
Secciones bloqueadas seguras para la marca (cabecera/pie de página/legal)
Prueba el renderizado de Gmail, Outlook y Apple Mail
Crea un flujo de aprobación antes de publicar la campaña
Análisis de uso de bloques para mejorar los valores predeterminados
Prepara texto de reserva para plantillas con muchas imágenes
Preguntas frecuentes
Explorar por categoría
Guías relacionadas
Construye tu experiencia en el correo esta semana
Elige tu pila de plugins iniciales, conecta tu editor y lanza un flujo de trabajo de plantilla de marca en el que tus usuarios confíen.