MJML vs React Email: Linguaggio di Markup vs Libreria di Componenti

Per un team che scrive già React e TypeScript, la scelta più coerente è React Email: i template diventano componenti nello stesso repository, usano gli stessi tipi e si testano con gli stessi strumenti del resto dell'applicazione. Per tutti gli altri, MJML è la scelta più prudente, perché la sintassi non dipende dal linguaggio del backend e il framework è self-hosted, quindi non c'è un abbonamento da pagare per la libreria. Il costo vero, in entrambi i casi, è l'invio: con Resend il piano Free copre 3.000 email al mese, mentre il piano Pro parte da 20 $ al mese per 50.000 email.

Due modi di scrivere la stessa email

MJML e React Email risolvono lo stesso problema: scrivere una email in un formato più semplice dell'HTML delle tabelle annidate e ottenere un output che funzioni nei client di posta. La differenza sta in dove vive la logica. In MJML la struttura è dichiarata con tag propri, simili a XML, e il compilatore la trasforma in HTML. In React Email la struttura è una funzione JavaScript che restituisce componenti, quindi puoi usare variabili, condizioni, cicli e tipi come in qualsiasi altro componente.

Questa differenza ha conseguenze pratiche. Un template MJML è leggibile da chiunque conosca il formato, anche da una persona che non scrive JavaScript. Un template React Email può essere riutilizzato dall'applicazione, può ricevere dati tipizzati e può essere testato con gli stessi runner usati per i componenti dell'interfaccia. Il prezzo di questa potenza è una dipendenza in più nel progetto: React Email ha senso quando questa dipendenza c'è già.

Confronto rapido degli strumenti

La tabella seguente mette a confronto i due framework e i provider di invio che più spesso si abbinano a essi. I prezzi sono quelli indicati sulle pagine ufficiali dei fornitori, controllate il 7 ottobre 2026. Dove una pagina non indica un prezzo per un piano, la cella lo dice esplicitamente.

Approccio MJML

MJML fornisce un linguaggio di markup specifico per le email. Componenti come mj-section, mj-column e mj-button si traducono in strutture HTML che tengono conto delle differenze tra client. Non devi ricordare quali tabelle annidare o quali attributi Outlook richiede: il compilatore lo fa per te.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="18px">Welcome!</mj-text>
        <mj-button background-color="#007bff">
          Get Started
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Il punto di forza di MJML, per chi lavora con un team misto, è la portabilità. Il template è un file di testo che qualunque servizio di build può compilare, indipendentemente dal linguaggio del backend. Un'applicazione in Python, Ruby, PHP o Go può generare l'HTML tramite il compilatore a riga di comando o tramite un passaggio di build separato, senza importare React.

Il limite principale è che MJML è un linguaggio a sé. Chi arriva da HTML o da un altro sistema di template deve impararne i componenti, e la logica dinamica va ancora gestita nel backend o con un motore di template esterno. Gli strumenti di editing sono maturi, ma l'integrazione con i tipi e con i componenti dell'applicazione è più limitata rispetto a React Email.

Dal punto di vista del costo, il framework non ha un piano a pagamento da sottoscrivere: il modello è self-hosted. Il conto da fare è quindi quello dell'infrastruttura di build e del servizio di invio. Per l'indirizzo ufficiale delle condizioni, consulta la pagina prezzi di MJML.

Approccio React Email

React Email ti permette di scrivere le email come componenti React. Se il tuo team pensa già in termini di componenti, props e JSX, il modello mentale è immediato: un template è una funzione che riceve dati e restituisce un albero di componenti, esattamente come una pagina dell'applicazione.

import { Html, Text, Button } from '@react-email/components';

export default function WelcomeEmail({ name }) {
  return (
    <Html>
      <Text style={{ fontSize: '18px' }}>Welcome, {name}!</Text>
      <Button
        href="https://app.example.com"
        style={{ backgroundColor: '#007bff' }}
      >
        Get Started
      </Button>
    </Html>
  );
}

Il vantaggio concreto è la condivisione. Il tipo dei dati che il template riceve può essere lo stesso tipo usato dal servizio che genera l'email. Un cambio di nome di campo viene segnalato dal compilatore, non scoperto in produzione. Gli stili possono essere costanti condivise, e i componenti di intestazione o di piè di pagina possono essere riutilizzati tra più email.

Il limite principale è la dipendenza. React Email richiede un ambiente React per costruire i template, quindi anche un piccolo team che scrive solo email deve mantenere uno stack JavaScript. L'ecosistema è più giovane di quello di MJML: ci sono meno esempi già pronti e meno risposte nelle community su casi limite. React Email è sviluppato da Resend, e la sua roadmap segue i cambiamenti di quel prodotto.

Sul prezzo, la pagina di questo confronto non riporta un listino del framework: per le condizioni aggiornate consulta direttamente il sito ufficiale di React Email. Il costo ricorrente che incide davvero sul budget è quello dell'invio, che dipende dal provider scelto.

Costo reale: framework e invio

