Understanding Sanity Studio: A Complete Walkthrough

Sanity Studio is the editing interface for Sanity: an open-source, single-page React app where editors create, edit, review and publish content stored in the Content Lake. It has a top navigation bar with global search and a menu of tools, the most important being the Structure tool, which shows your content types, lists of documents and an editing form built from your schemas. Edits save automatically as drafts in real time, and you publish them with the Publish button. Developers configure everything in sanity.config.ts, so every Studio can look a little different.

Knowing your way around the Studio makes you faster as an editor and helps you design better schemas as a developer. This walkthrough covers the navigation bar, the Structure tool's panes, the document editor and its fields, drafts and publishing, history and comparing versions, the Vision and Presentation tools, collaboration features, keyboard shortcuts and the configuration that shapes it all.

Where the Studio Runs

Before looking at the interface, it helps to know that the Studio can live in three places:

• Locally: npm run dev serves it at http://localhost:3333 while you develop.
• Sanity hosting: npx sanity deploy publishes it to a your-name.sanity.studio URL.
• Your own app: you can embed it as a route, such as /studio in a Next.js site.

The interface is the same in all three. Setup is covered in how to set up your first Sanity project, and hosting options in how to deploy Sanity Studio.

The Navigation Bar

The bar across the top of the Studio is always visible. From left to right, you'll typically find:

Element	What it does
Studio title / workspace switcher	Shows the Studio name. If there are several workspaces (such as production and staging), it lets you switch between them
Create button	Starts a new document of any type you're allowed to create
Tool menu	Links to each installed tool, such as Structure, Vision or Presentation
Global search	Searches across all documents, opened with ⌘+K or Ctrl+K
Perspective picker	Lets you view content as published, as drafts or as part of a content release, where releases are enabled
Tasks and notifications	Shows tasks assigned to you and other alerts, on plans that include them
User menu	Your avatar, with options for appearance (light, dark or system), help links, project management and signing out

Which items appear depends on your plan, your role and how the Studio is configured. A Studio with only the Structure tool won't show a tool menu at all.

The Structure Tool

The Structure tool is where editors spend most of their time. It's included in every new Studio and added in the config with structureTool() from sanity/structure. It's built from panes that open left to right as you drill in.

Pane 1: Content Types

The first pane lists every document type in your schema, such as Post, Author and Category. Each item uses the type's title and optional icon. Developers can replace this default list with a custom structure, for example to group types, add a single settings document or split posts by status.

Pane 2: Document List

Clicking a type opens a list of documents of that type. Each row shows a preview, usually a title, subtitle and image, defined by the schema's preview configuration. At the top of the pane you can:

• Search within the list to filter by text.
• Sort by fields the schema exposes, such as title or last edited.
• Create a new document of that type with the + button.

The default list shows up to 2,000 documents. For larger datasets, a custom structure that filters and groups documents keeps lists manageable.

Pane 3: The Document Editor

Selecting a document opens its editing form. Panes stay open side by side, so on a wide screen you can see the type list, document list and editor at once. Clicking a reference field's linked document opens it in another pane to the right, which makes it easy to edit related content without losing your place.

The Document Editor in Detail

The editor is generated from your schema. A string field becomes a text input, a slug field gets a Generate button, an image field gets an upload area with crop and hotspot tools, and an array of block becomes a rich text editor.

The Header

The document header shows the document's title and status, plus:

• Presence avatars: other people currently viewing or editing the document.
• Field groups: tabs such as "Content", "SEO" and "Settings", if the schema defines groups. The field groups and fieldsets post explains how to set them up.
• Views: extra tabs like a preview or JSON view, if a developer has added them.
• The "..." menu: options such as Inspect (shows the raw JSON), Compare versions, Incoming references and any custom items.

Fields and Validation

Each field shows its title and optional description. Validation rules defined in the schema run as you type. Errors block publishing and appear with a red marker; warnings appear in yellow but don't block. Clicking the validation indicator lists every problem and jumps to the field. The rules themselves are covered in Sanity validation rules.

The Footer

At the bottom of the editor you'll find the document's status (for example, "Published 2 hours ago" or "Edited just now"), the primary Publish button and a menu of secondary actions. Default actions include:

• Publish: copies the current draft to the published document.
• Unpublish: removes the published version but keeps a draft. In current Studios this action appears when you're viewing the published perspective.
• Discard changes: throws away the draft and returns to the published version.
• Duplicate: creates a copy as a new draft.
• Delete: removes the document entirely.

Developers can add, remove or replace actions, for example to require approval before publishing.

Drafts, Publishing and Real-Time Editing

There's no save button in Sanity Studio. Every keystroke is sent to the Content Lake within moments, and changes are stored in a draft document whose ID starts with drafts.. The published version stays untouched until someone clicks Publish.

This has a few practical consequences:

• You can't lose work by closing the tab. The draft is already saved.
• Two people can edit the same document at the same time. Each sees the other's cursor and changes live, without conflicts.
• Your website only sees published content unless it's set up to show drafts for previews.
• Pressing ⌘+S or Ctrl+S just shows a reminder that documents save automatically.

The Content Lake explained post describes how drafts, versions and published documents are stored.

History and Comparing Versions

