Introduction

L’intégration d’un éditeur d’emails drag-and-drop dans une application SaaS ou un back-office interne constitue historiquement un compromis douloureux. Les équipes oscillent généralement entre deux écueils : intégrer des briques SaaS fermées (comme Unlayer ou BeeFree) soumises à une tarification agressive au volume d’utilisateurs, ou réinventer un moteur visuel complet par-dessus des composants MJML bruts.

C’est sur cette friction que se positionne le projet https://github.com/templatical/sdk. Développé sous licence Functional Source License (FSL-1.1-MIT, basculant automatiquement en MIT au bout de deux ans), Templatical propose un composant d’édition complet, découplé de tout backend propriétaire obligatoire. Conçu sous le capot avec Vue mais packagé de manière strictement agnostique pour fonctionner dans n’importe quel environnement (React, Svelte, Angular ou vanilla JavaScript), ce SDK génère du JSON structuré et compile directement vers du MJML standard, garantissant un rendu HTML compatible avec la jungle des clients de messagerie historiques.

Architecture technique et flux de données

Le modèle technique de Templatical repose sur une séparation nette entre l’état abstrait du gabarit, le moteur de rendu et les services périphériques (stockage, IA, édition collaborative).

Au lieu de stocker de l’HTML direct pollué par des styles inlinés incohérents, Templatical sérialise le template sous forme d’arbre syntaxique JSON (AST). Ce format portable est ensuite compilé vers du MJML canonique côté client ou serveur, avant d’être transpilé en HTML tabulaire lourd adapté aux moteurs Outlook, Gmail ou Apple Mail.

Contrairement aux solutions propriétaires exigeant un abonnement cloud pour la moindre fonctionnalité avancée, Templatical délègue ces opérations à des fournisseurs (providers) configurables lors de l’initialisation :

• Collaboration temps réel : Prise en charge via votre propre backend WebSocket ou CRDT, sans dépendance tierce.
• Assistance IA : Intégration de vos propres passerelles (OpenAI, Anthropic ou modèles auto-hébergés type vLLM/Ollama).
• Stockage de médias : Les blocs images appellent directement vos endpoints d’upload d’objets (S3, MinIO, bucket compatible).

Intégration applicative dans une SPA

L’intégration dans une application cliente s’effectue via le package @templatical/editor. Le runtime ne nécessite qu’un conteneur DOM cible et une configuration d’initialisation.

# Installation du SDK dans le projet frontend
npm install @templatical/editor

L’exemple suivant illustre l’instanciation de l’éditeur au sein d’un composant frontend (ici en TypeScript standard, transposable à React via un useEffect ou Vue via onMounted) :

import { initEditor } from '@templatical/editor';
import '@templatical/editor/dist/style.css';

const container = document.getElementById('email-editor-root');

if (container) {
  const editor = initEditor({
    target: container,
    template: {
      /* État JSON initial ou vide */
      version: '1.0',
      nodes: []
    },
    // Injection du fournisseur de gestion des assets
    media: {
      upload: async (file: File) => {
        const formData = new FormData();
        formData.append('file', file);
        
        const response = await fetch('/api/v1/assets/upload', {
          method: 'POST',
          body: formData,
        });
        
        if (!response.ok) throw new Error('Échec upload image');
        const data = await response.json();
        return { url: data.publicUrl };
      }
    },
    // Personnalisation des merge tags selon la syntaxe de l'ESP cible
    mergeTags: [
      { name: 'Prénom', tag: '{{ user.firstName }}' },
      { name: 'Lien de Désinscription', tag: '{{ unsubscribe_url }}' },
    ],
    onChange: (jsonState) => {
      console.debug('Arbre JSON mis à jour:', jsonState);
    }
  });

  // Exportation programmatique du code final
  document.getElementById('export-btn')?.addEventListener('click', async () => {
    const mjmlOutput = await editor.getMjml();
    const htmlOutput = await editor.getHtml();
    console.info('Prêt pour expédition via Postmark/SES:', htmlOutput);
  });
}

Fonctions avancées

Le SDK Templatical adresse plusieurs contraintes opérationnelles souvent réservées aux paliers payants des éditeurs propriétaires :

1. Blocs dynamiques raccordés à des API internes : L’éditeur permet d’enregistrer des blocs personnalisés dont le contenu est hydraté dynamiquement à la prévisualisation (flux de produits d’un e-commerce, derniers articles de blog, alertes de monitoring).
2. Merge tags agnostiques : Le canvas résout automatiquement les variables sous forme de badges lisibles pour l’utilisateur, tout en conservant la syntaxe brute déclarée ({{ moustache }}, {liquid} ou ${templateString}).
3. Linting de compatibilité et de délivrabilité : Le SDK intègre des validateurs statiques analysant la structure des tableaux, le ratio texte/image et les règles CSS critiques avant envoi, réduisant drastiquement les ruptures graphiques sur Outlook ou les déclencheurs de filtres antispam.

Génération de templates via Agent Skills

Une particularité notable de l’écosystème Templatical réside dans son outillage dédié aux assistants de code (Claude Code, Cursor, GitHub Copilot). Templatical met à disposition un dossier compatible Agent Skills qui s’injecte directement dans les outils CLI et IDE :

# Injection du skill d'ingénierie Templatical pour vos agents de code
npx skills add templatical/sdk

Une fois cette capacité déclarée dans votre environnement, l’agent peut non seulement générer la structure JSON d’un gabarit complet à partir d’une description textuelle (“Crée un email transactionnel de réinitialisation de mot de passe sobre, fond sombre, avec bouton centré”), mais également lancer un serveur éphémère local via CDN pour vous permettre de modifier le template en WYSIWYG en temps réel. La réconciliation bidirectionnelle synchronise les ajustements manuels dans l’arbre source de l’agent.

Tableau comparatif des approches d’édition email

Le choix d’un moteur d’email dépend de la maturité technique de l’équipe et du niveau d’autonomie requis pour les utilisateurs non-techniques.

Bonnes pratiques de déploiement en production

Lors de l’implémentation de Templatical dans une infrastructure d’entreprise, quelques règles d’ingénierie s’imposent :

• Compilation finale côté serveur : Bien que le SDK puisse compiler le MJML en HTML dans le navigateur, il est vivement conseillé de ne persister en base que l’AST JSON. La compilation finale vers le HTML doit être exécutée ou validée par vos workers d’envoi d’emails (via mjml en Node.js) afin d’éviter toute injection malveillante de code dans le client de messagerie du destinataire.
• Sanitisation stricte des merge tags : Si vous autorisez les utilisateurs finaux à saisir des variables de templating, implémentez une liste blanche stricte de clés autorisées afin d’éviter la fuite de champs sensibles ou l’exploitation de failles de type Server-Side Template Injection (SSTI).
• Isolation du stockage d’images : Configurez un bucket objet dédié avec politique d’accès public en lecture seule et scan antivirus automatique en amont sur le webhook d’upload des assets.

Conclusion

Le SDK Templatical comble un vide important dans l’écosystème de l’emailing applicatif. En s’affranchissant du modèle SaaS captif sans renoncer à une interface utilisateur drag-and-drop moderne, il redonne aux équipes d’ingénierie la maîtrise complète de leurs données, de leur pipeline de compilation MJML et de leur infrastructure d’envoi.

Si vous voulez plus d’information sur l’infrastructure vous pouvez voir mon repo à ce sujet : https://github.com/ravindrajob/InfraAtHome