Jump to content

Sanity

From ZelocoreCMS Wiki
Revision as of 22:54, 28 July 2026 by Digiwayen (talk | contribs) (Publishing comprehensive CMS article)
(diff) ← Older revision | Latest revision (diff) | Newer revision β†’ (diff)

🀝 Community Page β€” This page is maintained by the ZelocoreCMS community. Information may not reflect the latest official details. If you are the official CMS owner, claim your page to manage it officially.

Sanity
Status 🀝 Community
Type Headless CMS / Content Platform
License Commercial (Content Lake) / MIT (Sanity Studio)
Language TypeScript / JavaScript (Node.js, React)
Database Managed Content Lake (JSON Document Store)
Latest Version Studio v3.x
Release Date 2017
Website Official Site
GitHub Repository

Sanity (commonly known as Sanity.io) is a platform for structured content that functions as a cloud-hosted headless Content Management System. Founded in 2017, Sanity separates content administration from presentation by combining an open-source, customizable editing environmentβ€”Sanity Studioβ€”with a cloud-native, real-time content store called the Sanity Content Lake.

Unlike conventional Content Management Systems that store content as unstructured HTML blobs or page layouts, Sanity treats content as clean, queryable JSON data. This approach enables developers to treat content with the same rigor as code, reusing content across diverse frontend platforms including web applications, mobile apps, digital signages, and voice interfaces. Sanity features a proprietary open-source query language called GROQ (Graph Relational Object Queries), native real-time collaborative editing, dynamic asset pipelines, and granular revision history.

Overview

Sanity operates on the principle that modern digital experiences require structured data rather than static document templates. By decoupling the editorial user interface from content storage, Sanity allows development teams to build bespoke content management interfaces while outsourcing database operations, global edge caching, and real-time infrastructure to Sanity's managed platform.

The platform architecture is divided into two primary layers:

  • Sanity Studio (Frontend Editor): An open-source single-page application built on React and TypeScript that developers configure using code. It runs client-side and can be customized with custom input components, dynamic previews, and custom workflows.
  • Sanity Content Lake (Backend SaaS): A cloud-hosted JSON document database that provides asset management, real-time listeners via WebSockets and Server-Sent Events, automated revision history, edge-cached APIs, and role-based access control.

Core Philosophical Pillars

  • Content as Structured Data: Content is stored as validated JSON schema structures rather than raw HTML strings or proprietary block structures, enabling seamless platform reuse.
  • Single Source of Truth: Reusable content chunks are defined once and referenced across multiple pages, applications, or channels without duplication.
  • Developer-Centric Customization: Schemas, validation rules, field layouts, and Studio extensions are declared in version-controlled JavaScript/TypeScript code.
  • Real-Time Collaboration: Multi-user editing features operate with Google Docs-style live cursors, presence indicators, field locking, and automated conflict resolution.

History

Sanity was founded in Oslo, Norway in 2017 by Magnus Hillestad (CEO), Simen Svale Skogsrud (CTO), Even Westvang, and Øystein Borch. Prior to launching Sanity as a public software platform, the founding team ran a digital agency called Bengler. While developing complex digital archives, memory projects, and interactive platforms for museums, corporate clients, and public institutions, they recognized that existing monolithic CMS engines (such as WordPress or Drupal) were ill-suited for handling complex, interconnected, non-hierarchical content structures.

To solve these limitations, the team engineered a custom internal content engine built around real-time JSON storage and a flexible query language. This project evolved into Sanity.io.

Key Historical Milestones

  • 2017: Sanity.io officially launched publicly, making Sanity Studio open source under the MIT License and launching the managed Content Lake backend service.
  • 2019: Sanity open-sourced the specification for GROQ (Graph Relational Object Queries), allowing third-party tools and community projects to implement the query engine independently.
  • 2020: Sanity secured $9.3 million in Series A funding led by Heavybit, with participation from high-profile technology leaders including the founders of Netlify, Vercel, and Gatsby.
  • 2021: The company closed a $28 million Series B funding round led by ICONIQ Growth, accelerating enterprise expansion, security certifications (SOC 2 Type II), and global API infrastructure.
  • 2022: Release of Sanity Studio v3, bringing a complete architectural rewrite built on React 18 and Vite. Studio v3 introduced simplified configuration via sanity.config.ts, improved runtime performance, enhanced TypeScript types, and an improved plugin model.
  • 2023: Introduction of Sanity Connect for Shopify, establishing real-time bidirectional content sync between Shopify e-commerce product catalogs and Sanity structured content models.
  • 2024: Launch of Content Releases, enabling editorial teams to bundle, preview, schedule, and publish complex multi-document updates synchronously across entire enterprise websites.

Key Features

Real-Time Collaboration

Sanity Studio includes out-of-the-box real-time co-editing capabilities powered by operational transformation and conflict-free data types. Key collaborative capabilities include:

  • Live Presence Indicators: Visual avatars display which editors are currently viewing or modifying specific document fields.
  • Field-Level Concurrency: Multiple authors can edit different fields of the same document simultaneously without overwriting each other's changes.
  • Detailed Revision History: Every keystroke and update is preserved in a micro-version timeline, allowing editors to compare visual diffs across time and restore historical revisions.

