Page Builder — Cmssy Docs

Überblick

Der Page Builder ist Cmssys visueller Editor zum Komponieren von Seiten aus Blöcken. Cmssy ist ein Headless-CMS: Du baust Block-Komponenten in deiner eigenen Next.js-App (App Router) mit @cmssy/react + @cmssy/next und deployst diese Site selbst. Der Editor rahmt deine deployte Site in einem iframe ein (Preview-URL deines Workspace + ?cmssyEdit=1) und steuert sie über eine postMessage-Bridge — du ziehst, klickst und bearbeitest also auf der echten Site. Wenn du veröffentlichst, wird der Content zur veröffentlichten Version, die das Delivery-API ausliefert und deine Site rendert.

Layout

Der Editor ist in fünf Zonen aufgeteilt:

Top-Bar — Seitentitel, Draft-Badge (für unveröffentlichte Änderungen), Undo/Redo-Buttons, Sprachumschalter und ein Drei-Punkte-Menü mit Seitenaktionen (Publish, Revert, Preview usw.).
Linke Sidebar — der Seitenbaum deines Workspace. Klicke eine Seite an, um sie zu öffnen. Ziehe Seiten, um sie umzusortieren. Größenveränderbar (256-512 px).
Rechter Drawer (Block Library) — Katalog der Blöcke, die du mit defineBlock in deiner App registriert hast, gruppiert nach Kategorie. Der Editor lernt das Schema jedes Blocks über die SDK-Bridge. Zieh von hier auf die Canvas, um hinzuzufügen.
Canvas — deine echte deployte Site, in einem iframe gerahmt. Blöcke rendern exakt wie in Produktion. Klicke einen Block an, um ihn auszuwählen.
Properties-Panel — fährt von rechts herein, wenn du einen Block auswählst. Jedes Feld aus dem Schema des Blocks (deklariert mit fields) erscheint hier (Text-Inputs, Medien-Picker, Link-Picker, Farb-Picker usw.).

Einen Block hinzufügen

Öffne die Block Library rechts.
Finde den gewünschten Block (scrollen oder Kategorien durchstöbern).
Ziehe ihn auf die Canvas.
Lass ihn unten fallen (hängt an) oder zwischen bestehenden Blöcken (fügt an dieser Position ein).

Beim Ablegen erscheint der Block mit seinem Default-Content (aus dem Block-Schema) und rendert live in deiner gerahmten Site. Klicke ihn an, um das Properties-Panel zu öffnen und anzupassen. Wie Blöcke definiert werden, steht unter Blöcke und Block-Entwicklung.

Hier erscheinen nur Blöcke, die du in deiner App registriert hast — der Editor liest sie über die SDK-Bridge, der Picker passt also immer zu dem, was deine Site rendern kann.

Block-Content bearbeiten

Klicke einen beliebigen Block auf der Canvas an, um ihn auszuwählen. Das Properties-Panel öffnet sich rechts. Felder rendern basierend auf dem Schema des Blocks:

Text — Inline-Textinput / Textarea.
Rich Text — öffnet einen dedizierten schwebenden Editor unten (fett, kursiv, Listen, Links).
Medien (Bild/Video) — der Medien-Picker öffnet die Bibliothek; wähle Bestehendes oder lade Neues hoch.
Link — URL + Label; der Picker schlägt auch interne Seiten vor.
Farbe — Farb-Picker mit Theme-Tokens.
Select / Checkbox / Radio — Dropdown oder Toggles aus der Optionsliste des Schemas.
Repeater — für Blöcke mit Listen von Sub-Items (z. B. Testimonials, FAQ-Einträge), Zeilen inline hinzufügen/entfernen.

Jede Änderung wird über die Bridge an die gerahmte Site gesendet, Änderungen erscheinen also live in der echten Site, während du tippst.

Pro Sprache bearbeiten

Der Sprachumschalter in der Top-Bar bestimmt, welche Locale du gerade bearbeitest. Wechsel von Englisch zu Polnisch:

Speichert die aktuellen Feldwerte in die englische Kopie.
Lädt die polnische Kopie ins Properties-Panel und auf die Canvas.
Felder, die auf Polnisch leer sind, zeigen den Placeholder-Text, nicht den englischen Fallback.

Jedes String-Feld wird pro Sprache gespeichert. Zahlen, IDs und Einstellungen (z. B. Bild-URLs) werden über Sprachen hinweg geteilt.

Blöcke verschieben und löschen

Fahre auf der Canvas über einen Block, um die Controls einzublenden:

Drag-Handle (Grip-Icon) — nach oben/unten ziehen, um umzusortieren.
Löschen — klicke das Papierkorb-Icon ODER drücke Delete / Backspace, wenn der Block ausgewählt ist (und kein Textfeld fokussiert ist).
Duplizieren — Tastaturkürzel Cmd+D (macOS) / Ctrl+D (Win/Linux).

Es erscheint kein Bestätigungsdialog — Löschungen sind sofort, aber über Undo voll umkehrbar.

Undo und Redo

Cmd+Z / Ctrl+Z — letzte Änderung rückgängig machen.
Cmd+Shift+Z / Ctrl+Shift+Z — wiederherstellen.

