What is Sanity Studio?

What is Sanity Studio?

Sanity Studio is an open-source React app that runs in the browser and gives you the editing interface for Sanity's Content Lake. It's been around since 2017. The current version (v3, shipped December 2022) runs on Vite and you can customize pretty much everything with standard React components. Your content schemas live in TypeScript files next to your application code, which means they're version-controlled and you can treat them like any other code. You can embed the Studio as a route in Next.js or Astro, deploy it standalone, or let Sanity host it. We've shipped it embedded in 50+ client sites running Next.js App Router. It's our default editing layer for content-heavy marketing sites.

How it works

Sanity Studio talks to Sanity's Content Lake—a hosted document store you query over HTTPS with GROQ or GraphQL. Here's the flow:

1. Schema definition: You define document types in code using Sanity's schema API.
2. Studio rendering: The Studio reads those schemas at build time and auto-generates the editing UI—forms, lists, rich text editors, image uploaders.
3. Real-time sync: Edits sync to the Content Lake over WebSocket. Multiple editors see changes simultaneously.
4. Content delivery: Your frontend (Next.js, Astro, whatever) queries the Content Lake via GROQ or GraphQL.

A minimal schema looks like this:

// sanity/schemas/post.ts
import { defineType, defineField } from 'sanity'

export const post = defineType({
  name: 'post',
  title: 'Blog Post',
  type: 'document',
  fields: [
    defineField({ name: 'title', type: 'string' }),
    defineField({ name: 'slug', type: 'slug', options: { source: 'title' } }),
    defineField({ name: 'body', type: 'array', of: [{ type: 'block' }] }),
  ],
})

Because the Studio is just React, you can build custom input components, add dashboard widgets, create approval workflows with document actions, or pull in third-party plugins. The v3 plugin architecture uses regular React hooks and component composition. No proprietary framework.

When to use it

Sanity Studio works best when you need an editing experience that goes beyond generic CMS defaults.

Use it when:

• You need structured content models with references, nested objects, conditional fields
• Editors need real-time collaboration (Google Docs-style concurrent editing)
• You want to embed the CMS directly into Next.js or Astro as a /studio route
• You're building headless and need a powerful query language (GROQ handles complex queries cleanly)
• Your team knows React and wants full control over the editing UI

Skip it when:

• You need a simple blog and don't want schema-as-code—WordPress or markdown files will be faster
• Your client team needs zero-config setup without developer involvement
• Budget is extremely tight—Sanity's free tier gives you 200K API requests/month, but heavy usage gets expensive fast on Growth and Enterprise plans

Sanity Studio vs alternatives

Payload CMS v3 is the closest competitor worth evaluating. It's fully open source, runs on your own database, and has deep Next.js integration. The trade-off: you own the infrastructure.

Real-world example

On a recent e-commerce marketing site built with Next.js 14 App Router and Sanity Studio v3, we embedded the Studio at /studio as a Next.js route. The content team managed 12 document types—products, landing pages, blog posts, author profiles, FAQ entries—with cross-references between them. We built custom input components for SEO metadata previews and a color picker tied to brand tokens. GROQ queries powered ISR pages with revalidateTag, so editors saw published changes on the live site within 3-5 seconds. The Content Lake's CDN API averaged 45ms response times globally. The entire CMS setup, including custom components and schema definitions, was about 1,200 lines of TypeScript. No separate admin backend to maintain.