Every change is recorded. The history panel shows a timeline of edits with who made them and when, and lets you step back to see the document at any earlier point. You can restore an older version, which creates a new draft with that content.

How far back you can see depends on your plan: the free plan keeps a short window of draft history, while paid plans keep much longer. The Sanity pricing guide lists the retention periods.

For a side-by-side view, open the "..." menu and choose Compare versions. It shows two versions, such as published and draft, in separate panels and highlights changed fields in yellow.

Inspecting the Raw Document

Press Ctrl+Alt+I (Ctrl+Option+I on Mac), or choose Inspect from the "..." menu, to see the document as JSON. This is the best way to understand what your front end will actually receive, including system fields like _id, _type, _rev and _updatedAt, and the structure of Portable Text and image fields.

{
  "_id": "drafts.6f1c2c1e-3b0a-4d8a-9a7e-2f0d1c9b8a77",
  "_type": "post",
  "_updatedAt": "2026-11-04T09:42:10Z",
  "title": "Understanding Sanity Studio",
  "slug": { "_type": "slug", "current": "understanding-sanity-studio" },
  "author": { "_type": "reference", "_ref": "author-sajjad" }
}

The Vision Tool

Vision is a GROQ playground inside the Studio. New projects include it through visionTool() from @sanity/vision. You write a query, pick a dataset, API version and perspective, add parameters and press Ctrl+Enter to run it.

*[_type == "post" && defined(slug.current)] | order(_updatedAt desc)[0...10]{
  title,
  "author": author->name
}

Vision is mainly a developer tool, so many teams hide it from editors. The Vision plugin guide covers its options in detail.

The Presentation Tool and Visual Editing

The Presentation tool shows your real website inside the Studio, next to the editing form. With visual editing set up on the front end, editors can hover over text or an image on the page, click it and jump straight to that field. Changes appear in the preview as they type, before publishing.

It's added with presentationTool() from sanity/presentation and needs your front end to support draft previews, for example with Next.js draft mode and next-sanity. Hold Alt (Option on Mac) to toggle the click-to-edit overlays.

Collaboration Features

Beyond real-time editing, the Studio includes tools for teams. Availability depends on your plan:

• Comments: leave comments on specific fields, mention colleagues with @ and resolve threads.
• Tasks: assign a task to someone, link it to a document and track it to completion.
• Scheduled drafts: schedule a draft to publish at a set time.
• Content Releases: group changes across many documents and publish them together, with previews of how the site looks with the release applied.
• Incoming references: see every document that references the one you're editing, from the "..." menu.

Useful Keyboard Shortcuts

Action	Mac	Windows/Linux
Global search	⌘+K	Ctrl+K
Publish document	Ctrl+Option+P	Ctrl+Alt+P
Inspect document	Ctrl+Option+I	Ctrl+Alt+I
Delete document	Ctrl+Option+D	Ctrl+Alt+D
Bold / italic in rich text	⌘+B / ⌘+I	Ctrl+B / Ctrl+I
Fullscreen rich text editor	⌘+Enter	Ctrl+Enter
Run query in Vision	⌘+Enter	Ctrl+Enter

How Developers Shape the Studio

Almost everything above is controlled by configuration. A typical sanity.config.ts for a Studio with a custom structure, Vision only in development and Presentation for previews looks like this:

// sanity.config.ts
import { defineConfig } from 'sanity'
import { structureTool } from 'sanity/structure'
import { visionTool } from '@sanity/vision'
import { presentationTool } from 'sanity/presentation'
import { schemaTypes } from './schemaTypes'
import { structure } from './structure'

export default defineConfig({
  name: 'default',
  title: 'Company Website',
  projectId: process.env.SANITY_STUDIO_PROJECT_ID!,
  dataset: process.env.SANITY_STUDIO_DATASET!,
  plugins: [
    structureTool({ structure }),
    presentationTool({
      previewUrl: {
        initial: 'http://localhost:3000',
        previewMode: { enable: '/api/draft-mode/enable' },
      },
    }),
    ...(process.env.NODE_ENV === 'development' ? [visionTool()] : []),
  ],
  schema: { types: schemaTypes },
})

And a simple custom structure that pins a singleton settings document above the regular lists:

// structure.ts
import type { StructureResolver } from 'sanity/structure'

export const structure: StructureResolver = (S) =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
        .title('Site Settings')
        .id('siteSettings')
        .child(S.document().schemaType('siteSettings').documentId('siteSettings')),
      S.divider(),
      S.documentTypeListItem('post').title('Posts'),
      S.documentTypeListItem('author').title('Authors'),
    ])

The singleton documents post explains the settings pattern, and Sanity project structure explained shows where these files usually live.

---

FAQ: Sanity Studio

---

Conclusion

Sanity Studio is built around a simple flow: find a content type in the Structure tool, open a document, edit fields that autosave as a draft and publish when ready. Around that core sit history and version comparison, the JSON inspector, Vision for queries, Presentation for visual previews and collaboration tools like comments and tasks.

Because the whole interface is configured in code, the Studio you use day to day reflects the decisions your developers made. Spend some time clicking through each pane and menu in your own project, and you'll quickly see which parts are default behaviour and which have been customised for your team.