Sanity

Sanity is an open-source headless CMS that gives teams complete control over their content infrastructure. Unlike template-driven CMS platforms, Sanity provides a composable, schema-driven Studio where content models define their own editing interfaces, previews, and search behaviors in pure TypeScript. Every aspect of the workspace is extensible through a rich plugin architecture, enabling teams to build content management experiences tailored to their exact workflows.

At the core of Sanity is its hosted Content Lake — a real-time, versioned data store that powers simultaneous editing by multiple contributors and delivers content to any frontend via GROQ or GraphQL APIs. Portable Text serializes rich content into any markup language, while the asset pipeline handles image transformations on-demand with metadata extraction including dominant colors, EXIF data, and geo-location.

Sanity Studio is deployed as a static single-page application that connects to your Sanity project. It integrates with Vite for fast local development, supports real-time content scheduling, document versioning, AI-powered content operations, and international content management across dozens of languages — all built on a TypeScript-first codebase with end-to-end type safety from GROQ queries to React components via codegen.

What You Get

• Sanity Studio - A fully customizable, open-source React SPA for content management with real-time editing, role-based access control, plugin architecture, and theming support for full brand alignment.
• Structured Content Modeling - Define schemas with defineType and defineField in TypeScript to create precise content structures with field validations, conditional fields, and custom preview renderers.
• GROQ Query Language - A zero-configuration, graph-oriented query language for traversing nested content references, filtering, sorting, and projecting exactly the fields you need without SQL or complex joins.
• Portable Text - A specification for rich text as structured data that serializes into any markup language — HTML, Markdown, React, Vue — with support for embedded custom blocks like images, videos, and components.
• Asset Pipeline - Upload and serve images through Sanity’s CDN with on-demand resizing, cropping, focal point control, and automatic metadata extraction (dominant colors, EXIF, geo-location).
• Document Releases & Versioning - Create scheduled releases grouping multiple document versions for coordinated publishing, with full document history, diffing, and point-in-time rollback support.
• Real-Time Collaboration - Presence indicators and live editing awareness let multiple authors work simultaneously on any document with conflict-free convergence backed by operational transformation.
• Content Operations & AI Agents - Automate workflows with document event handlers, webhooks, and AI-powered functions for tasks like auto-translation, cross-reference updates, and storefront invalidation.

Common Use Cases

• Multi-locale e-commerce catalog - A brand models product content with localized fields, image assets, and dynamic pricing in Sanity, uses AI content operations to auto-translate descriptions, and delivers updates to their Shopify or Next.js storefront via webhook-triggered revalidation.
• Global editorial and news platform - A news organization manages articles, multimedia assets, and author profiles across 20+ language locales with Sanity’s structured content and real-time collaboration, using scheduled releases to coordinate embargoed publishing across time zones.
• Headless design system documentation - A product team stores design tokens, component specifications, and usage examples as structured Sanity documents, pulling live content into Figma plugins and Storybook via GROQ for always-current documentation.
• AI-powered content workflows - A marketing team configures document event handlers to detect missing translations or stale SEO metadata at publish time, triggering AI agents to fill gaps automatically and route flagged content to editorial review queues.
• Embedded content management in SaaS apps - A SaaS platform embeds Sanity Studio in an iframe within their product dashboard, giving customers a tailored CMS experience for managing their own data without building a custom editor from scratch.

Under The Hood

Architecture Sanity Studio is a deeply layered TypeScript monorepo where the primary sanity npm package composes discrete, versioned domain packages — @sanity/schema for content type compilation, @sanity/mutator for document mutation logic, @sanity/diff for change detection, and groq for query utilities — following a strict acyclic dependency hierarchy with no circular imports. The plugin-first composition model means every major Studio feature (comments, tasks, scheduled publishing, document releases, presence awareness) lives in its own isolated module and is composed declaratively via the config system, allowing teams to swap, extend, or replace individual capabilities without touching core. RxJS Observables drive the real-time data layer across extensive sections of the codebase, enabling reactive document subscriptions, live mutation streams, and presence tracking without polling. The separation between the Studio SPA and Content Lake API is absolute — the @sanity/client is a pure external dependency mediated through a typed store layer that can be inspected and overridden at runtime.

