Nachdem wir mit Storyblok ein Headless CMS gesehen haben, das Redakteur*innen dank visuellem Editor entgegenkommt, wechseln wir nun zu einem System, das vor allem Entwicklerherzen höher schlagen lässt: Sanity.

Stellen Sie sich vor: Sie bauen eine E-Commerce-Plattform, wo Produkte nicht einfach nur “Produkte” sind. Es gibt Varianten (Größe, Farbe), jede Variante hat eigene Preise für verschiedene Märkte, Verfügbarkeiten ändern sich dynamisch, und manche Produkte sind Teil von Bundles, die wiederum in Kampagnen verschachtelt sind. Mit klassischen CMS wird das schnell zur Hölle aus Custom Fields und Plugins.

Mit Sanity definieren Sie ein Datenmodell in JavaScript/TypeScript: Product hat variants[], jede Variante hat pricing[] pro Market, availability ist ein eigenes Dokument mit Echtzeit-Updates. Und alles ist typsicher, versioniert und in Echtzeit synchronisiert.

“Content as Data – strukturiert, flexibel, entwicklerfreundlich.”

Sanity ist bekannt für sein extrem flexibles Content-Modeling und seine Fähigkeit, auch komplexeste Datenstrukturen sauber zu verwalten. Es richtet sich an Teams, die präzise Kontrolle über ihre Inhalte brauchen – ohne dabei auf die Vorteile einer gehosteten Lösung zu verzichten.

Entstehungsgeschichte

Sanity wurde 2015 in Oslo (Norwegen) gegründet. Ursprünglich war es ein internes Tool für ein digitales Designstudio, das komplexe Content-Workflows für große Kundenprojekte abbilden musste.

2017 wurde es offiziell als SaaS-Produkt gelauncht und gewann schnell an Popularität – vor allem bei Projekten, die hohen Wert auf maßgeschneiderte Datenmodelle legen.

Fokus & Philosophie des Anbieters

Sanity verfolgt einen einzigartigen Developer-first-Ansatz:

• Content as Data: Inhalte werden nicht als starre Seiten, sondern als flexible, strukturierte Daten gespeichert
• Developer-first: Hohe Anpassbarkeit, Open-Source-Studio, konfigurierbar mit JavaScript/React
• Real-time Collaboration: Mehrere Nutzer können gleichzeitig Inhalte bearbeiten
• API-first: Inhalte werden über eine leistungsfähige GROQ-Query-Sprache oder GraphQL bereitgestellt

Technische Basis

Programmiersprache / Frameworks

• Sanity Studio: React + JavaScript/TypeScript (Open Source, lokal oder gehostet nutzbar)
• Backend: Proprietär, Cloud-gehostet von Sanity
• API-Typ: GROQ (eigene Query-Sprache) und optional GraphQL

Hosting

• Backend: SaaS in Sanity Cloud
• Studio: Lokal, auf eigenem Server oder ebenfalls in der Cloud

Preisgestaltung: Flexibel wie das System selbst

Sanity verfolgt ein nutzungsbasiertes Modell mit großzügigem Free-Tier.

Kostenmodelle

Free Plan:

• 0 USD/Monat
• 20 Nutzer inklusive (nur Admin & Viewer Rollen)
• Limitierte API-Aufrufe
• Voll funktionsfähiges Studio (Open Source)
• Ideal für: Kleine Projekte, Prototypen, persönliche Websites

Growth Plan:

• 15 USD pro Nutzer/Monat
• Bis zu 50 Nutzer
• 250.000 API-Requests/Monat
• 1 Mio. API CDN-Requests/Monat
• 25.000 Dokumente
• Rollen: Admin, Viewer, Editor, Developer, Contributor
• Pay-as-you-go für Überschreitungen
• Add-ons verfügbar für höhere Limits
• Für: Wachsende Teams, professionelle Projekte

Enterprise Plan:

• Individuell (Jahresvertrag)
• Custom SLA, dedizierter Support
• Unbegrenzte Nutzer
• Höhere Limits oder individuelle Vereinbarungen
• Rechnungsstellung (statt Kreditkarte)
• Für: Große Organisationen, Konzerne

