Crea un Constructor de Correos de React con GrapesJS

No es un editor alojado que alquilas, ni una galería de plantillas. Es una capa de edición que montas dentro de la aplicación que ya ejecutas.

Este lienzo es un componente de React que se ejecuta en esta página — sin paquete de editores, sin iframe. Añade un bloque, haz clic en cualquier sección para seleccionarlo, vuelve a escribir el texto en su sitio, restylearlo, reordenarlo y cambia la vista previa entre escritorio, tablet y móvil. Abre la pestaña HTML para ver qué tipo de marcado envía un creador de correo electrónico a tu código.

El preajuste del boletín: bloques seguros para correo electrónico, un gestor de estilos restringido y salida basada en tablas. Esto es lo más parecido a lo que verían tus usuarios.

Un creador de correo React es un editor visual que se ejecuta dentro de una aplicación React y permite a los usuarios crear y personalizar plantillas de correo electrónico sin necesidad de escribir a mano el marcado HTML de correo. No es un producto separado en el que tus usuarios inician sesión: es un componente de tu aplicación, por lo que las plantillas, las cuentas que las poseen y la infraestructura que las envía permanecen de tu lado.

El trabajo del editor termina en producir el marco. Todo lo que hay antes y después es tu solicitud.

En cada uno de estos casos, la alternativa es que un desarrollador edite una plantilla a mano cada vez que alguien en el negocio quiera un cambio.

Es la base de la edición, no el producto final. Esa distinción es la clave: todo lo que sigue es un gancho sobre el que construyes en lugar de una característica que aceptas como dada.

GrapesJS proporciona la capa de edición visual. Tu aplicación React mantiene el control de los usuarios, los datos, el almacenamiento y la publicación — que es todo el argumento para incrustar un editor en lugar de enviar a la gente a otro editor.

Integrar un editor en el producto de otra persona plantea un conjunto diferente de preguntas.

Ambos caminos terminan en el mismo lugar. La única diferencia real es dónde se permite evaluar el módulo.

Tres paquetes y un componente. Todo lo que viene después de esto — almacenamiento, bloques personalizados, MJML — se cubre más abajo en la página.

import GjsEditor from '@grapesjs/react';
import newsletter from 'grapesjs-preset-newsletter';
import 'grapesjs/dist/css/grapes.min.css';

// A normal React component. The editor is a child of your tree, so your
// router, your auth context and your providers all still wrap it.
export default function EmailBuilder({ template, onSave }) {
  return (
    <GjsEditor
      options={{
        height: '100vh',
        // Storage is wired to your own API further down this page.
        storageManager: false,
        plugins: [newsletter],
        projectData: template,
      }}
      onEditor={(editor) => {
        // Everything the user builds comes back out as plain data you can
        // put straight into React state or POST to your backend.
        editor.on('update', () => {
          onSave({
            html: editor.getHtml(),
            css: editor.getCss(),
            project: editor.getProjectData(),
          });
        });
      }}
    />
  );
}

// app/emails/page.tsx  (or pages/emails.tsx)
import dynamic from 'next/dynamic';