Il framework è solo una parte della spesa. Per capire quanto costa davvero una scelta, bisogna guardare il servizio che spedisce le email. Qui sotto trovi tre dimensioni di lista realistiche, con i piani che rientrano in ciascuna fascia. I prezzi sono in dollari USA e si riferiscono alle pagine ufficiali controllate il 7 ottobre 2026. Dove il piano non è indicato, la cella rimanda alla pagina prezzi del fornitore.

Costo per dimensione della lista

Questa tabella mostra un punto che spesso sfugge: il costo cresce con i contatti nei piani marketing di Resend, mentre nel piano Essential di Mailjet i contatti sono illimitati e il limite è il volume di invio. Per questo la scelta del provider deve partire dal modo in cui invii, non solo dalla dimensione della lista.

Costo per volume di invio

Per calcolare il costo annuale, moltiplica il prezzo mensile per dodici. Con il piano Pro di Resend a 20 $ al mese, il costo annuale è 12 × 20 $ = 240 $. Con il piano Essential di Mailjet a 19 $ al mese, il costo annuale è 12 × 19 $ = 228 $. La differenza è piccola, quindi nella scelta del provider contano di più la qualità dell'invio, la gestione dei bounce e la reputazione del dominio.

Come cambia il lavoro quotidiano

Le funzionalità si confrontano facilmente, ma il lavoro di ogni giorno si distingue soprattutto nel modo in cui un template viene modificato, verificato e consegnato. Con MJML, il ciclo tipico è modificare il file, compilarlo e aprire l'HTML risultante in un'anteprima. Chi non è sviluppatore può intervenire sul testo e sulla struttura senza toccare la logica, purché il template sia già stato impostato.

Con React Email, il ciclo tipico passa dal server di sviluppo, che mostra l'anteprima mentre modifichi il componente. Le modifiche ai dati di prova sono immediate, e le modifiche ai componenti condivisi si propagano a tutti i template che li usano. Il rovescio della medaglia è che un designer senza esperienza di React ha bisogno di un passaggio in più per modificare un template.

In entrambi i casi, il controllo finale richiede test su client reali. Nessun framework elimina la necessità di inviare una bozza a una casella di prova e di guardarla su Gmail, Outlook e sui client mobili più usati dal pubblico. Il tempo risparmiato dalla sintassi va reinvestito in questo controllo, non nel rifarlo a mano.

Come scegliere

La scelta migliore dipende da tre domande: quale linguaggio usa già il backend, chi modifica i template e quanto è importante riusare dati e componenti dell'applicazione. La tabella seguente riassume i casi più comuni.

Un criterio pratico: se la risposta alla prima domanda è React, scegli React Email. Se la risposta è un altro linguaggio, MJML è quasi sempre la scelta più semplice da mantenere. Il caso in cui la decisione è più difficile è quello di un team React con pochi sviluppatori e molti template, perché lì la condivisione dei componenti vale il costo della dipendenza, ma serve una persona responsabile della libreria.

Checklist di avvio o migrazione

Che tu scelga l'uno o l'altro, il percorso di avvio segue sempre gli stessi passi: installare il framework, creare un primo template, compilarlo, testarlo sui client e collegarlo al provider. La tabella indica le differenze operative tra i due.

Per la migrazione da un framework all'altro, non esiste uno script che converta un template in modo affidabile. La strategia più sicura è riscrivere un template alla volta, cominciando da quello con più traffico o da quello più semplice, e confrontare il risultato sui client prima di spegnere il vecchio. Conserva il vecchio HTML come riferimento per almeno un ciclo di invii, così puoi tornare indietro senza fretta se emerge un problema di rendering.

Qualità di rendering e client email

Entrambi i framework producono HTML compatibile con i client principali. MJML ha un'esperienza più lunga con i casi limite dei client vecchi, perché i suoi componenti nascono proprio per coprire quelle differenze. React Email gestisce bene i client più diffusi, ma i template scritti con stili non supportati da Outlook richiedono più attenzione, e conviene verificare il risultato con i propri dati reali e non solo con l'anteprima.

Per email transazionali critiche, come conferme d'acquisto o reset della password, la maturità di MJML offre una base di rendering molto consolidata. Per email di marketing con grafica complessa, entrambi richiedono un controllo manuale su Outlook prima dell'invio. In nessun caso il framework sostituisce la verifica finale.

Il verdetto

Scegli MJML se il backend non usa JavaScript, se più persone modificano i template e se vuoi uno strumento con un'esperienza lunga sui client email. Il costo del framework è zero, e il lavoro di manutenzione resta leggero.

Scegli React Email se il tuo stack è già basato su React e vuoi che le email condividano tipi, componenti e test con l'applicazione. La scelta ha senso solo se qualcuno nel team è responsabile della libreria dei template.

In entrambi i casi, il costo ricorrente sarà quello dell'invio. Confronta i piani sul volume previsto per i prossimi due trimestri, non sul volume di oggi, e tieni d'occhio i limiti giornalieri dei piani gratuiti, che nelle campagne contano più del tetto mensile.

I prezzi citati provengono dalle pagine ufficiali di ciascun fornitore, controllate il 7 ottobre 2026. Piani e limiti cambiano spesso: prima di sottoscrivere, controlla di nuovo la pagina ufficiale del fornitore.