Inline-Editing im Live-Preview

Im Page Builder lassen sich Texte direkt in der Vorschau bearbeiten — ohne den seitlichen Editor zu öffnen. Das macht aus dem Setzkasten-Admin ein WYSIWYG-Werkzeug, ohne dass die Website zur Laufzeit darauf angewiesen wäre.

Aktivieren

Im Page Builder oben in der Viewport-Bar das Bleistift-Symbol klicken. Der Modus bleibt beim nächsten Login erhalten (gespeichert via localStorage).

Was geht inline

• Plain-Text-Felder (f.text()): Klick → contenteditable, Enter/Blur committet, Escape verwirft.
• Rich-Text-Felder (f.text({ formatting: true })): Klick öffnet ein schwebendes TipTap-Toolbar-Overlay (Bold, Italic, Strike, Link).
• Subfelder von Array-Items (items.0.title) — innere Felder in .map()-Iterationen werden automatisch erkannt.
• Verschachtelte Object-Felder (address.street).

Was nicht inline geht

• Array-Items hinzufügen, löschen oder umsortieren — dafür den Editor in der Sidebar öffnen.
• Bilder hochladen.
• Boolean- / Select- / Color-Felder.

Im Inline-Mode zeigt ein dezenter Hinweis-Badge an Listen-Sections, dass für diese Operationen der Editor gebraucht wird — mit Direkt-Link zur passenden Section.

Voraussetzung: Bindings im Template

Damit Setzkasten weiß, welcher DOM-Knoten welchem Feld entspricht, brauchen die gerenderten Elemente ein data-sk-field-Attribut. Der einfachste Weg: die <SkField>-Komponente.

---
// Astro-Komponente — automatisches Binding via 
import { SkField } from '@setzkasten-cms/astro/components'
import { getSection } from 'setzkasten:content'

const data = getSection('hero')
---


  
    
{data?.heading}
  

  
    
{data?.subheading}
  

Alternativ direkt am Element:

Bestandscode automatisch nachrüsten

Wer bereits viele .astro-Templates hat, kann sie per CLI mit den passenden Bindings versehen lassen — der Patcher arbeitet AST-basiert, ohne Whitespace-Drift.

# bestehende Astro-Datei automatisch mit data-sk-field versehen
pnpm setzkasten adopt src/components/Hero.astro

Globaler Draft-Reset

Mehrere Inline-Edits sammeln sich als Pending-Changes, bis „Live setzen" gedrückt wird. Mit Verwerfen in der Action-Bar können alle ausstehenden Änderungen auf einen Schlag zurückgesetzt werden — nach Bestätigung.

Fallback-Hinweis

Sections ohne data-sk-field erkennt das Preview-Script automatisch und zeigt im Page Builder einen Hinweis: „Live-Editing nicht verfügbar für diese Section". Der Editor in der Sidebar funktioniert weiterhin.