Besondere Programme

Sanity Startup Program:
1 Jahr kostenlosen Growth Plan für Startups in früher Phase

Non-Profit Plan:
Vergünstigte Preise für gemeinnützige Organisationen

Pay-as-you-go Details

Bei Überschreitung der Limits im Growth Plan:

• Zusätzliche API-Requests: gestaffelte Preise
• Zusätzliche Dokumente: gestaffelte Preise
• Erhöhte Quota Add-ons buchbar

Keine Mindestlaufzeit – monatlich kündbar

Besonderheiten für kleine Teams oder Einzelunternehmer

Der Free Plan mit 20 Nutzern ist erstaunlich großzügig. Für kleine Teams oder Solo-Entwickler oft ausreichend.

Open-Source Studio:
Das Sanity Studio ist Open Source (React-App). Man kann es lokal hosten, anpassen, erweitern – ohne Lizenzkosten. Nur die Backend-API (Cloud) kostet bei höherer Nutzung.

Anforderungen

Technisches Wissen

• Erfahrung mit JavaScript/React empfohlen für die Anpassung des Studios
• Verständnis für Datenmodellierung und API-Integration

Hardware / Hosting-Voraussetzungen

• Keine Anforderungen für das Backend (Cloud)
• Für das lokal gehostete Studio reicht ein moderner Rechner mit Node.js

Konzept & Architektur

Headless-only

Keine feste Frontend-Logik, alles über APIs

Besonderheit

Vollständig konfigurierbares Studio – Felder, Workflows, Plugins frei definierbar

Workflow-Tools

• Echtzeitbearbeitung
• Benutzerrollen
• Webhooks
• Lokalisierung

Versionierung

Voll integriert, jede Änderung an Inhalten wird historisiert

Aktualität & Community

Release-Zyklen

• Kontinuierliche SaaS-Updates
• Open-Source-Studio wird aktiv weiterentwickelt

Entwickler-Community

• Wachsende globale Community
• Slack-Workspace, GitHub-Repos mit vielen Plugins

Dokumentationsqualität

Sehr gut – umfangreiche Guides, API-Referenzen, Beispielprojekte

Zielgruppe

Startups

Für komplexe Produktdaten oder Multi-Channel-Strategien geeignet

Agenturen

Ideal für maßgeschneiderte Kundenprojekte

Konzerne

Skalierbar, Multi-Language, Enterprise-Features

Content-Heavy-Projekte

Besonders stark bei komplexen Strukturen, Produktkatalogen, redaktionellen Workflows

Entwicklerteams

Maximale Freiheit beim Datenmodell und Frontend-Stack

Beispiele & Use Cases: Wo strukturierte Daten regieren

🏆 Marken setzen auf Sanity

Sonos nutzt Sanity für Produktdatenmanagement über verschiedene Märkte und Kanäle – ein Paradebeispiel für komplexes Content-Modeling.

Puma verwaltet globale Produktkataloge, Kampagnen und Multi-Market-Content in Sanity, wo Datenstrukturen hochdynamisch sind.

Figma setzt Sanity für Marketing-Content und Dokumentation ein, wo strukturierte Daten mit flexiblen Abfragen kombiniert werden.

National Geographic verwendet Sanity für digitale Storytelling-Plattformen, wo Artikel, Multimedia-Inhalte und Metadaten komplex vernetzt sind.

Typische Projekt-Szenarien

E-Commerce mit komplexen Produktvarianten
Ein Fashion-Retailer hat Produkte mit dutzenden Varianten (Größe, Farbe, Material), jede Variante hat eigene SKUs, Preise variieren nach Markt und Währung, Lagerbestände sind dynamisch. Mit Sanity wird ein flexibles Datenmodell gebaut: Product → Variants → Pricing by Market → Inventory. GROQ-Queries ermöglichen präzise Filterung.

Multi-Channel Publishing mit Rich Content
Ein Publisher will Artikel auf Website, App, Newsletter und Social Media ausspielen. Jeder Artikel besteht aus strukturierten Blöcken (Text, Bild, Video, Zitate, Infografiken). Mit Sanity werden Artikel als verschachtelte Objekte modelliert, jedes Frontend holt sich nur die Blöcke, die es braucht.

