Theme
Live-Builder
Texte und Bilder direkt auf der gerenderten Seite ändern — auf jeder Webseite, egal womit sie gebaut wurde. Kein Frontend-Refactor, kein erneutes KI-Prompten, kein Theme-Editing.
Der Live-Builder funktioniert auf Astro, statischem HTML5, KI-generierten Seiten, WordPress, Joomla, Webflow, Wix, Next/Nuxt/SvelteKit — überall.
Warum das mit allem geht
Der Live-Builder arbeitet auf dem gerenderten DOM im Browser, nicht am Quellcode. Sobald HTML im Browser steht, kann Peacock es markieren, bearbeiten und für anonyme Besucher patchen. Der Generator ist egal.
So funktioniert es
- Du lädst deine Seite mit aktivem Edit-Mode. Peacock scannt die Seite, markiert editierbare Bereiche (Überschriften, Absätze, Bilder) und zeigt eine Bearbeitungsleiste unten.
- Klick auf einen Text → direkt bearbeiten. Klick auf ein Bild → URL tauschen.
- Veröffentlichen → ab sofort sehen alle Besucher deine Änderung.
- Peacock merkt sich die Änderung pro (Seite, Bereich) und patcht den DOM beim Laden — auch nach einem Re-Deploy deiner Quelldateien.
Die Wiedererkennung der Bereiche läuft dreistufig: UUID-Stempel → CSS-Selector → Text-Fingerprint. Bei statischen / KI-Seiten, wo der Stempel beim nächsten Deploy verloren geht, ist der Fingerprint der echte Anker — deine Änderungen überleben.
Integration — der universelle Weg
Zwei Script-Tags im <head> (oder vor </body>). Das ist alles:
html
<!-- Patcht den DOM für ALLE Besucher mit deinen Änderungen -->
<script src="https://peacock-cms.webhoch.com/embed.js"
data-peacock-api="https://peacock-cms.webhoch.com"
data-peacock-space="dein-space" defer></script>
<!-- Klick-zum-Bearbeiten für eingeloggte Redakteur:innen -->
<script src="https://peacock-cms.webhoch.com/peacock-edit-mode.js"
data-peacock-api="https://peacock-cms.webhoch.com"
data-peacock-space="dein-space" defer></script>peacock-edit-mode.js liest den Token aus sessionStorage (gesetzt beim Login über die zentrale Admin- oder Per-Site-Admin-Oberfläche) — es landet nie ein Token im Seiten-HTML.
Edit-Mode nur für Redakteur:innen
Lade peacock-edit-mode.js nur, wenn jemand eingeloggt ist. Auf einer öffentlichen Seite reicht embed.js allein — es patcht nur, editiert nichts. Die CMS-Plugins unten machen das automatisch.
Per-Plattform: der 1-Klick-Weg
| Plattform | Weg |
|---|---|
| Statisches HTML5 / KI-Seiten | Die zwei Script-Tags oben in den <head>. Fertig. |
| WordPress | Peacock-CMS-Plugin installieren → Einstellungen → Peacock CMS → „Live-Builder aktivieren" ankreuzen. Kein Theme-Editing. |
| Astro / Next / Nuxt / SvelteKit / Remix / Eleventy | npx @peacock/cli init <framework> --live-builder schreibt die Tags ins Layout. |
| Joomla | Peacock-System-Plugin installieren + aktivieren (injiziert die Tags automatisch). |
| Drupal / TYPO3 | Peacock-Modul / -Extension (injiziert via hook_page_attachments / TypoScript). |
| Webflow / Wix / Squarespace | Die zwei Script-Tags ins „Custom Code / Head"-Feld der Site-Settings. |
Was bearbeitbar ist (heute)
| Element | Aktion |
|---|---|
Überschriften (h1–h6) | Inline-Text bearbeiten |
| Absätze, Listen, Zitate, Bildunterschriften | Inline-Text bearbeiten |
Bilder (img) | Quell-URL tauschen |
Links (a) | Ziel + Text ändern (API) |
Inline-Formatierung (fett, kursiv, Link) bleibt erhalten und wird zweifach XSS-gefiltert: serverseitig beim Speichern und nochmals clientseitig beim Rendern.
Sicherheit
| Vector | Schutz |
|---|---|
| Stored XSS über bearbeitete Texte | Server-seitiger Allow-List-Sanitizer (HtmlFragmentSanitizer) + clientseitige Re-Sanitisierung im Patcher. Nie innerHTML mit ungefiltertem Inhalt. |
| Token-Leak | Token nur in sessionStorage (Tab-scoped), nie im HTML, nie an die Quell-Seite zurückgeschrieben. |
| CORS bei SRI | embed.js / peacock-edit-mode.js liefern Access-Control-Allow-Origin + Cross-Origin-Resource-Policy, sodass crossorigin="anonymous" mit SRI funktioniert. |
| Draft-Leak | Der öffentliche CDN-Endpoint liefert nur veröffentlichte Overrides — Entwürfe sehen nur eingeloggte Redakteur:innen. |
| UI-Isolation | Die Edit-Leiste lebt im Shadow-DOM — kein CSS-Leak zur Host-Seite und umgekehrt. |
API (für eigene Integrationen)
| Endpoint | Auth | Zweck |
|---|---|---|
POST /v1/spaces/{slug}/dom-overlays/regions | Token | Bereiche registrieren (idempotent) |
GET /v1/spaces/{slug}/dom-overlays/by-path?path= | Token | Overrides + Bereiche laden (Editor) |
PATCH /v1/spaces/{slug}/dom-overlays/by-path | Token | Override speichern (+ optional publish) |
POST /v1/spaces/{slug}/dom-overlays/publish | Token | Version veröffentlichen |
GET /v1/spaces/{slug}/dom-overlays/versions?path= | Token | Versions-Historie |
GET /v1/cdn/{space}/dom-overlay?path= | anonym, edge-cached | Was embed.js zum Patchen lädt |
Der öffentliche Endpoint reichert jeden Override mit seinem _locator (Selector + Fingerprint + Tag) an, damit der Patcher den Knoten auch ohne DOM-Stempel findet.
Grenzen (heute) + Roadmap
- Heute: Text + Bild-URL + Link. Inline-Formatierung. Versions-API.
- Als Nächstes: Asset-Library-Modal statt URL-Prompt, Layout-Aktionen (Sektionen umordnen), CSS-Variable-Theming (Farben/Fonts), Multi-Editor-Presence-Anzeige.