Download the PHP package think-digital-agency/contao-live-preview without Composer

Contao Live Preview

[English] A native live preview panel for the Contao 5 backend. Open any page, article or content element — the sidebar immediately shows the matching frontend view. Save — only the edited section refreshes instantly, no page reload, no scroll loss. Hover over any element in the preview — a label shows its type, click opens the edit form directly.

Schluss mit dem ewigen Tab-Wechsel. Contao Live Preview bringt eine direkte Frontend-Vorschau als ausklappbare Sidebar ins Contao 5 Backend — immer passend zu dem, was du gerade bearbeitest. Mit einem Workflow-Gefühl, das man so aus Contao nicht kennt.

Was macht die Erweiterung?

Du öffnest einen Artikel oder ein Inhaltselement im Backend — und siehst sofort, wie es im Frontend aussieht. Du speicherst — nur der bearbeitete Bereich aktualisiert sich direkt in der Vorschau, ohne Reload, ohne Scrollen. Du fährst mit der Maus über ein Element in der Vorschau — ein Hover-Label zeigt dir Typ und Name, ein Klick öffnet die Bearbeitungsmaske direkt.

Kein Builder. Kein Kompromiss. Einfach Contao, wie es sein sollte.

Features

• Live-Vorschau im Backend — öffnest du eine Seite, einen Artikel oder ein Inhaltselement, zeigt die Sidebar sofort die passende Frontend-Ansicht. Ohne Konfiguration, ohne zusätzlichen Klick.
• Hot-Refresh nach dem Speichern — nur der bearbeitete Abschnitt wird direkt in der Vorschau aktualisiert. Scroll-Position bleibt, kein Flackern.
• Automatische Aktualisierung bei Strukturänderungen — löscht, dupliziert, verschiebt oder versteckst du ein Element, lädt die Vorschau nach der Backend-Weiterleitung automatisch neu.
• Direkte Aktionen aus der Vorschau — das aktive Element zeigt inline Schaltflächen zum Duplizieren (⧉) und zum Einfügen eines neuen Elements danach (+). Ein Klick, keine Suche im Backend.
• Hover-Inspektion — fährt man mit der Maus über Artikel oder Inhaltselemente, erscheint ein kontextuelles Label mit Typ und Name. Klick auf den Stift öffnet die Bearbeitungsmaske direkt.
• Kontextuelles Highlighting — das aktive Inhaltselement wird blau hervorgehoben, der zugehörige Artikel gestrichelt umrahmt. Kontext und Detail immer gleichzeitig sichtbar.
• Funktioniert mit jedem Theme — die Extension setzt alle nötigen Marker automatisch. Keine Template-Anpassungen erforderlich.
• Frei anpassbares Panel — per Drag in der Breite anpassbar, mit Zoom-Steuerung für kleinere Bildschirme.
• Persistente Sidebar — die Vorschau überlebt alle Backend-Navigationen ohne Zustandsverlust.
• Kostenlos und Open Source — LGPL-3.0, keine Lizenzkosten, keine versteckten Features.
• Nativ integriert im Contao Design+ Theme — wer auf Design+ setzt, bekommt Hot-Refresh, Hover-Inspektion und Highlighting vollständig vorkonfiguriert, ohne eine einzige Zeile Konfiguration.

Perfekt kombiniert: Contao Design+ Theme

Diese Extension wurde im Alltag mit dem Contao Design+ Theme entwickelt und ist dort vollständig integriert. Design+ liefert alle nötigen Marker direkt in den Templates mit — Hot-Refresh, Hover-Inspektion und Highlighting funktionieren damit auf Anhieb, ohne jegliche Konfiguration.

Wer professionelle Contao-Projekte baut, bekommt mit Design+ und Live Preview einen Workflow mit einem nativen Gefühl — bei vollem Zugriff auf das gewohnte Contao Backend.

Voraussetzungen

• PHP 8.2 oder höher
• Contao 5.3 oder höher (Contao 5.7+ empfohlen)

