Crea un Generador de Plantillas de Correo con GrapesJS

Abre una plantilla de la estantería, cámbiala y guárdala como una nueva. La estantería crece en uno. Ese bucle —no los diseños individuales— es lo que ofrece un creador de plantillas de correo electrónico a tus usuarios.

La demo del editor MJML publicada por el propio proyecto GrapesJS. Añade una sección, edita el texto y luego mira el marcado generado.

Un generador de plantillas de correo permite a las personas crear y cambiar la disposición de los correos de forma visual en lugar de escribir a mano el marcado HTML de correo. Una *biblioteca* de plantilla envía diseños terminados; un *creador* de plantillas ofrece la capacidad de crearlos — y de seguir haciéndolos después de que los hayas enviado.

Las plantillas ofrecen a tus usuarios un punto de partida. Un constructor les da control.

Una biblioteca es una estantería con techo: cubre lo que fue construida para cubrir, y las peticiones por encima de esa línea no tienen a dónde ir. Un constructor es un bucle — y la estantería crece cada vez que alguien la rodea.

• "Necesitamos un correo de bienvenida limpio para el viernes."

  Cubierto✓

  Biblioteca de plantillas

  Resuelto. Para esto es exactamente para lo que sirve una buena biblioteca: elige una, cambia las palabras, envía.

  Cubierto✓

  Generador de plantillas

  También resuelto, desde los mismos puntos de partida. Un constructor nave con una biblioteca dentro.

• "Cada inquilino necesita su propio fundamento legal."

  No cubierto–

  Biblioteca de plantillas

  Un pie de página compartido, o un fork de cada plantilla por inquilino.

  Cubierto✓

  Generador de plantillas

  Un bloque de pie de página, guardado una vez por inquilino y reutilizado en sus plantillas.

• "Poned el pedido real del cliente en el recibo."

  No cubierto–

  Biblioteca de plantillas

  Texto estático provisional. Los datos tienen que empalmarse aguas abajo.

  Cubierto✓

  Generador de plantillas

  Un componente vinculado a tu modelo de pedidos, editable como bloque y resuelto en el momento de enviar.

• "Restaura la versión que enviamos el martes pasado."

  No cubierto–

  Biblioteca de plantillas

  Lo que sea que se haya sobrescrito es lo que tienes.

  Cubierto✓

  Generador de plantillas

  Una fila de versiones. La restauración es una consulta, no un proyecto arqueológico.

• "Deja que nuestros clientes construyan los suyos propios, sin enviarnos correos."

  No cubierto–

  Biblioteca de plantillas

  No es lo que hace una biblioteca — no tiene una superficie de autoría.

  Cubierto✓

  Generador de plantillas

  El objetivo principal. Tus usuarios crean y mantienen plantillas que nunca ves.

Envía la biblioteca. Luego envía lo que haga más de ellos.

La superficie de edición que obtienen tus usuarios, y las partes de ella que controlas.

Da a los usuarios una biblioteca de secciones para ensamblar, en lugar de hacer que empiecen cada correo desde un lienzo vacío. Cada una es una definición de bloque que registras una vez.

• Cabecera

  Logo, texto del preencabezado y la fila de navegación, si usas alguno.

• Portada

  La declaración inicial y la primera llamada a la acción.

• Cuadrícula de productos

  Una fila o cuadrícula de artículos, vinculados a tu catálogo donde quieres que estén vivos.

• Lista de características

  Filas cortas de iconos y texto para notas de lanzamiento y incorporación.

• Precios

  Comparación de planos diseñada para sobrevivir a un renderizador basado en tablas.

• Testimonio

  Una cita, una atribución y un avatar opcional.

• Llamada a la acción

  Un botón antibalas que se renderiza sin imágenes de fondo.

• Pie de página

  Dirección, enlace de preferencias y el enlace de baja que legalmente debes incluir.

Los bloques estándar cubren la distribución. Lo que hace que el constructor sea tuyo son los componentes que conocen tus datos: un pedido, una suscripción, una reserva, una recomendación.

1. Estándar
2. ↓Compuesta
3. ↓Bound
4. ↓Tu modelo de datos

El editor renderiza un marcador de posición mientras se escribe la plantilla. Tu backend intercambia los valores reales en el momento de enviar.