Portable Text

Portable Text is an open-source JSON specification developed by Sanity for rich text editing. Instead of storing rich text as formatted HTML or Markdown strings, Portable Text represents rich text as an array of JSON objects (an Abstract Syntax Tree or AST).

  • Agnostic Rendering: Content can be rendered natively in web browsers, iOS apps, Android apps, PDF generators, or voice assistants using platform-specific renderers (e.g., `@portabletext/react`).
  • Inline Custom Data: Developers can embed custom structured data objects directly within body text blocksβ€”such as callout boxes, code snippets, inline product cards, or gallery carousels.

Custom Code-Defined Schemas

Content models in Sanity are defined using standard TypeScript or JavaScript objects rather than visual database drag-and-drop builders.

  • Schemas are stored directly in version-controlled Git repositories.
  • Provides full programmatic control over data types, field validation rules, field dependencies, and conditional visibility.
  • Developers can define custom validation functions, asynchronous API lookup checks, and localized field sets.

Dynamic Asset Pipeline & Image Spotlighting

Sanity provides a sophisticated media management system built directly into the Content Lake:

  • Image Hotspot & Crop: Editors can visually select a focal point (hotspot) and crop area for uploaded images. When frontends request images at different aspect ratios, Sanity's image API automatically crops around the designated focal point.
  • On-the-Fly Transformations: Image URLs support query parameters for resizing, cropping, format conversion (WebP, AVIF), blur-up placeholder generation (LQIP), and quality optimization.
  • Metadata Extraction: Automatic extraction of image dimensions, color palettes, EXIF data, and background blur hashes upon upload.

Content Releases & Scheduled Publishing

Enterprise editorial teams can organize individual document edits into cohesive content packages using Content Releases. This allows teams to prepare seasonal promotional updates, brand overhauls, or product launches across hundreds of related documents, preview the entire site in a release state, and publish all updates atomically at a scheduled timestamp.

Sanity Studio

Sanity Studio is the graphical user interface where content creators and editors write, manage, and organize structured content. Unlike proprietary SaaS administrative panels, Sanity Studio is an open-source React application that developers run, customize, and deploy.

Studio Architecture

Sanity Studio v3 is built using modern web development standards:

  • Framework Foundation: Built on React 18 and bundled with Vite for ultra-fast local development and instant hot module replacement (HMR).
  • Configuration File: Configured centrally via a single file (sanity.config.ts), defining workspaces, datasets, schema types, plugins, and UI themes.
  • Design System: Built using Sanity UI, an open-source React component library designed for accessible, responsive content interfaces.

Extending Sanity Studio

Developers can extend the editor interface through multiple extension APIs:

  • Custom Input Components: Replace default text or dropdown inputs with custom React components (e.g., interactive maps, color pickers, external product selectors).
  • Document Views & Live Preview: Add side-by-side live previews that render frontend page views in real time inside an iframe as content is typed.
  • Custom Actions & Badges: Define custom document workflow buttons (e.g., "Send for Legal Review", "Trigger Webhook", "Translate Content").
  • Plugin Ecosystem: Extend functionality using community or custom plugins for SEO inspection, media library search (Unsplash, Cloudinary), AI text generation, and internationalization (i18n).

Studio Deployment

Because Sanity Studio compiles into static web assets (HTML, JS, CSS), it can be deployed in multiple configurations:

  • Sanity Managed Hosting: Deployed instantly via the Sanity CLI using the command sanity deploy to a custom *.sanity.studio subdomain.
  • Embedded Studio: Embedded directly inside a single-page or full-stack web application route (e.g., mounting Sanity Studio within a /admin route inside a Next.js or Remix application).
  • Static Web Hosts: Hosted independently on any static web host, cloud provider, or internal server (such as Vercel, Netlify, Cloudflare Pages, or AWS S3).

Content Lake

The Sanity Content Lake is the cloud-native managed database infrastructure that powers Sanity. It stores all structured JSON documents, handles API requests, processes media assets, and maintains security boundaries.

Cloud Architecture & Data Storage

  • Document Store: Stores documents as schemaless JSON objects with unique document IDs, document types, and automated metadata attributes (such as _createdAt, _updatedAt, and _rev).
  • Edge Distribution: Content is distributed globally over high-performance content delivery networks (CDN), delivering sub-100ms API response times globally.
  • Data Datasets: Projects can be partitioned into multiple isolated datasets (e.g., production, staging, development) with independent permissions and query boundaries.

Real-Time Sync & Listeners

The Content Lake provides real-time event streaming capabilities using WebSockets and Server-Sent Events (SSE):

  • Client applications and frontend frameworks can open live subscriptions to document changes using the listener API (`client.listen(...)`).
  • When an editor modifies content in Sanity Studio, connected frontend applications can receive live delta updates instantly without requiring page reloads or full site rebuilds.