Internationales SaaS-Produkt mit Dokumentation
Ein Software-Unternehmen hat Produktdokumentation in 15 Sprachen. Artikel sind miteinander verlinkt, Code-Beispiele sind versioniert, Screenshots sind plattformspezifisch (Windows/Mac/Linux). Sanity verwaltet diese Komplexität mit Referenzen, Lokalisierung und Custom Fields.

Real-time Dashboard für Events
Eine Konferenz-Website zeigt Live-Updates: Sessions, Speaker-Changes, Room-Assignments. Mit Sanity’s Real-time-Features sehen alle Nutzer sofort Änderungen – ohne Seiten-Reload.

Konkretes Beispiel: Globaler E-Commerce mit 20 Märkten

Ein Modeunternehmen verkauft in 20 Ländern. Jedes Land hat:

• Eigene Währung und Preise
• Unterschiedliche Verfügbarkeiten
• Lokale Marketing-Kampagnen
• Sprachvarianten (manche Länder haben 2-3 Sprachen)

Herausforderung: Ein Produkt muss in allen Märkten verwaltbar sein, aber jeder Markt hat eigene Variationen.

Lösung mit Sanity:

// Vereinfachtes Schema
{
  name: 'product',
  type: 'document',
  fields: [
    { name: 'title', type: 'localizedString' }, // Multi-Language
    { name: 'variants', type: 'array', of: [{ type: 'variant' }] },
    { name: 'marketPricing', type: 'array', of: [
      {
        market: 'reference', // Referenz auf Market-Dokument
        price: 'number',
        currency: 'string',
        availability: 'string'
      }
    ]}
  ]
}

Resultat:

• Ein Produkt, viele Märkte – zentral verwaltet
• Frontends fragen mit GROQ: “Alle Produkte für DE-Markt, verfügbar, Preis in EUR”
• Echtzeit-Updates bei Preisänderungen
• Content-Team arbeitet strukturiert, nicht in duplizierten Einträgen

Kosten:

• Sanity Growth Plan: 15 USD/Nutzer × 5 Nutzer = 75 USD/Monat
• Entwicklung Custom Schema + Frontend-Integration: 25.000-40.000 EUR
• Laufende Kosten: Minimal, da Content-Team eigenständig arbeitet

Passt Sanity zu dir?

Stärken

• Extrem flexibles Content-Modeling
• Open-Source-Studio für volle Anpassbarkeit
• Realtime Collaboration für Teams
• Leistungsfähige Abfragesprache (GROQ)

Schwächen

• Höhere Einstiegshürde für Nicht-Entwickler
• Proprietäres Backend – Self-Hosting nicht möglich
• Learning Curve durch GROQ zusätzlich zu GraphQL/REST

Empfehlung

Sanity ist die richtige Wahl, wenn Inhalte nicht einfach „Seiten” sind, sondern komplexe, strukturierte Daten, die in verschiedenen Kontexten und Kanälen wiederverwendet werden. Wer die Freiheit von Strapi schätzt, aber auf eine gehostete Lösung setzen möchte, findet hier ein mächtiges Werkzeug.

Im nächsten Artikel sehen wir uns Prismic an – ein Headless CMS mit einem einzigartigen „Slice”-Konzept, das Inhalte in modulare Bausteine zerlegt und so besonders im Komponenten-basierten Design glänzt.

---

Weiterführende Informationen

Offizielle Ressourcen:

• Sanity Dokumentation – Umfassende Guides und API-Referenz
• Sanity Blog – Tutorials und Best Practices
• Sanity Exchange – Community Plugins und Starter Kits

GROQ & Content Modeling:

• GROQ Query Language – Komplette GROQ-Referenz
• Schema Types Reference – Content-Modeling Guide
• GROQ Playground – Queries testen

Sanity Studio:

• Studio Customization – Studio anpassen
• Structure Builder – Custom Studio Layouts

Community:

• Sanity Slack Community – Austausch mit Entwicklern
• GitHub Examples – Starter Templates und Demos

Sanity beweist: Content-Modeling kann eine Kunst sein – wenn man die richtigen Werkzeuge hat!