Installation

Die Extension registriert sich automatisch über den Contao Manager Plugin. Keine weitere Konfiguration erforderlich.

Verwendung

Öffne eine beliebige Seite, einen Artikel oder ein Inhaltselement im Contao Backend. Oben rechts im Backend-Header erscheint der „Live Preview"-Button. Klicken — fertig.

Die Vorschau aktualisiert sich automatisch wenn du:

• zu einer anderen Seite, einem anderen Artikel oder Inhaltselement navigierst
• einen Datensatz speicherst (direkter Hot-Refresh)
• innerhalb der Vorschau auf einen Link klickst

Erweiterung: eigene Tabellen einbinden

Kind-DCAs: nichts zu tun

Eine eigene Kind-Tabelle, die per DCA unter einem Artikel, einer Seite oder einem Inhaltselement hängt ($GLOBALS['TL_DCA']['tl_x']['config']['ptable'] bzw. dynamicPtable), wird automatisch aufgelöst — der Resolver folgt der ptable-Kette bis zu tl_content / tl_article / tl_page. Kein Code nötig.

Eigener Resolver für alles andere

Für Tabellen mit nicht-standardmäßiger Ablage (News, Kalender, externe Daten) implementierst du PreviewUrlResolverInterface. Der Service wird per Autoconfiguration in die Resolver-Chain aufgenommen — kein Alias, keine Dekoration. Gib für fremde Tabellen null zurück; die Chain fragt dann den nächsten Resolver, zuletzt den bundle-eigenen.

Mindestens pageId + alias zurückgeben; optionale Zusatz-Keys (articleId, contentElementId, …) verfeinern das Highlighting.

Volle Kontrolle statt Chain: PreviewUrlResolverInterface weiterhin per alias: auf einen einzelnen eigenen Service umbiegen — dann ersetzt dieser die komplette Auflösung inkl. ptable-Walk.

Für dynamische Auflösung, die vom Request-Zustand abhängt, gibt es zusätzlich das clp:resolve-Event (siehe docs/EXTENDING.md).

Erweiterung: Badge-Aktionen und Nachrichten (JS)

Neben dem PHP-Resolver stellt die Extension zwei JavaScript-Registries bereit, über die sich Badge-Aktionen und Nachrichten-Handler ergänzen, ersetzen oder entfernen lassen — ohne die Quelldateien dieser Extension anzufassen:

• CLP_BE (Backend-Sidebar): eingehende Nachrichten-Handler und ausgehende Payload-Augmenter (on/off/augment).
• CLP_FE (Frontend-iframe): Badge-Aktionen mit Sektionen und Positionen (set/remove/move).

Beide Registries kommunizieren über das in docs/PROTOCOL.md dokumentierte, versionierte postMessage-Protokoll (v1).

Eine ausführliche Beschreibung der APIs, der stabilen Core-IDs, des ctx-Kontextobjekts und komplette Beispiele (Aktion hinzufügen, Core-Aktion ersetzen, Aktion entfernen, Reihenfolge ändern, Backend-Handler registrieren) finden sich in docs/EXTENDING.md.

Bekannte Einschränkungen

• Inhaltselemente ohne CSS-ID in mehrspaltigen Layouts: Elemente können falsch zugeordnet werden, wenn Spalten im HTML in anderer Reihenfolge erscheinen als in der DB. Workaround: CSS-ID am betroffenen Element setzen.
• Verschachtelte Inhaltselemente (z. B. Akkordeon-Inhalte): die Positionszählung kann versetzt sein. Mit CSS-ID ist das Matching zuverlässig.
• noMarkup-Artikel: Hot-Refresh und Highlighting benötigen den Standard-id="article-{N}"-Wrapper.
• Seiten-Datensätze: das Speichern einer Seite löst keinen Hot-Refresh aus. Ein manuelles Neuladen der Sidebar ist nötig.

Lizenz

LGPL-3.0-or-later — siehe LICENSE.

Entwickelt von Think Digital Agency.