Security & Enterprise Governance

  • Role-Based Access Control (RBAC): Fine-grained custom role definitions limiting user permissions down to specific datasets, document types, or document actions.
  • Single Sign-On (SSO): Enterprise authentication integration supporting SAML 2.0, Okta, Azure AD, Google Workspace, and OAuth providers.
  • Data Compliance: Enterprise compliance standards including SOC 2 Type II certification, GDPR compliance, custom data retention policies, and dedicated single-tenant infrastructure options.

GROQ vs GraphQL

Sanity supports two primary query mechanisms for retrieving content: its native query language **GROQ** (Graph Relational Object Queries) and **GraphQL**.

Overview of GROQ

GROQ is a declarative query language designed specifically to operate over arbitrary JSON document collections. Unlike traditional SQL or GraphQL, GROQ does not require predefined schemas or server resolvers to execute queries; it acts directly on raw JSON datasets.

Key Technical Comparison

Feature / Aspect GROQ (Graph Relational Object Queries) GraphQL
Query Type Declarative JSON filtering & projection Typed schema query language
Schema Dependency Schema-less (queries raw JSON documents directly) Requires predefined typed schema & compiled endpoints
Join & Dereferencing Native dereferencing syntax (e.g., author->name) Field relationships resolved via schema resolvers
Data Transformation Native string manipulation, array projections, conditional logic Requires client-side processing or custom server resolvers
Multi-Query Support Combine multiple unrelated queries into single response object Combine multiple queries in single operation document
Learning Curve Custom syntax specific to JSON processing Industry-standard spec with widespread tooling support

Syntax Comparison Example

To fetch all blog posts with their author's name and category titles:

GROQ Query

*[_type == "post" && defined(slug.current)] {
  title,
  "slug": slug.current,
  "authorName": author->name,
  "categories": categories[]->title
}

GraphQL Query

query {
  allPost(where: { slug: { current: { isDefined: true } } }) {
    title
    slug {
      current
    }
    author {
      name
    }
    categories {
      title
    }
  }
}

Advantages of GROQ in Sanity

  • Expressive Projections: Developers can shape the exact JSON structure returned by the API, renaming fields, filtering nested arrays, and calculating values inline without backend code changes.
  • Flexible Joins: The dereference operator (->) allows queries to follow references seamlessly across documents regardless of depth.
  • No Compilation Overhead: Changes to Sanity content schemas are immediately queryable via GROQ without re-deploying or re-compiling API schemas.

Hosting and Ecosystem

Sanity operates on a hybrid deployment architecture where server backend infrastructure is managed as a cloud service, while frontend editing tools and web applications remain fully customizable.

Ecosystem & SDKs

Sanity provides official software development kits (SDKs) and integration tools across popular modern frontend frameworks:

  • JavaScript/TypeScript Client: @sanity/client provides low-level methods for fetching data, managing live listeners, handling mutations, and uploading assets.
  • Next.js Integration: next-sanity provides utilities for Server-Side Rendering (SSR), Incremental Static Regeneration (ISR), visual editing overlays, and draft mode previews.
  • React Loaders: @sanity/react-loader handles real-time live preview syncing for React applications.
  • E-Commerce Integrations: Official integrations with Shopify (Sanity Connect), Commercetools, and BigCommerce for unified headless commerce content management.

Comparison with Other CMS Platforms

Feature / Aspect Sanity Strapi Contentful Ghost
Type / Architecture Headless Content Platform Open Source Headless CMS Managed SaaS Headless CMS Publishing & Blogging CMS
Backend Infrastructure Managed SaaS (Content Lake) Self-Hosted / SaaS (Node.js) Managed SaaS Self-Hosted / Managed SaaS
Studio / Admin UI Open Source React SPA Open Source React SPA Proprietary Web SaaS Open Source Handlebars / React
Primary Query Language GROQ / GraphQL REST / GraphQL REST / GraphQL REST / Content API
Real-Time Co-Editing Native out-of-the-box Not natively supported Enterprise add-on / Limited Not natively supported
Rich Text Standard Portable Text (JSON AST) Dynamic Blocks / Markdown Rich Text (JSON AST) Koenig Card Editor (JSON)
Schema Configuration Code-First (TypeScript/JS) GUI Builder & Node.js Code SaaS Web Dashboard Fixed / Limited Custom Fields

Sanity vs Contentful

While both Sanity and Contentful operate cloud-hosted SaaS backends, Contentful provides a closed, proprietary web dashboard for administration. In contrast, Sanity open-sources its administration panel (Sanity Studio), enabling complete visual and functional customization. Furthermore, Sanity provides native real-time multi-user editing and the GROQ query engine, whereas Contentful relies primarily on standard REST and GraphQL APIs.

Sanity vs Strapi

Strapi is a self-hosted, open-source Node.js headless CMS where developers manage both the application code and underlying SQL databases (PostgreSQL, MySQL). Sanity operates as a managed cloud service where database operations, CDN edge delivery, and real-time listeners are fully managed by Sanity, reducing operational infrastructure overhead for development teams.