Mit der neuen Erweiterung Content Preview nimmt TYPO3 einen entscheidenden Schritt in Richtung einer moderneren, benutzerfreundlicheren Redaktionsumgebung. Was ursprünglich als einfache Idee begann – ein Bearbeitungs-Button direkt im Frontend – hat sich zu einem innovativen Projekt entwickelt, das künftig das Arbeiten mit TYPO3 grundlegend verändern könnte.

Der Entwickler Łukasz Uznański berichtet, wie aus einem spontanen Gedanken ein vollständig funktionsfähiger Prototyp wurde – gefördert durch das Community-Budget Q3/2025.

Die Idee: Inhalte direkt vergleichen und bearbeiten

Andere Content-Management-Systeme bieten schon lange eine sogenannte Side-by-Side Preview, also eine parallele Ansicht von Backend und Frontend. TYPO3 hingegen arbeitete bisher ausschließlich mit getrennten Ansichten. Genau hier setzte Uznańskis Gedanke an: „Warum nicht beide Welten verbinden – die redaktionelle Bearbeitung und die Vorschau – direkt nebeneinander?“

Gemeinsam mit dem TYPO3 UX-Team entstand daraus ein Konzept, das später als offizieller Verbesserungsvorschlag für den TYPO3 v14-Entwicklungsplan aufgenommen wurde. Da jedoch keine Kapazitäten im Core-Team frei waren, reichte Uznański seine Idee als Community-Budget-Projekt ein – mit Erfolg.

Von zwei Iframes zum integrierten Modul

Der erste Ansatz war technisch simpel: ein eigenes TYPO3-Modul mit zwei nebeneinanderliegenden Iframes – links das bekannte Page-Modul, rechts die Frontend-Ansicht. Schon der erste Prototyp zeigte: Die Idee funktioniert. Doch schnell wurde klar, dass diese Lösung zu unflexibel war. Probleme mit Kommunikation zwischen den Iframes, Navigation und Konfiguration machten den Ansatz kompliziert.

Der entscheidende Wendepunkt kam durch den Tipp eines Kollegen: Statt ein neues Modul zu schaffen, sollte der Preview-Bereich direkt im bestehenden Page-Modul integriert werden. Das vereinfachte alles: • Nur noch ein Iframe nötig • Kein doppeltes Navigationssystem • Bessere Kommunikation zwischen Backend und Frontend • Nahtlose Sprachunterstützung • Keine Überschneidung im TYPO3-Docheader

Der Clou: Statt das Frontend separat zu laden, wird die Vorschau nun über einen speziellen Parameter direkt in TYPO3 generiert und per Middleware angepasst. Buttons und Skripte werden „on the fly“ eingebettet – ohne zusätzliche Serverlast.

Ein modernes Interface für Redakteure

Gemeinsam mit Frontend-Entwickler Paweł Zieliński entstand das neue Bedienkonzept. Statt klassischer Leisten oder komplexer Konfigurationsfelder gibt es jetzt ein schwebendes Hamburger-Menü, das leicht zugänglich ist und gleichzeitig Platz spart. Darin lassen sich Optionen einstellen wie: • Aktivieren oder Deaktivieren der Element-Hervorhebung • Auswahl der Highlight-Methode • Weitere Vorschau-Optionen

Damit reagiert TYPO3 auf einen langgeäußerten Wunsch vieler Redakteure: eine intuitive, visuelle Kontrolle der Inhalte – ohne ständiges Wechseln zwischen Backend und Frontend.

Technische Herausforderungen und Lösungen

Eine der größten Hürden war die Kommunikation zwischen Backend und Iframe. Da die herkömmliche Methode postMessage bei Multi-Domain-Setups schnell an ihre Grenzen stößt, wählte das Team eine andere Lösung: Die Kommunikation läuft über benutzerdefiniertes JavaScript, das per Middleware in den TYPO3-Ausgabefluss injiziert wird. Diese Methode funktioniert zuverlässig, auch in Headless-Setups, und ermöglicht bidirektionale Interaktion – etwa zur Markierung aktuell bearbeiteter Inhalte.

Experimentelle Funktionen: Navigation direkt in der Vorschau

Ein besonders spannendes Feature ist die experimentelle In-Preview-Navigation: Klickt man in der Vorschau auf einen internen Link, wechselt TYPO3 automatisch zur entsprechenden Seite im Backend. So lässt sich das Page-Tree-Navigationsmenü komplett umgehen – ein deutlicher Effizienzgewinn. Noch nicht perfekt, aber richtungsweisend: Parameterübergaben bei DataProcessors und Cross-Domain-Links sollen in künftigen Versionen folgen.

Aktueller Stand und Ausblick

Die Erweiterung Content Preview (content_preview) ist inzwischen als öffentliche TYPO3-Extension verfügbar und bietet zwei technische Ansätze: • PostMessage-Kommunikation: funktionsreich, aber domänenabhängig • Custom JavaScript Injection: experimentell, aber eleganter

Beide Varianten sind funktionsfähig und werden aktuell von der Community getestet. Die Rückmeldungen entscheiden, welcher Ansatz sich langfristig durchsetzen wird.

Geplante Erweiterungen

Der Fahrplan für die nächsten Versionen ist ambitioniert: • Zeitbasierte Vorschau: Simulation geplanter Inhalte (Start-/Stop-Datum) • Benutzer- & Gruppen-Simulation: Vorschau für unterschiedliche Rollen • Workspace-Unterstützung: Vorschau unveröffentlichter Inhalte • Flexible Anzeigemodi: Fenster, Tab oder Overlay nach Präferenz • Verbesserte Multi-Domain-Unterstützung

Diese Funktionen sollen das Arbeiten mit TYPO3 nicht nur komfortabler, sondern auch produktiver machen.

Aus einer simplen Idee – einem „Bearbeiten“-Button im Frontend – ist ein echtes Innovationsprojekt geworden. Content Preview bringt TYPO3 auf Augenhöhe mit modernen Redaktionssystemen und zeigt, wie stark die Community die Weiterentwicklung des CMS mitgestalten kann.

Was als persönliches Experiment begann, hat das Potenzial, zu einem Kernbestandteil von TYPO3 zu werden – intuitiv, effizient und redaktionsfreundlich.