PHPackages think-digital-agency/contao-live-preview - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. think-digital-agency/contao-live-preview ActiveContao-bundle[Utility & Helpers](/categories/utility) think-digital-agency/contao-live-preview ======================================== Native frontend preview panel for the Contao 5 backend — live-edit pages, articles and content elements without switching tabs. v2.3.15(1w ago)5113↑75%LGPL-3.0-or-laterPHPPHP ^8.2 Since May 8Pushed 1w ago1 watchersCompare [ Source](https://github.com/think-digital-agency/contao-live-preview)[ Packagist](https://packagist.org/packages/think-digital-agency/contao-live-preview)[ Docs](https://github.com/think-digital-agency/contao-live-preview)[ RSS](/packages/think-digital-agency-contao-live-preview/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (2)Versions (31)Used By (0) Contao Live Preview =================== [](#contao-live-preview) [![Packagist](https://camo.githubusercontent.com/48f6948a0a6f43ef5af2712d0a4468def3f0b15951663b36397b13fc7576e9f5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7468696e6b2d6469676974616c2d6167656e63792f636f6e74616f2d6c6976652d707265766965772e737667)](https://packagist.org/packages/think-digital-agency/contao-live-preview)[![Downloads](https://camo.githubusercontent.com/fb597c5b298adf18b39f380f27b96fbfc6b728f758de727aea2bc20d0aa4d47a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7468696e6b2d6469676974616c2d6167656e63792f636f6e74616f2d6c6976652d707265766965772e737667)](https://packagist.org/packages/think-digital-agency/contao-live-preview)[![License](https://camo.githubusercontent.com/11b472abc1b0db882e91c20abec6ff056201ae6f9915907dc9eb1139682814d0/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f7468696e6b2d6469676974616c2d6167656e63792f636f6e74616f2d6c6976652d707265766965772e737667)](LICENSE) **\[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. ``` composer require think-digital-agency/contao-live-preview ``` --- **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. [![Contao Live Preview Screenshot](https://raw.githubusercontent.com/think-digital-agency/contao-live-preview/main/docs/preview.png)](https://raw.githubusercontent.com/think-digital-agency/contao-live-preview/main/docs/preview.png) --- Was macht die Erweiterung? -------------------------- [](#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 -------- [](#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](https://themes.contao.org/de/index/contao-design-plus)** — wer auf Design+ setzt, bekommt Hot-Refresh, Hover-Inspektion und Highlighting vollständig vorkonfiguriert, ohne eine einzige Zeile Konfiguration. --- Perfekt kombiniert: Contao Design+ Theme ---------------------------------------- [](#perfekt-kombiniert-contao-design-theme) Diese Extension wurde im Alltag mit dem **[Contao Design+ Theme](https://themes.contao.org/de/index/contao-design-plus)** 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 --------------- [](#voraussetzungen) - PHP 8.2 oder höher - Contao 5.3 oder höher (Contao 5.7+ empfohlen) --- Installation ------------ [](#installation) ``` composer require think-digital-agency/contao-live-preview php bin/console assets:install php bin/console cache:clear ``` Die Extension registriert sich automatisch über den Contao Manager Plugin. Keine weitere Konfiguration erforderlich. --- Verwendung ---------- [](#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 -------------------------------------- [](#erweiterung-eigene-tabellen-einbinden) Über das `PreviewUrlResolverInterface` lässt sich die Extension auf eigene Tabellen ausweiten — zum Beispiel News, Kalender oder Events: ``` // src/Service/ExtendedPreviewUrlResolver.php use ThinkDigital\ContaoLivePreview\Service\PreviewUrlResolver; use ThinkDigital\ContaoLivePreview\Service\PreviewUrlResolverInterface; class ExtendedPreviewUrlResolver implements PreviewUrlResolverInterface { public function __construct( private readonly PreviewUrlResolver $inner, private readonly Connection $db, ) {} public function resolve(string $table, int $id): ?array { if ('tl_news' === $table) { $row = $this->db->fetchAssociative( 'SELECT a.pid FROM tl_news n JOIN tl_news_archive a ON a.id = n.pid WHERE n.id = ?', [$id], ); return $row ? $this->inner->resolve('tl_page', (int) $row['pid']) : null; } return $this->inner->resolve($table, $id); } } ``` ``` # config/services.yaml ThinkDigital\ContaoLivePreview\Service\PreviewUrlResolverInterface: alias: App\Service\ExtendedPreviewUrlResolver ``` --- Bekannte Einschränkungen ------------------------ [](#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 ------ [](#lizenz) LGPL-3.0-or-later — siehe [LICENSE](LICENSE). Entwickelt von [Think Digital Agency](https://think-digital.agency). ### Health Score 48 — FairBetter than 94% of packages Maintenance98 Actively maintained with recent releases Popularity19 Limited adoption so far Community7 Small or concentrated contributor base Maturity57 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 27 Last Release 12d ago Major Versions v1.0.0 → v2.1.02026-05-08 ### Community Maintainers ![](https://www.gravatar.com/avatar/ec38740baaa1db826d711d2caaebf69f4bc5c99b9ceed3e4ec28c86b4850f869?d=identicon)[think-digital-agency](/maintainers/think-digital-agency) --- Top Contributors [![think-digital-agency](https://avatars.githubusercontent.com/u/6197911?v=4)](https://github.com/think-digital-agency "think-digital-agency (80 commits)") --- Tags backendcontaocontao-bundlecontao-extensioncontao5design-plusfrontend-editinglive-previewphpsymfonycontaobackendpreviewcontao-bundlecontao-extensionfrontend editorfrontend edit helper ### Embed Badge ![Health badge](/badges/think-digital-agency-contao-live-preview/health.svg) ``` [![Health](https://phpackages.com/badges/think-digital-agency-contao-live-preview/health.svg)](https://phpackages.com/packages/think-digital-agency-contao-live-preview) ``` ### Alternatives [codefog/contao-haste haste extension for Contao Open Source CMS 46668.4k162](/packages/codefog-contao-haste)[codefog/contao-news_categories News Categories bundle for Contao Open Source CMS 3187.0k6](/packages/codefog-contao-news-categories)[terminal42/contao-node Node bundle for Contao Open Source CMS 3175.6k5](/packages/terminal42-contao-node)[terminal42/contao-inserttags Contao extension to create custom insert tags. 1250.8k](/packages/terminal42-contao-inserttags)[terminal42/contao-folderpage Provides a new page type for Contao that allows you to group pages into folders. 18153.4k10](/packages/terminal42-contao-folderpage)[terminal42/contao-url-rewrite URL Rewrite bundle for Contao Open Source CMS 15100.0k3](/packages/terminal42-contao-url-rewrite) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)