Die History wird pro Seite geführt, bis zu 50 Schritte. Beim Wechsel zu einer anderen Seite bleiben die Histories beider Seiten unabhängig erhalten. Textbearbeitung hat ihr eigenes natives Undo, das die Block-History nicht anzapft.

Draft-Autosave und Veröffentlichen

Dein Draft ist die Arbeitskopie des Seiten-Contents, gespeichert in Cmssy. Während du bearbeitest, werden Änderungen in den Draft gespeichert — öffne den Editor später erneut und machst dort weiter, wo du aufgehört hast. Der Draft ist das, was die gerahmte Site im Preview-Modus rendert; Besucher sehen weiter die veröffentlichte Version, bis du veröffentlichst.

Der Draft lebt in Cmssy, nicht in deinem Browser, er folgt dir also über Geräte und Browser hinweg — der zuletzt gespeicherte Draft ist immer da, wenn du die Seite wieder öffnest.

Draft vs. veröffentlicht

Jede Seite hat zwei Zustände ihrer Blöcke:

Draft — das, was du im Builder siehst und bearbeitest und was der Preview-Modus rendert. Immer aktuell.
Veröffentlicht — das, was das Delivery-API ausliefert und Besucher auf deiner deployten Site sehen.

Das Draft-Badge in der Top-Bar erscheint immer dann, wenn die Seite unveröffentlichte Änderungen hat (oder nie veröffentlicht wurde).

Im Drei-Punkte-Menü:

Publish — hebt den aktuellen Draft zur veröffentlichten Version. Das Delivery-API liefert sie ab jetzt aus; deine deployte Next.js-Site rendert die Seite neu (ISR revalidiert beim Publish über den /api/revalidate-Webhook), die Änderung erreicht Besucher also innerhalb von Sekunden.
Unpublish — entfernt die Seite aus dem Delivery-API (deine Site liefert dafür 404). Der Draft bleibt.
Revert to published — verwirft alle Draft-Änderungen und setzt auf die letzte veröffentlichte Version zurück. Jenseits der Undo-Tiefe unumkehrbar.

Layout-Blöcke (Header / Footer / Sidebars)

Layout-Blöcke — Header, Footer, Sidebars — rendern per Vererbung auf jeder Seite. In der gerahmten Site erscheinen sie um deinen Seiteninhalt herum mit eigenen Overlay-Controls.

Klicke einen Layout-Block an, um ihn wie jeden Content-Block zu bearbeiten.
Änderungen an einem vererbten Layout-Block propagieren zu allen Seiten, die ihn erben.
Eine einzelne Seite kann einen Layout-Block überschreiben — die Änderung gilt dann nur für diese Seite.

Alle Details: Layout-Blöcke.

Preview-Modus

Drei-Punkte-Menü → Preview öffnet deinen aktuellen Draft in einem neuen Tab. Das lädt deine deployte Site im Preview-(Draft-)Modus unter einer signierten URL, damit du vor dem Veröffentlichen prüfen kannst, wie der unveröffentlichte Content auf der echten Site aussieht.

Drei-Punkte-Menü → Open Page öffnet die veröffentlichte URL auf deiner deployten Site (404, wenn unveröffentlicht).

Interaktionsmodus

Ein Toggle unten rechts auf der Canvas wechselt zwischen zwei Modi:

Edit-Modus (Standard) — Overlay-Handles sichtbar, Klicks wählen Blöcke aus, Links innerhalb von Blöcken sind inaktiv.
Interaktionsmodus — Overlays ausgeblendet, Links und Formulare verhalten sich exakt wie auf deiner Live-Site (es ist deine Live-Site). Nutze ihn, um interaktives Verhalten zu testen, ohne den Editor zu verlassen.

Mit KI bearbeiten (MCP)

Neben dem visuellen Editor stellt Cmssy einen MCP-Server bereit, über den Claude Seiten erstellen, Blöcke hinzufügen und Content für dich bearbeiten kann — denselben Content, den das Delivery-API ausliefert. Siehe MCP Server.

Tastaturkürzel-Referenz

Aktion	Kürzel
Rückgängig	`Cmd`+`Z`
Wiederherstellen	`Cmd`+`Shift`+`Z`
Ausgewählten Block duplizieren	`Cmd`+`D`
Ausgewählten Block löschen	`Delete` oder `Backspace`
Abwählen / Rich Text schließen	`Esc`

Ersetze Cmd durch Ctrl auf Windows und Linux. Alle Kürzel sind blockiert, während du in einem Textfeld tippst — natives Text-Undo, Löschen usw. funktionieren also weiterhin normal.

Was der Editor (noch) nicht kann

Kein Responsive-Preview-Toggle. Die Canvas ist fluide, simuliert aber keine spezifischen Gerätebreiten. Nutze den Preview-Button und ändere die Browsergröße zum Testen.
Keine Echtzeit-Kollaboration. Bearbeiten zwei Nutzer gleichzeitig dieselbe Seite, gewinnt der letzte Save. Koordiniert Edits nach Seite oder Abschnitt.
Keine Versionshistorie jenseits von Undo. Revert to published ist der tiefste Rollback. Wenn du benannte Versionen oder Langzeit-Historie brauchst, exportiere vor großen Änderungen.