Sanity Studio — Real-Time Structured Content Platform

Introduction

Sanity is a structured content platform with an open-source editing studio built in React. Content is defined as schemas in code, stored in a hosted content lake, and served via a real-time API. Sanity Studio is the customizable editing interface where content teams create and manage structured documents. The studio runs as a single-page React application that you can extend with custom components, plugins, and workflows.

What Sanity Does

• Provides a schema-driven content editing experience where every document type is defined in JavaScript
• Stores content as structured JSON in a hosted content lake with real-time sync
• Offers GROQ, a query language purpose-built for filtering and projecting content
• Supports real-time collaborative editing with presence indicators and conflict-free merging
• Delivers content via CDN-backed APIs and webhooks for static site rebuilds

Architecture Overview

Sanity Studio is a React application that communicates with the Sanity Content Lake API over HTTPS. Schemas are defined in code using a declarative API and compiled into form components at runtime. The content lake stores documents as immutable revisions, enabling real-time sync, version history, and multi-user collaboration via operational transforms. Content is queried using GROQ or GraphQL and served through a global CDN.

Self-Hosting & Configuration

• Initialize a new project with npm create sanity@latest; the CLI scaffolds a studio with your chosen schema template
• Define document types and fields in schema files using Sanity's defineType and defineField helpers
• Customize the studio's appearance, document views, and toolbar actions with plugins and React components
• Deploy the studio to Sanity's hosting with npx sanity deploy or self-host on any static file server
• Configure CORS origins and API tokens in the Sanity management dashboard

Key Features

• Portable Text: a rich text format stored as structured JSON, renderable in any frontend framework
• Real-time collaboration with live presence, undo history, and automatic conflict resolution
• Image pipeline with on-the-fly transforms (crop, resize, format) served from a CDN
• Customizable workflows with document actions, badges, and validation rules
• Extensive plugin ecosystem for localization, SEO, scheduled publishing, and more

Comparison with Similar Tools

• Strapi — self-hosted REST/GraphQL CMS with admin panel; Sanity offers a hosted content lake with real-time sync
• Contentful — proprietary structured content platform; Sanity's studio is open source and more customizable
• Directus — database-first headless CMS; Sanity uses its own content lake rather than wrapping an existing database
• Payload CMS — Next.js-native CMS; Sanity provides a dedicated content infrastructure separate from your app framework
• WordPress (headless) — established ecosystem but not structured-first; Sanity is built around schemas and GROQ queries

FAQ

Q: Is Sanity free? A: Sanity has a free tier with generous usage quotas. The studio itself is open source. The content lake and CDN are hosted services with tiered pricing.

Q: Can I self-host the content lake? A: No. The content lake is a managed service. The studio (editing interface) can be self-hosted anywhere.

Q: What frontend frameworks work with Sanity? A: Any framework. Official SDKs exist for Next.js, Remix, Nuxt, Gatsby, Astro, and SvelteKit.

Q: How does Portable Text work? A: Rich text is stored as an array of typed blocks. You render it with a serializer in your framework, giving you full control over HTML output.

Sources

• https://github.com/sanity-io/sanity
• https://www.sanity.io/docs