MJML ou React Email : quel choix pour vos emails HTML ?

Réponse courte pour une équipe produit

MJML convient à une équipe qui veut décrire une mise en page d’email avec un langage spécialisé, sans introduire React dans le projet. Ses balises mj-section, mj-column et mj-button sont compilées en HTML adapté aux clients de messagerie. React Email est plus naturel quand le produit utilise déjà React et TypeScript : chaque email devient un composant, avec des propriétés, des fonctions et des données partagées avec l’application. Les deux outils ne sont pas des plateformes d’envoi. Après la compilation, il faut remettre le HTML à une API comme Resend, Postmark, Mailgun ou SendGrid.

Pour une équipe éditoriale qui collabore avec des développeurs, MJML réduit le nombre de concepts à apprendre. Pour une équipe front-end qui veut factoriser des composants et des types, React Email s’insère mieux dans le dépôt existant. Dans les deux cas, définissez d’abord les clients ciblés, les langues, le volume mensuel et la personne responsable de la dernière validation du HTML.

Tableau de comparaison

MJML : une grammaire conçue pour la mise en page email

MJML sépare le contenu de la mécanique des tableaux HTML, des attributs conditionnels et des styles en ligne. Un fichier reste lisible même pour quelqu’un qui ne travaille pas chaque jour avec le HTML historique des emails. Le compilateur transforme les composants en structures que les clients comprennent mieux, puis l’équipe peut inspecter le HTML produit avant de l’envoyer. Cette étape de compilation est aussi un point clair pour enregistrer les erreurs dans l’intégration continue.

Les composants mj-text, mj-image, mj-divider et mj-button couvrent les blocs courants. Les attributs de section centralisent largeur, arrière-plan et espacement. Pour un design particulier, il est possible d’ajouter du HTML personnalisé, mais il faut alors reprendre les contraintes propres aux clients de messagerie. L’éditeur et les intégrations de MJML aident une équipe qui veut donner un aperçu rapide à une personne non technique.

<mjml>
  <mj-body>
    <mj-section><mj-column>
      <mj-text>Bonjour, {{prenom}}</mj-text>
      <mj-button href="{{lien_cta}}">Voir la commande</mj-button>
    </mj-column></mj-section>
  </mj-body>
</mjml>

La contrepartie est une étape supplémentaire pour les données dynamiques. MJML ne connaît pas votre modèle de commande ou votre système de traduction : le pipeline doit injecter les valeurs, échapper le contenu et refuser les variables manquantes. Une équipe qui souhaite partager les mêmes fonctions utilitaires que son application devra créer une passerelle vers son langage serveur.

React Email : des composants au centre du dépôt

React Email représente un message avec des composants React, notamment Html, Section, Text, Img et Button. Les props rendent explicites les données attendues par un template. TypeScript peut signaler qu’une adresse de suivi ou qu’un prénom n’est pas fourni, et les fonctions partagées peuvent préparer une date, un montant ou une URL signée. L’aperçu local accélère le travail sur plusieurs variantes d’un même composant.

Cette proximité avec l’application facilite l’usage de Resend : le rendu React est produit dans le même environnement que l’appel d’envoi, avec un expéditeur, un destinataire et un identifiant de template clairement séparés. Elle ne dispense pas d’examiner le HTML final et les différences entre le navigateur et un client de messagerie. Les composants doivent rester déterministes afin qu’un envoi soit reproductible avec les mêmes données.

import { Html, Section, Text, Button } from '@react-email/components';
type RecuProps = { prenom: string; lien: string };
export function Recu({ prenom, lien }: RecuProps) {
  return (<Html><Section><Text>Bonjour {prenom}, voici votre reçu.</Text></Section><Button href={lien}>Ouvrir le reçu</Button></Html>);
}

Le coût organisationnel apparaît si les personnes qui écrivent les emails ne connaissent pas JSX, les props ou la construction du projet. Documentez les composants autorisés et fournissez quelques exemples, plutôt que de laisser chaque template inventer sa hiérarchie. Cette discipline rend la bibliothèque réutilisable, mais elle demande un responsable de maintenance.

Courbe d’apprentissage et collaboration

Avec MJML, l’apprentissage porte sur les composants, les attributs et les limites de la compilation. Une personne à l’aise avec le contenu peut produire un premier template sans comprendre toute la plomberie du client de messagerie. Avec React Email, il faut ajouter JSX, props, importations, dépendances et souvent TypeScript. En contrepartie, les développeurs React retrouvent leurs habitudes : revue de code, fonctions partagées et découpage en composants.

Dans les deux équipes, adoptez un contrat éditorial : longueur maximale des titres, texte alternatif, liens de désinscription, variantes mobile et règles de ton. Versionnez les fichiers, faites relire les traductions et gardez une commande unique pour produire l’HTML. Le choix de l’outil devient alors un détail maîtrisable de la collaboration.

Templates, variables et internationalisation

Les variables ne doivent pas être concaténées directement dans une chaîne HTML. Avec MJML, une étape de rendu peut utiliser un moteur de templates pour remplacer {{prenom}} ou une condition, puis échapper les valeurs. Avec React Email, les props imposent une forme de données et les fonctions peuvent choisir une traduction avant le rendu. Dans les deux modèles, prévoyez une valeur de secours pour un prénom absent, encodez les paramètres d’URL et refusez un lien vide.

Pour le français, l’anglais et l’allemand, stockez les messages dans des catalogues plutôt que dans des conditions dispersées. Les dates, les montants, les pluriels et les espaces insécables changent selon la locale. MJML reste agnostique à la bibliothèque de traduction choisie ; React Email peut réutiliser celle de l’application si elle accepte un rendu côté serveur. Vérifiez que le sujet, le pré-en-tête, le bouton et le pied de page sont tous traduits.

