Skip to main content
Sanity Studio is an open-source, single-page application (SPA) for content management. It’s built with React and TypeScript, designed to be highly customizable through a plugin architecture.

​
Overview

Key characteristics:
  • React-based SPA - Modern component architecture
  • Real-time collaboration - Multiple users can edit simultaneously
  • Schema-driven - Content structure defined in JavaScript/TypeScript
  • Highly extensible - Plugin system for customization
  • GROQ-powered - Graph-Oriented Query Language for data access

​
Repository structure

Sanity Studio is developed as a monorepo containing multiple packages: 
sanity/
├── packages/                    # All publishable and internal packages
│   ├── sanity/                 # Main studio package (the "sanity" npm package)
│   ├── groq/                   # GROQ language utilities
│   ├── @sanity/                # Scoped public packages
│   │   ├── cli/               # Command-line interface
│   │   ├── types/             # TypeScript type definitions
│   │   ├── schema/            # Schema compilation and validation
│   │   ├── mutator/           # Document mutation logic
│   │   ├── diff/              # Document diffing utilities
│   │   ├── vision/            # GROQ query tool (Studio plugin)
│   │   └── ...
│   └── @repo/                  # Internal monorepo tooling
├── dev/                        # Development studios for testing
└── examples/                   # Example projects

​
Package dependency graph

The packages have a layered dependency structure: 
                                    ┌─────────────────┐
                                    │     sanity      │  (main studio package)
                                    └────────┬────────┘
                                             │
              ┌──────────────────────────────┼──────────────────────────────┐
              │                              │                              │
              ▼                              ▼                              ▼
    ┌─────────────────┐           ┌─────────────────┐           ┌─────────────────┐
    │   @sanity/cli   │           │  @sanity/schema │           │ @sanity/vision  │
    └────────┬────────┘           └────────┬────────┘           └─────────────────┘
             │                             │
             ▼                             ▼
    ┌─────────────────┐           ┌─────────────────┐
    │ @sanity/codegen │           │ @sanity/mutator │
    └─────────────────┘           └────────┬────────┘
                                           │
                    ┌──────────────────────┼──────────────────────┐
                    │                      │                      │
                    ▼                      ▼                      ▼
          ┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
          │  @sanity/types  │    │   @sanity/diff  │    │   @sanity/util  │
          └─────────────────┘    └─────────────────┘    └─────────────────┘

​
Key packages

PackageDescription
sanityMain studio package containing UI, form builder, structure tool, and core functionality
@sanity/cliCommand-line interface for project management, builds, and deployments
@sanity/typesTypeScript type definitions for documents, schemas, and common data structures
@sanity/schemaSchema compilation, validation, and type inference
@sanity/mutatorDocument mutation logic for real-time collaboration
@sanity/diffGenerates diffs between documents for change tracking
@sanity/visionGROQ query playground tool (Studio plugin)

​
Studio and workspace architecture

The Studio is configured using defineConfig() which creates one or more workspaces. Each workspace represents an independent content environment with its own:
  • Project ID and Dataset - Connection to Content Lake
  • Schema - Document and field type definitions
  • Plugins - Extended functionality
  • Tools - Top-level navigation views
import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'

export default defineConfig({
  name: 'default',
  projectId: 'your-project-id',
  dataset: 'production',

  schema: {
    types: [
      /* document and object types */
    ],
  },

  plugins: [
    structureTool(),
    // Additional plugins...
  ],
})

​
Data flow architecture

┌─────────────────────────────────────────────────────────────────────────┐
│                              SANITY STUDIO                               │
│                                                                         │
│  ┌─────────────┐    ┌─────────────┐    ┌─────────────┐                 │
│  │    Tool     │    │    Form     │    │   Preview   │                 │
│  │  Component  │    │   Builder   │    │   System    │                 │
│  └──────┬──────┘    └──────┬──────┘    └──────┬──────┘                 │
│         │                  │                  │                         │
│         └──────────────────┼──────────────────┘                         │
│                            │                                            │
│                   ┌────────▼────────┐                                   │
│                   │  Document Store │◄─────── RxJS Observables          │
│                   └────────┬────────┘                                   │
│                            │                                            │
│         ┌──────────────────┼──────────────────┐                         │
│         │                  │                  │                         │
│  ┌──────▼──────┐   ┌───────▼──────┐   ┌──────▼──────┐                  │
│  │   Mutator   │   │    Client    │   │  Listener   │                  │
│  │  (patches)  │   │   (queries)  │   │ (real-time) │                  │
│  └──────┬──────┘   └───────┬──────┘   └──────┬──────┘                  │
│         │                  │                  │                         │
└─────────┼──────────────────┼──────────────────┼─────────────────────────┘
          │                  │                  │
          └──────────────────┼──────────────────┘
                             │
                    ┌────────▼────────┐
                    │  Content Lake   │  (Sanity's hosted backend)
                    │   (HTTP/WS)     │
                    └─────────────────┘

​
Query flow

  1. Component requests data via hooks (useDocumentStore, useClient)
  2. Document Store manages subscriptions and caching
  3. Client sends GROQ queries to Content Lake
  4. Real-time listeners push updates back

​
Mutation flow

  1. User edits trigger form changes
  2. Form builder generates patches
  3. Mutator applies patches optimistically
  4. Mutations sent to Content Lake
  5. Confirmation/conflict resolution

​
Module organization

The main sanity package is organized into modules: 
packages/sanity/src/
├── core/                    # Core functionality
│   ├── config/             # Configuration system
│   ├── form/               # Form builder
│   ├── hooks/              # React hooks
│   ├── preview/            # Document preview
│   ├── schema/             # Schema utilities
│   ├── store/              # Data stores
│   ├── studio/             # Studio shell components
│   └── ...
├── router/                  # Client-side routing
├── structure/              # Structure tool
├── presentation/           # Presentation tool
└── _exports/               # Public API exports

​
Entry points

The sanity package exposes multiple entry points:
ImportDescription
sanityMain exports (defineConfig, components, hooks)
sanity/structureStructure tool and builder
sanity/routerRouting utilities
sanity/presentationPresentation tool

​
Key technologies

TechnologyPurpose
ReactUI component framework
TypeScriptType safety and developer experience
RxJSReactive data streams and state management
ViteDevelopment server and build tool
GROQQuery language for Content Lake
Portable TextRich text data structure
@sanity/uiDesign system components
For more details on the monorepo structure and development workflow, see the ARCHITECTURE.md file in the repository.

Build docs developers (and LLMs) love

Get started for freeTalk to us