Visuelles Editieren in Payload CMS: Unser Live Preview Inspector Plugin (Version 1.6.0)
Ein Headless CMS strukturiert Daten sauber. Redaktionsteams arbeiten dadurch jedoch oft in tief geschachtelten Formularen ohne visuelle Verbindung zum Frontend. Das Suchen nach dem richtigen Eingabefeld für einen bestimmten Textblock auf der Website kostet im Alltag viel Zeit.
Mit unserem Open-Source-Plugin @raffiniert-media-ag/payload-live-preview-inspector musst du in Payload CMS nicht mehr manuell nach dem richtigen Feld suchen. Klickst du in der Live-Vorschau auf ein Element deiner Website, springt das Payload-Interface im Backend sofort zum dazugehörigen Eingabefeld und fokussiert es.
Neue Features in Version 1.6.0
Wir haben unser Plugin weiterentwickelt und optimiert. Mit der aktuellen Version 1.6.0 läuft die Content-Pflege noch einfacher ab:
- Automatisches Tagging: Felder und Elemente im Frontend werden automatisch erkannt und zugeordnet. Der Aufwand, Daten-Attribute manuell im Code zu hinterlegen, sinkt auf ein Minimum.
- Automatischer Tab-Wechsel: Liegt ein Eingabefeld in einem inaktiven Tab des Payload-Admin-Panels, wechselt das System beim Klick im Frontend selbstständig den Tab im Backend und fokussiert das richtige Feld.
- Live im Einsatz: Wir haben das aktualisierte Plugin direkt auf unserer eigenen Website raffiniert.biz integriert und nutzen es täglich für unsere Inhaltsseiten.
Die Vorteile im Redaktionsalltag
- Keine Sucherei: Deine Redakteure navigieren visuell durch das Frontend. Ein Klick auf die Hero-Sektion öffnet direkt das passende Textfeld.
- Präzise Zuordnung: Selbst komplexe Landingpages mit vielen verschachtelten Blöcken lassen sich direkt, schnell und fehlerfrei bearbeiten.
- Einfaches Setup: Das Plugin lässt sich mit wenigen Zeilen Code in dein bestehendes Payload-Setup und dein Frontend integrieren.
So installierst du das Plugin
Das Paket installierst du direkt über npm:
npm install @raffiniert-media-ag/payload-live-preview-inspector
Danach bindest du das Plugin in deiner payload.config.ts ein und fügst den Inspector-Komponentenaufruf in dein Frontend (zum Beispiel in Next.js) ein. Die vollständige Dokumentation und alle Code-Beispiele findest du direkt in unserem GitHub-Repository.
Ein Blick unter die Haube: Wie das Plugin Felder erkennt
Damit ein Klick im Frontend überhaupt weiss, welches Feld im Backend gemeint ist, braucht jedes Element auf der Seite einen "Pfad" zu seinem Payload-Feld. Das Plugin kombiniert dafür drei Ebenen, die sich gegenseitig ergänzen:
- Explizites Tagging: Mit der Hilfsfunktion pathOf() markierst du ein Element im Code selbst – das funktioniert immer, auch bei Bildern, Zahlen oder ganzen Blöcken ohne Text.
- Stega-Encoding (automatisch): Aktivierst du die Option stega: true, kodiert das Plugin den Feldpfad direkt unsichtbar in den Text-String. So bleibt die Zuordnung erhalten, selbst wenn der Text über mehrere Komponenten oder Server-/Client-Grenzen hinweg gerendert wird.
- Value Matching (zero-config): Ohne jede Konfiguration vergleicht das Plugin den sichtbaren Text im Frontend mit den aktuellen Feldwerten im Formular. Stimmt ein Element exakt mit genau einem Feldwert überein, wird es automatisch zugeordnet.
Aus den automatisch erkannten Feldern leitet das Plugin zusätzlich ganze Block-Container ab – ein Klick auf den Rand eines Blocks springt so direkt zur passenden Zeile im Formular.
Technisch ist das Plugin in vier separate Einstiegspunkte aufgeteilt (u. a. für Admin, Frontend-Client und reine Hilfsfunktionen), damit im öffentlichen Frontend-Bundle deiner Website keine unnötigen Abhängigkeiten landen. Ausserhalb der Live-Vorschau – also für alle echten Website-Besucher – ist der Code komplett inaktiv. Das Ergebnis: Eine Produktivseite mit dem Plugin erreicht weiterhin 100 im mobilen Lighthouse-Performance-Score.
Open Source aus der Praxis
Wir entwickeln unsere Tools direkt aus dem Agenturalltag heraus, um die tägliche Arbeit an grossen E-Commerce-Plattformen und Webseiten effizienter zu machen. Da das Plugin unseren Kunden und uns viel Zeit spart, stellen wir es der Payload-Community kostenlos zur Verfügung.
Probier die Version 1.6.0 aus. Wir freuen uns über Feedback, Bugreports und deine Pull Requests auf GitHub.
Weitere Stories
Wie wir gemeinsam mit Coop-Experten die Lade-Performance der E-Commerce-Plattform optimieren
Ein Einblick in die Zusammenarbeit mit den Inhouse-Spezialisten von Coop. Erfahren Sie, wie durch die gemeinsame technische Optimierung kritischer Render-Pfade und Code-Strukturen die Lade-Performance der E-Commerce-Plattform nachhaltig gesteigert wurde.
Barrierefreiheit (Accessibility) im Schweizer Onlinehandel: Gesetzliche Anforderungen und technische Umsetzung.
Barrierefreiheit im Schweizer Onlinehandel ist geschäftskritisch: Der EAA verschärft die Rechtslage, bis zu 20 % der Kunden werden sonst ausgeschlossen. Wer jetzt handelt, gewinnt Rankings, Performance und Conversion.
Von Excel zur App: Wie Kilian Ricklin mit einer massgeschneiderten PWA sein Coaching-Business skaliert hat.
Erfahre, wie wir für Kilian Ricklin manuelle Prozesse durch eine performante Progressive Web App (PWA) ersetzt haben. Mit Fokus auf Kosteneffizienz und Nutzererlebnis haben wir eine zentrale Plattform geschaffen, die dein Kunden-Management revolutioniert und echtes Wachstum ermöglicht.
In 4 Wochen zum Start: Wie eine neue Event-Location dank schneller Web-Lösung durchstartete
Unter extremem Zeitdruck entwickelten wir für die Event-Location Sprängi in nur einem Monat einen SEO-optimierten Onepager mit Buchungssystem – ein Beispiel für unsere pragmatische Herangehensweise, die lokale Sichtbarkeit und reibungslose digitale Prozesse ab dem ersten Tag ermöglicht.
Das Kaufverhalten im Onlineshop: Wie Onlineshop-Giganten gezielt dein Kaufverhalten beeinflussen
Im hart umkämpften E-Commerce setzen Plattformen wie Amazon, Zalando, Etsy und Temu nicht nur auf Preise oder Sortiment. Entscheidend sind psychologische Mechanismen und gezielte UX/UI-Strategien, die Kaufentscheidungen beeinflussen, Vertrauen stärken und Kunden langfristig binden.