// GrapesJS reaches for window/document as it initialises, so it can only run
// in the browser. In Next.js that means one dynamic import with ssr: false —
// this is the whole of the Next.js-specific work.
const EmailBuilder = dynamic(() => import('@/components/EmailBuilder'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

export default function EmailsPage({ template }) {
  return <EmailBuilder template={template} onSave={saveTemplate} />;
}

1. Inicializar el editor dentro de un componente React
2. →Añade un ajuste predefinido para el correo electrónico para que los bloques y estilos sean seguros para el correo
3. →Registra los bloques que necesita tu producto
4. →Configura el almacenamiento contra tu propia API
5. →Exporta HTML o compila MJML en el servidor
6. →Entrega el resultado a tu proveedor remitente

Las versiones anteriores se comprobaron con los paquetes publicados en 2026-09-03: grapesjs 0.23.6 es BSD-3-Clause; @grapesjs/react es MIT.

Estos provienen del núcleo del editor y sus preajustes de correo electrónico, no de nada que tengas que escribir.

MJML existe para hacer que el marcado de correo responsivo sea grabable a mano. Un constructor visual encima significa que nadie tiene que hacerlo. GrapesJS no incluye MJML en su núcleo — un plugin añade componentes MJML al editor, por lo que el proyecto se serializa a MJML en lugar de a HTML simple.

// pages/api/email/compile.ts
//
// mjml is a Node package — it parses and renders on the server, not in the
// browser. So the editor produces MJML in the client and this route turns it
// into the table-based HTML that email clients actually accept.
import mjml2html from 'mjml';

export default function handler(req, res) {
  const { html, errors } = mjml2html(req.body.mjml, {
    validationLevel: 'soft',
    keepComments: false,
  });

  // MJML reports what it could not understand rather than failing silently.
  if (errors.length) console.warn('[mjml]', errors);

  res.status(200).json({ html });
}

El compilador es un paquete Node, por lo que la compilación pertenece al servidor — en Next.js, una ruta API ordinaria. La dirección inversa no es simétrica: HTML arbitrario no se convierte limpiamente de nuevo a MJML, así que elige el formato que necesitas antes de construir sobre uno.

El editor entrega a tu código tres cosas diferentes, y una aplicación de React suele querer las tres en distintos momentos.

Aquí es cuando un creador embebido se adelanta a una herramienta de correo genérica: los bloques pueden conocer tu dominio. Un bloque no es la imagen de una tarjeta de producto: puede buscar el producto.

Para ser precisos sobre qué es esto: un componente arbitrario de React no se convierte en un componente de correo electrónico. JSX renderiza un árbol DOM, y los clientes de correo no respetarán la mayoría. Lo que escribes es un tipo de componente GrapesJS cuyo toHTML emite marcado seguro para correo electrónico y cuyas características se corresponden a un registro que posee tu aplicación. El cableado es tuyo; el editor proporciona el lugar donde lo colocar.

Reduce el trabajo de diseño repetitivo enviando las secciones que tu producto realmente envía, en lugar de un conjunto genérico que tus usuarios tienen que adaptar cada vez.

Una plantilla es simplemente un documento de proyecto guardado, así que enviar una biblioteca inicial significa sembrar filas y cargar una como projectData cuando el usuario la elige. Estas son las categorías que la mayoría de los productos acaban necesitando:

Estas son categorías de diseño, no productos a la venta. GJS.Market lista presets de correo, packs de bloques y gestores de plantillas — no vende diseños de correo ya hechos, y esta página no mostrará tarjetas de productos que no existen.

Los usuarios cambian el ancho del dispositivo mientras editan, y el lienzo se redistribuye en ese ancho. Los anchos de correo electrónico son más estrechos que los de la web: 600px ha sido el máximo seguro de escritorio durante años.

Una vista previa es una vista previa. Muestra cómo se refluye el marcado, no cómo lo renderizará un cliente específico — que es la siguiente sección.

Los clientes de correo electrónico implementan HTML y CSS de forma diferente, y lo han hecho durante veinte años. Un constructor visual estandariza el flujo de trabajo de autoría; no hace que los clientes estén de acuerdo entre sí.

Conecta el editor con el backend y el modelo de datos que ya tienes. Tus usuarios, tu autenticación, tu base de datos, tus permisos y tu flujo de trabajo de publicación permanecen exactamente donde están.

// The editor asks your API for a template and hands it back on save.
// Your users, your auth, your database, your permissions — unchanged.
const options = {
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 5,
    options: {
      remote: {
        urlStore: `/api/email-templates/${templateId}`,
        urlLoad: `/api/email-templates/${templateId}`,
        // Your existing session cookie is all the auth it needs.
        fetchOptions: { credentials: 'include' },
      },
    },
  },
};

// pages/api/email-templates/[id].ts — an ordinary Next.js route handler.
export default async function handler(req, res) {
  const session = await getSession(req);
  if (!session) return res.status(401).end();

  if (req.method === 'POST') {
    await db.emailTemplate.update({
      where: { id: req.query.id, orgId: session.orgId },
      data: { project: req.body },
    });
    return res.status(200).json({ ok: true });
  }

  const row = await db.emailTemplate.findFirst({
    where: { id: req.query.id, orgId: session.orgId },
  });
  return res.status(200).json(row?.project ?? {});
}

GJS.Market no aloja tus plantillas, no almacena tus datos ni envía tu correo electrónico. Vende plugins para un editor que tú mismo gestionas.

Personaliza la experiencia de edición hasta que se lea como una parte nativa de tu aplicación React en lugar de un panel de terceros atornillado. No hay marca de fabricante que eliminar en primer lugar.

Lo que puedes cambiar

• Barra de herramientas y botones
• Viñetas y su disposición
• Paleta de bloques y categorías
• Tipos de componentes y rasgos
• Sectores de gestión de estilo
• Comandos y atajos de teclado
• La interfaz de React que rodea

La versión más completa es ejecutar el editor sin interfaz y construir toda la interfaz tú mismo en React, usando el editor solo para el lienzo y el modelo.

Es algo razonable a considerar, hasta que se escriba la lista de piezas. Cada elemento que aparece a continuación es algo que un editor de correo necesita antes de poder usarlo — no es algo agradable de tener.

De qué está hecho un editor de correo electrónico

• Lienzo de edición
• Selección y pruebas de impacto
• Arrastrar y soltar
• Modelo de componentes
• Sistema de bloques
• Responsable de estilo
• Controles responsivos
• Gestor de activos
• Almacenamiento de plantillas
• Historia de deshacer / rehacer
• Serialización
• Exportación HTML
• Integración MJML
• Vista previa
• Mantenimiento continuo

Construye tu producto de correo — no otro editor desde cero. No vamos a ponerle un número de meses ahorrados: cuánto tardaría tu equipo depende de tu equipo.

Cada anuncio que aparece a continuación es un producto real con una página activa, y su nombre, precio y miniatura se muestran directamente del catálogo — así que nada en esta página puede desmarcarse de lo que realmente está a la venta.

React UI

La capa de esta página es la siguiente: interfaces de React construidas alrededor del núcleo del editor, para equipos que quieren que la interfaz de usuario que lo rodea sea React en lugar de los paneles estándar.

Explora esta categoría

React UI

React UI for GrapesJS

Una interfaz React alrededor del editor, para equipos que prefieren extender componentes antes que configurar paneles.

GratisPlugin de visualización

Preajuste de React

Reactor Preset for GrapesJS

Un preajuste orientado a React, útil como punto de partida cuando la aplicación circundante ya está en React.

GratisPlugin de visualización

Shell de reacción

GrapesJS Shadcn

Una interfaz completa de React construida sobre una biblioteca de componentes familiar, para productos que quieren que el editor coincida con el resto de su interfaz.

999,99 US$Plugin de visualización

Preajustes de correo electrónico

Sustituye los bloques web por defecto por otros seguros para correo electrónico y reduce el gestor de estilos a propiedades al honor de los clientes de correo electrónico. Esto es lo que hace que el editor sea un editor de correo electrónico.

Explora esta categoría

MJML

MJML Preset

Añade componentes MJML al editor para que el proyecto se serialize a MJML y compile a HTML responsivo en tu servidor.

GratisPlugin de visualización

Preajuste de correo electrónico

Newsletter Preset

El punto de partida del correo: bloques seguros para correo, un gestor de estilos reducido y salida basada en tablas.

GratisPlugin de visualización

Preajuste de correo electrónico

Whitener Preset GrapesJS

Un ajuste alternativo de correo electrónico, que merece la pena comparar con el del boletín antes de comprometerte con un vocabulario bloqueado.

GratisPlugin de visualización

Bloques y plantillas

Secciones listas y un gestor para guardar y recargar plantillas, para que tus usuarios no estén ensamblando todos los correos a partir de primitivas.

Explora esta categoría

Bloqueos de correo electrónico

GrapesJS Email Blocky – Premium Responsive Email Blocks

Un conjunto más amplio de secciones de correo listos, para que tus usuarios ensamblen piezas terminadas en lugar de primitivas.

69,00 US$Plugin de visualización

Plantillas

Templates Manager

Guarda, lista y recarga proyectos — la mecánica detrás de enviar una biblioteca de plantillas de inicio a tus usuarios.

39,00 US$Plugin de visualización

Acceso al código

En los momentos, un desarrollador necesita ver o editar manualmente el marcado que produce una sección.

Explora esta categoría

Código

Grapesjs Component Code Editor

Muestra el marcado que produce un componente seleccionado, para los momentos en que un desarrollador necesita verlo o editarlo directamente.

GratisPlugin de visualización

Adaptadores de almacenamiento

Conecta el gestor de almacenamiento a un backend sin escribir el adaptador, si el que usas ya está cubierto.

Explora esta categoría

Almacenamiento

Grapesjs Firebase Storage

Persiste proyectos en Firebase sin escribir tú mismo un adaptador de almacenamiento.

GratisPlugin de visualización

Almacenamiento

Directus Storage

Persiste los proyectos en un backend de Directus, si es donde ya está tu contenido.

GratisPlugin de visualización

Activos

Subida de imágenes y gestión de medios, dirigida a los servicios que ya ejecutan los equipos en lugar de a archivos locales.

Explora esta categoría

Activos

Grapesjs Cloudinary

Señala al gestor de activos en Cloudinary, así que las imágenes de correo electrónico provienen de un servicio que puede transformarlas y servirlas.

GratisPlugin de visualización

Subidas

Grapesjs Uppy

Una experiencia de subida más completa en el gestor de activos, incluyendo fuentes más allá del selector local de archivos.

GratisPlugin de visualización

Exportación

Sacar el marcado final del editor y ponerlo en lo que venga después en tu pipeline.

Explora esta categoría

Exportación

Export Zip

Empaqueta el marcado y los recursos generados para entregarlos a lo que venga a continuación en tu pipeline.

GratisPlugin de visualización

Cuatro combinaciones que se corresponden con requisitos reales. Cada listado mostrado es uno que existe: no hay ningún plugin imaginario que llene un hueco en un diagrama.

Los precios vienen del catálogo en el momento de la construcción.

El patrón se repite en productos que de otro modo no tienen nada en común.

El editor crea el correo. Tu infraestructura lo envía. Mantener esa línea clara es lo que hace que el resto de esta arquitectura sea sencilla.

Ejemplos de proveedores que los equipos se lo dan

• Amazon SES
• SendGrid
• Mailgun
• Matasellos

Mencionados como ejemplos de dónde acaba el marcado, no como integraciones integradas. Ni GrapesJS ni GJS.Market incluyen un conector para ninguno de ellos; llamas a su SDK desde tu propio backend, como ya haces con el resto de tu correo.

Esto es un intercambio arquitectónico, no un marcador. La columna de la derecha dice "depende" honestamente: los editores alojados difieren entre sí y cambian sus términos, y no vamos a inventar una respuesta específica en su nombre.

La columna GrapesJS se verifica frente a grapesjs 0.23.6 y @grapesjs/react en 2026-09-03. Para comparar con un proveedor específico con nombre, con sus precios publicados, consulta la página dedicada.

Páginas vecinas que llevan al mismo editor en una dirección diferente.

Empieza con GrapesJS, intégralo en tu aplicación React y amplía el editor con los plugins de correo que tu producto realmente requiere.