En un sistema de plantillas, las plantillas difieren según quién las posee y quién puede cambiarlas — no solo por lo que dicen. Estas son las clases que merece la pena modelar desde el primer día.

Estas son clases de propiedad en un sistema de plantillas, no productos a la venta. GJS.Market lista plugins y preajustes para editores; no vende plantillas de correo electrónico.

Previsualiza el diseño en el ancho en el que realmente se renderiza el correo electrónico, mientras aún lo estás editando. 600px es la convención de larga data para la columna del cuerpo — una convención, no una especificación.

Dos columnas en un cliente de escritorio, apiladas en un teléfono — decididas en la plantilla, no por la suposición del cliente del destinatario.

Los clientes de correo electrónico implementan HTML y CSS de forma diferente, y siempre lo han hecho. Un constructor visual no elimina eso: estandariza el paso de autoría para que salga el mismo marcado conocido de bueno cada vez.

Restricciones verificadas en 2026-08-28. Cambios de comportamiento; Comprobar caniemail.com el estado actual y probar los correos de producción con los clientes que tu propia audiencia realmente utiliza.

mjml existe para que el marcado de correo responsivo sea algo que generes en lugar de mantenerlo a mano. GrapesJS puede extenderse con grapesjs-mjml para poner una superficie de edición visual encima.

La pregunta que decide si tienes un constructor o un visor: ¿qué filas existen después de que un usuario haga clic en Guardar? Tres tablas lo cubren.

El editor es un cliente. Pide a tu API una plantilla y te la devuelve; nunca aprende quiénes son tus inquilinos y nunca tiene la única copia de nada.

// Storage scoped to the tenant AND the template. The editor never learns who
// the tenant is — your API does, from the session, and refuses everything else.
editor.Storage.add('remote', {
  async load({ templateId }) {
    const res = await fetch(`/api/templates/${templateId}/project`);
    return res.json();
  },
  async store(project, { templateId }) {
    await fetch(`/api/templates/${templateId}/project`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(project),
    });
  },
});

Integra el editor con el backend que ya ejecutas, en lugar de mover tu flujo de trabajo de correo a la plataforma de otra persona. GJS.Market vende plugins de editor — no aloja tus plantillas ni envía tu correo.

En el momento en que un segundo cliente guarda una plantilla, la propiedad deja de ser un detalle. Tres niveles cubren casi todos los productos.

El mismo sistema de plantillas, apuntando a diferentes trabajos.

El lienzo de edición es la parte visible. El resto es un sistema de plantillas — y el resto es donde va el tiempo.

De qué está hecho un sistema de plantillas

• Lienzo del editor
• Arrastrar y soltar
• Registro de bloques
• Modelo de componentes
• Controles de estilo
• Vista previa responsiva
• Gestión de activos
• CRUD de plantilla
• Versionado y restauración
• Validación de etiquetas de fusión
• Alcance del inquilino
• Deshacer y volver a hacer
• Exportación HTML
• Compilación MJML
• Pruebas continuas para clientes

GrapesJS te da la capa de edición. El sistema de plantillas encima — propiedad, versionado, arrendamiento — es tuyo, y debe serlo: es la parte que encaja con tu producto.

Listados reales del catálogo, agrupados por el trabajo que realizan dentro de un sistema de plantillas. Los nombres y precios vienen directamente del mercado, así que nada aquí puede desviarse de lo que realmente está a la venta.

La propia biblioteca

Guardar, listar y reabrir plantillas — el tema de esta página.

Explora esta categoría

Plantillas

Templates Manager

Añade la superficie de guardar, listar y reabrir que necesita una biblioteca de plantillas, para que los usuarios no gestionen las plantillas en una hoja de cálculo.

39,00 US$Plugin de visualización

Puntos de partida

Lo que empieza una nueva plantilla antes de que nadie haya guardado una.

Explora esta categoría

Preset

MJML Preset

Incorpora componentes MJML al editor, compilados en tiempo real, para que se genere un marcado responsivo en lugar de escrito a mano.

GratisPlugin de visualización

Preset

Newsletter Preset

El camino pre-MJML: bloques de correo electrónico basados en tablas y un inliner CSS, sin paso de compilación intermedio.

