Migration von Unlayer

Das Paket @templatical/import-unlayer konvertiert Unlayer-Design-JSON (die Ausgabe von editor.saveDesign(...) aus react-email-editor oder dem gehosteten Unlayer-Editor) in Templaticals TemplateContent-Format.

WARNING

Dieses Paket befindet sich in aktiver Entwicklung. Einige Inhaltstypen und erweiterte Funktionen werden möglicherweise noch nicht vollständig unterstützt. Testen Sie Ihre konvertierten Templates, bevor Sie sie in Produktion einsetzen.

Installation

npm

npm install @templatical/import-unlayer

pnpm

pnpm add @templatical/import-unlayer

yarn

yarn add @templatical/import-unlayer

bun

bun add @templatical/import-unlayer

Ohne Build-Schritt (CDN)

Sie können es auch von einem CDN laden:

<script type="module">
  import { convertUnlayerTemplate } from 'https://cdn.jsdelivr.net/npm/@templatical/import-unlayer/+esm';
  // ...dann konvertieren wie im Abschnitt „Verwendung“ unten
</script>

Verwendung

import { convertUnlayerTemplate } from '@templatical/import-unlayer';

// Laden Sie Ihr Unlayer-Design-JSON (was auch immer editor.saveDesign zurückgegeben hat)
const res = await fetch('/api/unlayer-templates/123');
const unlayerJson = await res.json();

// Ins Templatical-Format konvertieren
const { content, report } = convertUnlayerTemplate(unlayerJson);

// Im Editor verwenden
const editor = await init({
  container: '#editor',
  content,
});

// Den Konvertierungsbericht auf Probleme prüfen
console.log(report);

Die Funktion gibt ein ImportResult zurück mit:

• content — das konvertierte TemplateContent, bereit für den Editor
• report — ein Konvertierungsbericht mit dem Status jedes Inhaltsknotens (converted, approximated, html-fallback oder skipped)

Status	Bedeutung
converted	Ohne Verlust auf einen Templatical-Block abgebildet.
approximated	Abgebildet, mit Clamp oder Flatten — note sagt, was sich geändert hat.
html-fallback	Kein Block-Äquivalent; das Original-Markup ist ein HtmlBlock.
skipped	Keine Ausgabe (Formulare und alles, was der Konverter ablehnt).

Das Design-JSON, das Unlayers gehosteter Editor und editor.saveDesign() erzeugen, ist die Eingabe. Ein kompiliertes HTML-Export ist ein anderes Envelope — @templatical/import-html.

Block-Mapping

Unlayer-Inhaltstypen werden auf Templatical-Entsprechungen abgebildet:

Unlayer-Inhalt	Templatical-Block	Status
Text	paragraph	Konvertiert
Heading	title	Konvertiert
Image	image	Konvertiert
Button	button	Konvertiert
Divider	divider	Konvertiert
Spacer	spacer	Konvertiert
Html	html	Konvertiert
Menu	menu	Angenähert (Stile können abweichen)
Social	social	Konvertiert (16 Plattformen abgebildet)
Video	video	Konvertiert
Timer	html	HTML-Fallback (manuell neu aufbauen)
Form	—	Übersprungen

Unbekannte Inhaltstypen werden als Fallback in HTML-Blöcke konvertiert.

Konvertierung des Spaltenlayouts

Unlayer organisiert Inhalte in Reihen mit Spalten, deren Breiten aus einem cells-Gewichtungsarray stammen. Diese werden auf Templaticals SectionBlock mit dem passenden ColumnLayout abgebildet:

Unlayer-cells	Templatical-Layout
[1] (einzelne Spalte)	reduziert — kein Section-Wrapper
[1, 1] (gleiche Hälften)	'2'
[1, 1, 1] (gleiche Drittel)	'3'
[1, 2]	'1-2'
[2, 1]	'2-1'
4+ Zellen	auf eine einzelne Spalte reduziert, mit Warnung

Zellverhältnisse, die keinem Standardlayout entsprechen, werden auf das nächstliegende verfügbare abgebildet.

Template-Einstellungen

Globale Template-Einstellungen werden übertragen, wo möglich:

• Breite — Unlayers body.values.contentWidth wird auf settings.width abgebildet
• Hintergrundfarbe — body.values.backgroundColor bleibt erhalten; Hintergründe auf Reihenebene werden auf den entsprechenden SectionBlock übertragen
• Schriftfamilie — body.values.fontFamily.value wird auf settings.fontFamily übertragen

Bekannte Einschränkungen

• Custom Fonts — Unlayers Custom-Font-Deklarationen werden nicht automatisch importiert. Fügen Sie sie manuell über die fonts-Konfigurationsoption hinzu.
• Anzeigebedingungen / dynamische Inhalte — Unlayers Syntax für bedingte Inhalte hat keine direkte Entsprechung und wird bei der Konvertierung verworfen. Nutzen Sie Templaticals Anzeigebedingungen, um sie neu aufzubauen.
• Custom-Module / Blöcke aus kostenpflichtigen Tarifen — Unlayers Custom Blocks werden in Platzhalter-HTML-Blöcke konvertiert. Bauen Sie sie als Custom Block neu auf, wenn sie wiederverwendbar sind.
• Formulare — Unlayers Formular-Blöcke werden übersprungen. Die meisten E-Mail-Clients blockieren aus Sicherheitsgründen das Absenden von Formularen; bauen Sie den Call-to-Action als Button neu auf, der auf ein gehostetes Formular verlinkt.
• Timer / Countdowns — Werden als Platzhalter-HTML-Block importiert. Kein type: "countdown" erzeugen: dieser Block braucht Clouds serverseitiges GIF, der OSS-Renderer kann es nicht erzeugen. Als statischen Titel oder Absatz neu aufbauen (Datum, oder „noch X Tage“) oder den HTML-Platzhalter behalten.
• AMP for Email — wird in Templatical derzeit nicht unterstützt.

Konvertierte Templates überprüfen

Überprüfen Sie nach der Konvertierung die Ausgabe im Editor auf:

1. Fehlende Bilder (bei Bedarf neu hochladen oder URLs aktualisieren)
2. Schriftdarstellung (Custom Fonts zur Editor-Konfiguration hinzufügen)
3. Spaltenverhältnisse (Layouts anpassen, falls das automatische Mapping nicht passt)
4. Abstände und Padding (im Block-Einstellungspanel feinjustieren)