Compatibilité et chaîne de compilation

Aucun constructeur ne supprime les différences entre webmail, applications mobiles et moteurs historiques. Le HTML généré doit être inspecté sur les clients importants pour votre audience. Comparez la version finale, avec ses styles en ligne et ses images absolues, puis vérifiez les liens, le texte alternatif, le mode sombre et les replis de largeur. Un service de prévisualisation ou des boîtes de réception de référence peuvent compléter cette vérification, sans constituer une garantie universelle.

Une chaîne MJML valide le fichier, le compile, injecte les données, puis transmet le résultat à l’API d’envoi. Une chaîne React Email construit le projet, rend le composant avec ses props, contrôle le HTML et appelle l’API. Gardez les secrets hors des templates, journalisez l’identifiant de message et rendez les erreurs visibles dans le déploiement. Un build reproductible permet de retrouver le HTML associé à une notification.

Quel budget pour distribuer les emails ?

MJML et React Email ne facturent pas la génération. Le coût vient du service d’envoi choisi, généralement selon le nombre d’emails par mois. Voici des points de départ concrets pour dimensionner le stack :

• Resend propose Pro à 20 $ par mois pour 50 000 emails mensuels, avec un palier Pro à 35 $ par mois pour 100 000 emails.
• Postmark démarre avec Basic à 15 $ par mois pour 10 000 emails mensuels ; Pro commence à 16,50 $ par mois pour le même volume.
• Mailgun propose Basic à 15 $ par mois pour 10 000 emails mensuels. Foundation coûte 35 $ par mois après le premier mois pour 50 000 emails.
• SendGrid fait démarrer Essentials à 19,95 $ par mois pour une plage de 50 000 à 100 000 emails mensuels ; Pro commence à 89,95 $ pour 100 000 à 2 500 000.

Ces montants concernent l’envoi. Ajoutez les dépassements, domaines, adresses IP dédiées ou options de conservation selon votre fournisseur. Prenez votre volume de notifications, les campagnes et les pics saisonniers, puis vérifiez la base de facturation avant de choisir une API.

Migration de MJML vers React Email

Commencez par sélectionner un email représentatif. Listez ses blocs, variables, traductions et conditions. Conservez le HTML compilé de MJML comme sortie de référence, puis recréez les blocs dans des composants React Email avec des props explicites. Les images et liens doivent garder des URL absolues et les mêmes attributs d’accessibilité. Rendez les deux versions avec les mêmes données de démonstration afin de repérer les écarts de structure.

Déplacez ensuite les fonctions communes dans un module partagé, configurez la prévisualisation locale et branchez un envoi de développement. Gardez MJML pendant la transition pour les templates non migrés, mais attribuez un propriétaire à chaque fichier. Une migration par familles — reçus, alertes, invitations — retire progressivement l’ancien compilateur sans créer deux sources de vérité.

Migration de React Email vers MJML

Recensez les composants React qui encapsulent plus que la présentation. Séparez la logique de sélection du squelette visuel, puis exprimez ce squelette avec les composants MJML correspondants. Les props deviennent des variables du moteur de templates ou des champs préparés avant la compilation. Les conditions complexes doivent être résolues avant de produire le fichier MJML, afin de garder une source lisible.

Recréez les catalogues de traduction et les données de démonstration en dehors du markup. Comparez les sorties sur les mêmes clients, notamment les boutons, les colonnes et les images. Publiez enfin la commande de compilation dans la documentation du dépôt et branchez-la sur l’API d’envoi. L’équipe peut continuer à utiliser Postmark ou Mailgun sans modifier le contrat de distribution.

Choisir selon votre organisation

Choisissez MJML si plusieurs métiers doivent lire les templates, si votre backend n’est pas en React ou si vous voulez isoler la mise en page email du front-end. Choisissez React Email si vous avez déjà une base de composants React, si les types et les fonctions partagées réduisent les erreurs, et si une équipe peut maintenir la chaîne de rendu. Dans les deux scénarios, décrivez aussi le service d’envoi, la gestion des langues, la compatibilité visée et le plan de retour arrière.

Questions fréquentes

MJML et React Email sont-ils payants ?

Les deux projets de construction sont gratuits et open source. Vous payez éventuellement l’API qui distribue le HTML, ainsi que des options liées au volume ou à la délivrabilité.

Peut-on envoyer directement depuis MJML ?

Non. MJML compile un template en HTML. Votre application doit fournir les destinataires et remettre ce HTML à un SMTP ou à une API d’envoi.

React Email impose-t-il Next.js ?

Non. Il peut être rendu dans différents projets JavaScript ou TypeScript. Il faut une étape de rendu serveur et un appel séparé vers votre fournisseur d’envoi.

Comment gérer plusieurs langues avec MJML ?

Gardez les traductions dans des catalogues et injectez la locale avant la compilation. Préparez aussi les pluriels, dates, montants, sujet et pré-en-tête.

React Email rend-il les emails compatibles partout ?

Il produit du HTML d’email, mais aucun outil ne supprime les différences entre clients. Inspectez la sortie finale et vérifiez les clients importants pour votre audience.

Quel service associer à l’un ou l’autre ?

Comparez Resend, Postmark, Mailgun ou SendGrid sur le volume mensuel, les limites, les webhooks et votre besoin de suivi. Le constructeur choisi ne vous enferme pas dans un fournisseur précis.