GratisPlugin de visualización

Bloques

Las secciones se ensamblan y vuelven a montar una plantilla.

Explora esta categoría

Bloques

GrapesJS Email Blocky – Premium Responsive Email Blocks

Un gran conjunto de bloques seguros para correo electrónico, para que tus usuarios empiecen desde secciones reales en lugar de una columna vacía.

69,00 US$Plugin de visualización

La escotilla de escape

Para la parte de una plantilla que tiene que estar escrita a mano.

Explora esta categoría

Código

Grapesjs Component Code Editor

Permite a un desarrollador editar el HTML y CSS de un componente seleccionado, sin abrir toda la plantilla.

GratisPlugin de visualización

Dónde viven las plantillas

Conectar el almacenamiento del editor a un backend que controlas.

Explora esta categoría

Almacenamiento

Grapesjs Firebase Storage

Persiste los datos del proyecto en Firebase, claves según la clave que tu app tenga sus plantillas.

GratisPlugin de visualización

Almacenamiento

Directus Storage

Persiste los datos del proyecto en Directus, lo cual es conveniente cuando las plantillas están junto a tu otro contenido.

GratisPlugin de visualización

Recursos

Las imágenes a las que una plantilla hace referencia, que deben sobrevivir a la plantilla.

Explora esta categoría

Recursos

Grapesjs Cloudinary

Apunta al gestor de activos en Cloudinary, así que las imágenes plantilla se transforman y se sirven desde un solo lugar.

GratisPlugin de visualización

Subidas

Grapesjs Uppy

Añade un flujo de carga más completo para las imágenes que tus usuarios introducen en una plantilla.

GratisPlugin de visualización

Traspaso

Sacar una plantilla terminada del sistema.

Explora esta categoría

Exportación

Export Zip

Empaqueta la salida renderizada para la transferencia a un sistema que espera archivos en lugar de una llamada a la API.

GratisPlugin de visualización

Cuatro combinaciones que ya funcionan juntas, elegidas por la biblioteca de plantillas que estás creando.

Los precios se leen en directo desde el catálogo en el momento de la compilación.

GrapesJS es la capa de edición y se detiene en el HTML. Todo lo que viene después es tu backend y el proveedor al que ya pagas — no hay envío integrado en el editor, y aquí no se implica ninguno.

El núcleo del editor más el plugin oficial de MJML. Ambos son BSD-3-Clause.

import grapesjs from 'grapesjs';
import grapesjsMjml from 'grapesjs-mjml';
import 'grapesjs/dist/css/grapes.min.css';

// One editor instance per template being edited. The template id — not a page
// id — is what every load and store call is keyed by.
const editor = grapesjs.init({
  container: '#template-editor',
  plugins: [grapesjsMjml],
  pluginsOpts: {
    [grapesjsMjml]: {
      imagePlaceholderSrc: 'https://cdn.your-app.com/email/placeholder.png',
    },
  },
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
  },
});

// "Save as new template" — a row your customer owns from now on.
async function saveAsTemplate(name) {
  const res = await fetch('/api/templates', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name,
      project: editor.getProjectData(), // re-openable in the editor
    }),
  });
  return res.json(); // { id, name, version: 1 }
}

// Editing an existing template appends a version rather than overwriting it,
// so "restore the version we sent last Tuesday" stays a query, not a restore.
async function saveVersion(templateId) {
  await fetch(`/api/templates/${templateId}/versions`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ project: editor.getProjectData() }),
  });
}

1. Instala el núcleo y el plugin MJML
2. →Monta el editor, con clave por id de plantilla
3. →Registra tus bloques y componentes acotados
4. →Haz el almacenamiento por cable a tu propia API
5. →Añadir guardar como plantilla y versionado
6. →Entrega el HTML renderizado a tu proveedor

Los detalles del framework están en sus propias páginas — esta página se mantiene neutral en cuanto al framework a propósito.

Equipos que necesitan que la creación de correos se haga dentro de su producto en lugar de al lado.

Esta página trata sobre el sistema de plantillas. Estas cubren las preguntas vecinas.

Empieza con GrapesJS, adapta la experiencia de edición a tu producto y amplíala con los plugins que tu sistema de plantillas necesita.

Lecturas relacionadas