Skip to main content

​
Introduction to Sanity Studio

Sanity Studio is an open-source, real-time content management system that you can customize with JavaScript and React. It provides a fast, flexible, and powerful way to manage structured content at scale.

​
What is Sanity Studio?

Sanity Studio is a single-page application (SPA) built with React and TypeScript that serves as the editing interface for your content. It connects to Sanity’s Content Lake - a real-time, hosted data store that provides secure, scalable backend infrastructure for your content.
The Sanity Composable Content Cloud lets teams create remarkable digital experiences at scale. The Studio comes with a complete customization framework that lets you tailor the workspace as your needs grow.

​
Key features

Real-time collaboration

Multiple users can edit simultaneously with presence indicators and live updates across all connected clients

Schema-driven content

Define your content structure in JavaScript/TypeScript with built-in validation and type safety

GROQ queries

Use the Graph-Oriented Query Language (GROQ) to query your content with zero configuration, or use GraphQL

Plugin architecture

Extend functionality with plugins for custom input components, document actions, tools, and more

Portable Text

Advanced block editor for structured rich text that can be serialized into any markup language

Asset management

Upload images and files with on-demand transformations, metadata extraction, and CDN delivery

​
Core concepts

​
Workspaces

A Studio can contain multiple workspaces, each representing an independent content environment with its own project ID, dataset, schema, and plugins.

​
Schema types

Your content structure is defined using schema types:
  • Document types - Top-level content like posts, pages, or products
  • Object types - Reusable field groups that can be embedded in documents
  • Field types - Individual fields like strings, numbers, images, and references

​
Tools

Tools are top-level views in your Studio’s navigation. Built-in tools include:
  • Structure Tool - Browse and edit documents
  • Vision Tool - Test GROQ queries in a playground
  • Presentation Tool - Visual editing with live preview

​
Plugins

Plugins extend the Studio with custom functionality:
  • Add custom schema types
  • Create new tools for the navigation
  • Customize document actions (publish, delete, etc.)
  • Add form input components
  • Override Studio UI components

​
Architecture overview

┌─────────────────────────────────────────────────────────────────────────┐
│                              SANITY STUDIO                               │
│                                                                         │
│  ┌─────────────┐    ┌─────────────┐    ┌─────────────┐                 │
│  │   Tools     │    │    Form     │    │   Preview   │                 │
│  │ (Structure, │    │   Builder   │    │   System    │                 │
│  │   Vision)   │    │             │    │             │                 │
│  └──────┬──────┘    └──────┬──────┘    └──────┬──────┘                 │
│         │                  │                  │                         │
│         └──────────────────┼──────────────────┘                         │
│                            │                                            │
│                   ┌────────▼────────┐                                   │
│                   │  Document Store │                                   │
│                   └────────┬────────┘                                   │
│                            │                                            │
│         ┌──────────────────┼──────────────────┐                         │
│         │                  │                  │                         │
│  ┌──────▼──────┐   ┌───────▼──────┐   ┌──────▼──────┐                  │
│  │   Mutator   │   │    Client    │   │  Listener   │                  │
│  │  (patches)  │   │   (queries)  │   │ (real-time) │                  │
│  └──────┬──────┘   └───────┬──────┘   └──────┬──────┘                  │
│         │                  │                  │                         │
└─────────┼──────────────────┼──────────────────┼─────────────────────────┘
          │                  │                  │
          └──────────────────┼──────────────────┘
                             │
                    ┌────────▼────────┐
                    │  Content Lake   │
                    │   (HTTP/WS)     │
                    └─────────────────┘

​
Developer experience

  • Bring your own frontend - Use any framework (Next.js, Remix, SvelteKit, etc.)
  • Powerful APIs - Read, write, import, export, and listen for real-time updates
  • Type safety - Generate TypeScript types from your schema with @sanity/codegen
  • Local development - Develop and test locally with instant hot module reloading
  • Deploy anywhere - Host the Studio on Vercel, Netlify, or any static hosting service
Sanity hosts your content in the Content Lake with generous free-tier bandwidth and pay-as-you-go pricing for overages. The Studio itself can be deployed anywhere as a static site.

​
Get started

Quickstart

Get up and running in minutes with our quickstart guide

Installation

Detailed installation instructions and prerequisites

Core concepts

Learn about schemas, documents, and the Studio architecture

API reference

Comprehensive API documentation for Studio configuration

​
Next steps

Ready to build with Sanity Studio? Start with the quickstart guide to create your first project, or dive into the installation guide for detailed setup instructions. Join the Sanity community to connect with other developers, ask questions, and share your projects.

Build docs developers (and LLMs) love

Get started for freeTalk to us