Warum sich unser CMS-Editing wie Figma anfühlt
Sanitys visuelles Editing macht Content-Pflege so intuitiv wie Figma: anklicken, ändern, sofort sehen. Warum das gerade für Grafiker und Designer den Unterschied macht.
Das Problem: CMS-Backends sprechen nicht die Sprache von Grafikern
Ein klassisches CMS-Backend zeigt dir eine Liste von Feldern: Titel, Untertitel, Bild, Reihenfolge. Keine Vorschau, kein Kontext. Nur Formulare. Um zu sehen, was deine Änderung bewirkt, öffnest du einen zweiten Tab, lädst die Seite neu und vergleichst.
Das kostet nicht nur Zeit. Es baut eine unsichtbare Hürde auf, die genau die Menschen ausbremst, die eigentlich am besten wissen, wie eine Seite aussehen soll:
- 76% der Unternehmen sagen, technische Hürden verhindern, dass mehr Personen im Team selbstständig Inhalte pflegen (Quelle: Hygraph/Coleman Parkes Research, 2024)
- Fast die Hälfte kann Änderungen nur von wenigen Personen mit Spezialwissen vornehmen lassen (gleiche Quelle)
- 84% der Unternehmen sagen, ihr aktuelles CMS schöpft das Potenzial ihrer Inhalte nicht aus (gleiche Quelle)
Das heisst für euch: Eine Karte verschieben oder ein Bild tauschen sollte zwei Minuten dauern. Stattdessen landet die Anpassung als Ticket bei der Entwicklung. Genau das will Headless-CMS eigentlich verhindern.
Was Sanitys visuelles Editing konkret macht
Sanity nennt das Feature offiziell «Visual Editing», bedient über das «Presentation Tool». Es besteht aus drei Teilen. Warum wir überhaupt auf Sanity setzen, steht in Warum wir Sanity.io als CMS einsetzen.
1. Live-Vorschau
Du siehst deinen Entwurf direkt auf der echten, gerenderten Seite. Nicht in einem separaten Vorschaufenster mit veraltetem Stand. Tippst du im Editor, aktualisiert sich die Seite in Echtzeit.
2. Klick-to-Edit
Du klickst auf ein Element auf der Live-Seite: einen Titel, ein Bild, einen Button. Du landest exakt im zuständigen Feld im Studio. Kein Suchen, kein Rätselraten, welches der zwölf Textfelder gemeint ist.
3. Drag-and-Drop-Seitenaufbau
Content-Blöcke lassen sich direkt in der Vorschau verschieben, nicht in einer abstrakten Liste ohne Bildvorschau.
Technisch macht das möglich, was Sanity «Content Source Maps» nennt: Jeder gerenderte Wert auf der Seite trägt unsichtbar die Information, aus welchem Dokument und Feld er stammt. Der Trick dabei: Die Seite bleibt eine ganz normale Website, aber sie «weiss», woher jedes Wort kommt.
Der Unterschied im Alltag
| Klassisches CMS-Backend | Sanity Presentation | |
|---|---|---|
| Drei Karten umsortieren | Array-Feld ohne Bildvorschau, dann Tab wechseln und prüfen | Direkt in der Vorschau per Drag-and-Drop |
| Überschrift ändern | Feld «title» suchen, speichern, neu laden | Auf die Überschrift klicken, tippen, sofort sichtbar |
| Bild ersetzen | Asset-Bibliothek durchsuchen, ohne zu wissen, wo es landet | Auf das Bild klicken, neues hochladen, Ergebnis live |
Stand: August 2026, eigene Erfahrung und sanity.io/docs/visual-editing
Wieso das für Grafiker und Designer den Unterschied macht
Wer mit Figma, Adobe XD oder Sketch arbeitet, kennt das Prinzip: Element anklicken, Eigenschaften erscheinen, Änderung sofort sichtbar. Sanitys visuelles Editing überträgt genau dieses Muster auf die Content-Pflege nach dem Launch.
Das ist besonders für Kreativagenturen relevant, die für Kunden gestalten, aber nicht dauerhaft technischer Ansprechpartner bleiben wollen. Wie eine solche Zusammenarbeit konkret aussieht, beschreiben wir in Von der Design-Idee zur fertigen Website. Der Figma-Handoff bleibt gleich, aber was danach passiert, verändert sich: Das Kundenteam pflegt seine Seite selbst, visuell, ohne Rückfragen an die Agentur.
Ein Beispiel aus der Praxis: Stell dir das Marketing-Team einer Zürcher Bäckereikette vor, das für eine Saisonaktion drei Produktkarten neu anordnen und ein Hero-Bild austauschen will. Ohne visuelles Editing braucht es dafür ein Briefing an die Agentur. Mit Klick-to-Edit erledigt das die Marketingperson zwischen zwei Meetings, direkt auf der Seite, die live geht.
Wir nutzen das selbst
Auf abteilung.ch läuft genau dieses Setup: Unser Sanity-Client ist stega-fähig, wir binden @sanity/visual-editing ein, und die Vorschau läuft über SvelteKit, eines der offiziell von Sanity unterstützten Frameworks für Visual Editing. Wenn wir an dieser Insight-Seite hier etwas ändern wollen, klicken wir auf den Absatz, der falsch ist, und landen direkt im richtigen Textblock. Kein Suchen im Seitenbaum.
Für wen sich das lohnt
Visuelles Editing zahlt sich vor allem aus für:
- Grafiker und Designer, die visuell denken und keine Formularlogik lernen wollen
- Kreativagenturen, die Kundenteams nach dem Launch selbstständig arbeiten lassen wollen
- Marketing-Teams ohne Dev-Background, die regelmässig Inhalte anpassen
- KMU mit mehreren Redakteuren, bei denen bisher nur eine Person «das CMS versteht»
Für reine Entwicklerteams, die ohnehin direkt im Code arbeiten, ist der Mehrwert kleiner. Die Zielgruppe sind Menschen, die eine Seite gestalten wollen, nicht programmieren.
Zusammengefasst
- Klassische CMS-Backends zeigen Formulare ohne visuellen Kontext. Das bremst gerade visuell denkende Teams aus
- Sanitys Presentation Tool bringt drei Fähigkeiten: Live-Vorschau, Klick-to-Edit, Drag-and-Drop-Seitenaufbau
- Technisch macht das «Content Source Maps» möglich: Jeder Wert auf der Seite weiss, aus welchem Feld er stammt
- Für Grafiker fühlt sich das an wie Figma: anklicken, ändern, sofort sehen
- Wir setzen das auf abteilung.ch selbst ein, mit SvelteKit, einem offiziell unterstützten Framework