Tech Stack TypeScript accounts for approximately 98% of the codebase, with React 19 driving the Studio UI, Vite handling development bundling with hot module replacement, and Turbo orchestrating parallelized cross-package builds with intelligent caching. GROQ is Sanity’s custom declarative query language for graph-oriented content traversal, with type-safe defineQuery wrappers that enable codegen-based end-to-end TypeScript inference from query to component. Real-time updates use server-sent events via @sanity/client. Testing is comprehensive across Vitest for unit and integration work and Playwright for full E2E browser automation against live Sanity datasets. Oxfmt (Rust-based) handles formatting and Oxlint enforces code quality including i18n consistency rules. Published packages use @sanity/pkg-utils to produce TypeScript ESM modules with full type declarations.

Code Quality The test suite spans over 414 test files covering unit tests, integration flows, React hook behaviors, RxJS stream validations, and comprehensive Playwright end-to-end scenarios run against real Sanity datasets. Inline snapshot assertions capture precise behavioral expectations, and custom testing utilities mock entire rendering environments for isolated component testing. Error handling is explicit and typed throughout — telemetry events are defined as named constants with discriminated union types, latency thresholds are named constants, and error states surface through structured error types rather than string messages. Strict TypeScript mode combined with @internal JSDoc annotations cleanly separates the public API surface from implementation details. CI enforces dead-code detection via knip, workflow security auditing via zizmor, and full type-checking with the native TypeScript compiler.

What Makes It Unique Sanity’s most distinctive contribution is the schema-as-UI paradigm: content type definitions written in TypeScript carry their own preview configuration, input components, search predicates, and validation rules, meaning the Studio fully derives its editing interface from the schema rather than requiring parallel UI configuration. Portable Text — Sanity’s rich text specification — stores content as structured data with typed annotation objects rather than HTML, enabling serialization to any target format without lossy parsing. GROQ’s defineQuery generates TypeScript types from query strings at codegen time, providing compile-time type safety across the entire data flow from Content Lake to React component. The document versioning and releases system allows grouping arbitrary document mutations into atomic, schedulable changesets with coordinated cross-document publishing, which goes meaningfully beyond simple draft/publish workflows.

Self-Hosting

Sanity Studio is released under the MIT License, one of the most permissive open-source licenses available. This means you can use, modify, embed, and distribute Sanity Studio in commercial products without restriction, without paying royalties, and without any copyleft obligation to open-source your own application code. The Content Lake backend — Sanity’s hosted data infrastructure — is a separate commercial service operated by Sanity.io, but the Studio itself and all client libraries are genuinely open source and freely licensed.

Self-hosting Sanity Studio is straightforward because it builds to a static single-page application with no runtime server requirements: run sanity build and deploy the output to any static host, CDN, or object storage bucket. The Studio then connects to your Sanity project’s Content Lake via the hosted API. There is no self-hosted equivalent of the Content Lake — it is a managed service, so “self-hosting Sanity” means hosting the Studio frontend while relying on Sanity.io for storage, real-time collaboration infrastructure, asset CDN, and API delivery. Teams comfortable with this split architecture get a studio they fully control with a backend they do not need to operate.

The free tier of Content Lake includes generous storage, bandwidth, and API calls suitable for most projects, with paid plans unlocking higher limits, additional team members, advanced permissions, and enterprise SLAs. Moving to a paid plan adds dedicated support channels, custom roles, SSO via SAML, dataset backups managed by Sanity.io, and contractual SLAs for uptime — none of which are available in the free tier. Teams with strict data residency requirements should evaluate whether the hosted Content Lake meets their compliance needs before committing, as there is no self-hosted storage option in the current architecture.