Templatical

Schnellstart ​

1. Pakete installieren ​

bash
npm install @templatical/editor @templatical/renderer
bash
pnpm add @templatical/editor @templatical/renderer
bash
yarn add @templatical/editor @templatical/renderer
bash
bun add @templatical/editor @templatical/renderer

2. Editor einbinden ​

Diese Datei in den Browser legen. Kein Bundler. Framework- und Paketmanager-Mounts stehen unter Installation. Für Produktion eine Version pinnen — CDN.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Templatical Editor</title>
  <link
    rel="stylesheet"
    href="https://unpkg.com/@templatical/editor/dist/cdn/editor.css"
  />
  <style>
    body { margin: 0; }
    #editor { height: 100vh; }
  </style>
</head>
<body>
  <div id="editor"></div>
  <script type="module">
    import { init } from "https://unpkg.com/@templatical/editor/dist/cdn/editor.js";

    const editor = await init({
      container: "#editor",
    });

    const json = editor.getContent();
    const mjml = await editor.toMjml();
  </script>
</body>
</html>

json speichern, damit Nutzer das Template später weiter bearbeiten können. mjml auf dem Server kompilieren — toMjml() erzeugt kein HTML.

3. MJML zu HTML kompilieren ​

Auf dem Server kompilieren Sie das gerade gesendete MJML mit einer beliebigen MJML-Bibliothek — Node, PHP, Python, Ruby und andere. So funktioniert das Rendering listet sie. Das Node-Paket ist mjml:

bash
npm install mjml
bash
pnpm add mjml
bash
yarn add mjml
bash
bun add mjml
ts
import mjml2html from "mjml";

const { html } = mjml2html(mjml);
// html ist versandfertig

Aus einer gespeicherten JSON-Datei, ohne den Editor zu mounten (braucht ebenfalls mjml):

bash
npx -y @templatical/template-tools render template.json --format html -o email.html
bash
pnpm dlx @templatical/template-tools render template.json --format html -o email.html
bash
yarn dlx @templatical/template-tools render template.json --format html -o email.html
bash
bunx @templatical/template-tools render template.json --format html -o email.html

Siehe Template Tools.

Shadow DOM als Standard

Der Editor mountet standardmäßig innerhalb eines Shadow DOM, sodass Host-Seiten-CSS nicht in Editor-Elemente durchschlagen kann. Verwenden Sie ein <div> — oder ein beliebiges Shadow-Host-fähiges Element — als Container; Elemente wie <table>, <form> oder <input> können keinen Shadow Root aufnehmen.

Übergeben Sie shadowDom: false, um zu deaktivieren, falls Sie einen ungewöhnlichen Container benötigen, Editor-Interna über document.querySelector ansprechen oder Firefox <101 / Safari <16.4 unterstützen müssen. Siehe den Shadow-DOM-Leitfaden für die vollständige Kompromissliste und Theming via :host.

Nächste Schritte ​

  • Einstiegspunkte — Einbinden, Backend, Prompt oder JSON → HTML.
  • Einbetten — Container-Regeln, Stacking und was die CSS-Isolation bricht.
  • Backend anbinden — Speichern, Versionen, Kommentare, gespeicherte Blöcke, Medien, Test-E-Mail, Rendern.
  • Template Tools — Validieren, Rendern, Importieren und Live-Vorschau per CLI oder Skript.
  • So funktioniert das Rendering — JSON → MJML → HTML, und was gespeichert werden sollte.