Sanity
Building a Static Site With Astro and Sanity
To build a static site with Astro and Sanity, keep Astro's default output: 'static', configure @sanity/astro with useCdn: false, and fetch
Dive Deeper
Common Sanity Mistakes and How to Fix Them
The most common Sanity mistakes are using the CDN where you need fresh data, fetching whole documents with ..., leaving slugs unvalidated, ship
Dive Deeper
How to Create a Custom Sanity Plugin
To create a custom Sanity plugin, wrap a piece of Studio configuration in definePlugin from the sanity package and add it to the plugins ar
Dive Deeper
How to Deploy Sanity Studio to the Web
The quickest way to deploy Sanity Studio is to run npx sanity deploy from your Studio folder. The CLI builds the Studio, asks you to choose a h
Dive Deeper
How to Embed Sanity Studio in a Next.js App
To embed Sanity Studio in a Next.js app, add a sanity.config.ts file at the project root with 'use client' at the top and a basePath such a
Dive Deeper
GROQ Cheat Sheet: Essential Queries for Beginners
A GROQ cheat sheet is a quick reference for the query patterns you use most in Sanity. Nearly every query follows the same shape: start with *
Dive Deeper
How to Dereference Documents in GROQ
To dereference documents in GROQ, add the -> operator after a reference field. A reference is stored as an object with a _ref ID, and -> re
Dive Deeper
How to Filter and Sort Data With GROQ
To filter and sort data with GROQ, put a condition inside square brackets after the *, such as *[_type == "post" && featured == true], then p
Dive Deeper
How to Write Full-Text Search Queries in GROQ
To write full-text search queries in GROQ, use the match operator in a filter, such as *[_type == "post" && title match "groq*"]. match spl
Dive Deeper
Using GROQ Functions: count(), defined(), and More
GROQ functions are built-in helpers you call inside filters and projections to test, transform and compute values. The ones you'll use most are `
Dive Deeper
How to Query Nested Arrays in GROQ
To query nested arrays in GROQ, use the [] traversal operator to step into each array, then add a filter or projection at the level you need. F
Dive Deeper
Using GROQ Parameters Safely in Your Queries
GROQ parameters are named placeholders, written with a dollar sign such as $slug, that you put in a query and fill with values sent separately.
Dive Deeper
Using Projections in GROQ Queries
A projection in GROQ is the part of a query inside curly braces that decides what each result looks like. Instead of returning whole documents, `
Dive Deeper
Debugging GROQ Queries With the Vision Plugin
The Vision plugin is Sanity's built-in GROQ playground. It adds a Vision tab to Sanity Studio where you can run any query against your datasets,
Dive Deeper
GROQ vs GraphQL: Which Should You Use With Sanity?
For most Sanity projects, GROQ vs GraphQL has a clear answer: use GROQ. It works out of the box with no deployment step, can filter, join, reshap
Dive Deeper
How to Convert HTML to Portable Text
To convert HTML to Portable Text, use htmlToBlocks() from @portabletext/block-tools. You compile a schema that describes your Portable Text f
Dive Deeper
Migrating From Contentful to Sanity
To migrate from Contentful to Sanity, run Sanity's open-source contentful-to-sanity CLI with your Contentful space ID, a Content Management API
Dive Deeper
How to Migrate Content Between Sanity Datasets
To migrate content between Sanity datasets, export the source dataset with npx sanity datasets export production production.tar.gz and import t
Dive Deeper
How to Migrate From WordPress to Sanity
To migrate from WordPress to Sanity, audit what's in WordPress, model each post type, taxonomy and custom field as a Sanity schema, then write a
Dive Deeper
next-sanity: The Complete Guide
next-sanity is Sanity's official toolkit for Next.js. It bundles the Sanity client, GROQ helpers, a Portable Text renderer, live content fetching
Dive Deeper
Building a Blog With Next.js and Sanity
To build a blog with Next.js and Sanity, model post, author and category document types in Sanity Studio, write GROQ queries for the post l
Dive Deeper
Optimizing Sanity Images for Performance
To optimise Sanity images for performance, never serve the original asset URL. Instead, request each image through Sanity's image pipeline with `
Dive Deeper
How to Add Inline Annotations and Links in Portable Text
To add inline annotations and links in Portable Text, define them under marks.annotations on the block member of your Portable Text field. Ea
Dive Deeper
Adding Custom Blocks to Sanity Portable Text
To add custom blocks to Sanity Portable Text, define an object type with the fields you need, such as a callout with tone and text, and add
Dive Deeper
Styling Portable Text Output With Tailwind CSS
To style Portable Text with Tailwind CSS, you have two options. The quickest is to wrap the <PortableText /> component from `@portabletext/reac
Dive Deeper
Embedding YouTube Videos in Sanity Portable Text
To embed YouTube videos in Sanity Portable Text, create a youtube object type with a url field, add it to the of array of your Portable Tex
Dive Deeper
How to Render Portable Text in React
To render Portable Text in React, install @portabletext/react, fetch the Portable Text field from Sanity, and pass it to the PortableText com
Dive Deeper
Working With Arrays in Sanity Schemas
An array field in Sanity is a field with type: 'array' and an of property listing the types its items can be. Arrays can hold primitives such
Dive Deeper
How to Use Sanity With Astro
To use Sanity with Astro, install the official integration with npx astro add @sanity/astro, configure it in astro.config.mjs with your `proj
Dive Deeper
Backing Up and Restoring Your Sanity Data
To back up your Sanity data, export each dataset with npx sanity datasets export production production.tar.gz, which downloads every document a
Dive Deeper
Sanity Best Practices for Production Projects
The most important Sanity best practices come down to a handful of habits: model content by meaning and validate it, write GROQ queries with expl
Dive Deeper
Improving Site Performance With Sanity Caching
To make a Sanity-powered site fast, cache at every layer and invalidate precisely. Read published content through the API CDN, cache query result
Dive Deeper
Sanity CDN vs Live API: When to Use Each
Use the Sanity API CDN (useCdn: true, served from apicdn.sanity.io) for read queries that serve visitors: browser fetches, high-traffic serve
Dive Deeper
Installing the Sanity CLI and Essential Commands
You don't need to install the Sanity CLI globally. Run it with npx sanity@latest <command> (or pnpm dlx, yarn dlx or bunx), and inside a
Dive Deeper
Adding Code Blocks to Sanity Content
To add code blocks to Sanity content, install the official @sanity/code-input plugin, add codeInput() to the plugins array in `sanity.confi
Dive Deeper
Conditional Fields in Sanity: Show and Hide Inputs Dynamically
Conditional fields in Sanity are fields whose hidden or readOnly property is a function instead of a boolean. The Studio calls that function
Dive Deeper
Sanity Content Lake Explained
The Sanity Content Lake is the hosted, real-time database where all content in a Sanity project is stored. It holds your content as JSON **docume
Dive Deeper
Writing Content Migration Scripts in Sanity
A Sanity content migration is a TypeScript or JavaScript file in your Studio's migrations folder that exports defineMigration() from `sanity/
Dive Deeper
Content Modeling Best Practices in Sanity
The core content modelling best practice in Sanity is to model what your content is, not how a particular page looks. Create document types f
Dive Deeper
Building Custom Input Components in Sanity
A custom input component in Sanity is a React component that replaces or wraps the form control for a field. You attach it with `components: { in
Dive Deeper
How to Create Custom Slugs in Sanity
To create custom slugs in Sanity, add a field with type: 'slug' to your document and configure its options: source sets which field (or fun
Dive Deeper
How to Build Custom Dashboard Widgets in Sanity Studio
To build custom dashboard widgets in Sanity Studio, install the @sanity/dashboard plugin, add dashboardTool() to the plugins array in `sani
Dive Deeper
Understanding Sanity Datasets and Environments
A Sanity dataset is a self-contained collection of JSON documents inside a project, and an environment is a dataset plus the Studio and appli
Dive Deeper
Using defineType and defineField in Sanity
defineType and defineField are helper functions exported from the sanity package that wrap your schema definitions and give you TypeScript
Dive Deeper
Adding Custom Document Actions in Sanity
Document actions in Sanity are the buttons in the document editor's footer, such as Publish, Unpublish, Duplicate and Delete. You
Dive Deeper
Using Document Badges and Previews in Sanity
Document badges in Sanity are small coloured labels shown in the document editor next to the action buttons, such as the default Draft and **
Dive Deeper
Sanity Document History and Revisions Explained
Sanity document history is the record of every transaction that changed a document, kept automatically by the Content Lake. In the Studio you ope
Dive Deeper
Generating Dynamic Sitemaps With Sanity
To generate a dynamic sitemap with Sanity, query every routable published document with GROQ, map each one to its URL with select(), use `_upda
Dive Deeper
Building Editorial Workflows in Sanity
To build an editorial workflow in Sanity, combine the platform's built-in pieces with a little Studio configuration. Give writers the **Contribut
Dive Deeper
How to Organize Fields With Groups and Fieldsets in Sanity
To organise fields in Sanity, use field groups and fieldsets. Field groups add tabs to the top of a document or object form: you declare them
Dive Deeper
How to Manage Files and Assets in Sanity
To manage files and assets in Sanity, add fields with type: 'file' for documents such as PDFs, audio and archives, and type: 'image' for pict
Dive Deeper
How to Set Up Your First Sanity Project
To set up your first Sanity project, install Node.js 22.12 or later, run npm create sanity@latest in your terminal, log in or create a free acc
Dive Deeper
How to Create Your First Schema in Sanity
To create your first schema in Sanity, add a TypeScript file to your Studio's schemaTypes folder that exports a document type built with `defin
Dive Deeper
Using the Sanity HTTP API
The Sanity HTTP API is the set of plain HTTPS endpoints behind every Sanity client library. Every request goes to `https://.api.sanity
Dive Deeper
How to Add Alt Text Requirements to Sanity Images
To add alt text requirements to Sanity images, add a string field named alt to the image's fields array and give it a custom validation rule
Dive Deeper
Hotspot and Crop: Smart Image Cropping in Sanity
Hotspot and crop are two editor tools on Sanity image fields that control how an image is framed when your front end shows it at different sizes.
Dive Deeper
Using Sanity's Image URL Builder
Sanity's image URL builder is the @sanity/image-url package, a small library that turns an image field from your Sanity content into a `cdn.san
Dive Deeper
How to Handle Images in Sanity
To handle images in Sanity, you add a field with type: 'image' to your schema, upload files in Sanity Studio, and query them with GROQ. Each im
Dive Deeper
How to Set Initial Values in Sanity Documents
To set initial values in Sanity, add an initialValue property to a field or to a whole document type in your schema. It can be a static value,
Dive Deeper
How to Customize List Previews in Sanity Studio
To customise list previews in Sanity Studio, add a preview property to a schema type. Inside it, select maps the preview's slots (title, `s
Dive Deeper
Using Live Preview With Sanity
Live preview in Sanity means editors see unpublished changes rendered on the real front end, updating within a second or so of each keystroke, wi
Dive Deeper
Using Sanity Media Library Plugins
Sanity media library plugins extend Sanity Studio's basic asset picker with proper asset management. The most widely used is **sanity-plugin-medi
Dive Deeper
Using Sanity for Multi-Site Content Management
To use Sanity for multi-site content management, choose how sites share data, then model it. For most projects the best approach is one dataset w
Dive Deeper
Modeling Multilingual Content in Sanity
To model multilingual content in Sanity, choose between two approaches. Document-level translation creates a separate document for each langu
Dive Deeper
How to Use Sanity's Mutation API
Sanity's Mutation API is the HTTP endpoint for writing data to the Content Lake. You send a POST to /data/mutate/<dataset> with a list of mut
Dive Deeper
Using Sanity With the Next.js App Router
To use Sanity with the Next.js App Router, fetch content in async Server Components rather than in client components, and let next-sanity handl
Dive Deeper
How to Connect Sanity With Next.js
To connect Sanity with Next.js, install next-sanity in your Next.js project, add your project ID and dataset as NEXT_PUBLIC_ environment vari
Dive Deeper
How to Use Sanity With Nuxt and Vue
To use Sanity with Nuxt, install the official @nuxtjs/sanity module, add it to modules in nuxt.config.ts with your project ID, dataset and
Dive Deeper
Adding Open Graph Images With Sanity
To add Open Graph images with Sanity, give your documents a social image field, crop that image to 1200 by 630 pixels with the Sanity image U
Dive Deeper
Pagination in Sanity With GROQ
Pagination in Sanity with GROQ works in two ways. The simple way is slicing: sort the results, then take a range such as [0...10] for page one
Dive Deeper
How Sanity Pricing Works: Free vs Growth vs Enterprise
Sanity pricing has three plans. The Free plan costs nothing, includes up to 20 user seats, two public datasets and fixed monthly quotas for d
Dive Deeper
Sanity Project Structure Explained for Beginners
A Sanity project structure is small by design. A new Studio contains sanity.config.ts, which configures the Studio itself (project ID, dataset,
Dive Deeper
Real-Time Collaboration in Sanity Explained
Real-time collaboration in Sanity means several people can edit the same document at the same time without locking it or overwriting each other's
Dive Deeper
How to Use References in Sanity Schemas
To use references in Sanity schemas, add a field with type: 'reference' and a to array listing the document types it can point to, such as `t
Dive Deeper
Connecting Sanity to Remix
To connect Sanity to Remix, create a Sanity client with @sanity/client in a server-only module, call client.fetch() with a GROQ query inside
Dive Deeper
Building Reusable Object Types in Sanity
A reusable object type in Sanity is a group of fields defined once with defineType({ type: 'object', ... }), given a unique name and register
Dive Deeper
Managing User Roles and Permissions in Sanity
Sanity roles and permissions control what each project member can read, edit, publish and configure. Every project has built-in roles: **Administ
Dive Deeper
Scheduling Content Publishing in Sanity
To schedule publishing in Sanity today, use scheduled drafts to publish a single document at a set time, or Content Releases to publish a
Dive Deeper
Sanity Schema Types: A Complete Reference
Sanity schema types are the building blocks you use to describe content in Sanity Studio. The built-in types fall into four groups: **primitive t
Dive Deeper
How to Manage SEO Metadata in Sanity
To manage SEO metadata in Sanity, create a reusable seo object type with fields such as meta title, meta description, social image, canonical U
Dive Deeper
Using Sanity With Shopify for E-commerce
To use Sanity with Shopify, install the Sanity Connect app in your Shopify admin and link it to a Sanity project and dataset. It syncs your produ
Dive Deeper
Creating Singleton Documents in Sanity
A singleton document in Sanity is a document type that should only ever have one instance, such as site settings, a homepage or a navigation menu
Dive Deeper
How to Customise the Sanity Studio Desk Structure
To customise the Sanity Studio desk structure, write a StructureResolver function that receives the Structure Builder (S) and returns the lis
Dive Deeper
Must-Have Sanity Studio Plugins in 2026
The must-have Sanity Studio plugins in 2026 are a short list: @sanity/code-input for code blocks, @sanity/table for tabular data, `sanity-plu
Dive Deeper
How to Theme and Brand Sanity Studio
To theme Sanity Studio, generate a theme object and pass it to the theme key in defineConfig. The current way is buildTheme() from `@sanity
Dive Deeper
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 s
Dive Deeper
How to Integrate Sanity With SvelteKit
To integrate Sanity with SvelteKit, install @sanity/client, create a client with your project ID, dataset and an apiVersion date, and call `c
Dive Deeper
Using Sanity TypeGen for Type-Safe Queries
Sanity TypeGen is a CLI tool that generates TypeScript types from your Studio schema and from the results of your GROQ queries. You run `npx sani
Dive Deeper
How to Add Validation Rules to Sanity Fields
To add validation rules to Sanity fields, give a field a validation property: a function that receives a rule object and returns one or more
Dive Deeper
Setting Up Sanity Visual Editing in Next.js
To set up Sanity Visual Editing in Next.js, add the presentationTool() plugin to your Studio with a previewUrl that points at your site and a
Dive Deeper
Sanity vs Contentful: A Detailed Comparison
Sanity vs Contentful comes down to where your content model lives and how much control you want. Both are hosted, API-first headless CMSs, but **
Dive Deeper
Sanity vs Strapi: Hosted vs Self-Hosted Headless CMS
Sanity vs Strapi is mostly a question of who runs the backend. Sanity is a hosted headless CMS: your content lives in Sanity's managed Conten
Dive Deeper
Sanity vs WordPress: Which CMS Should You Choose?
Choose Sanity if you have a developer, want a custom front end built with a framework like Next.js or Astro, and need structured content that can
Dive Deeper
Triggering Site Rebuilds With Sanity Webhooks
To trigger site rebuilds with Sanity webhooks, create a deploy hook on your host (Vercel, Netlify, Cloudflare Pages and others all offer one), th
Dive Deeper
How to Use Sanity Webhooks
Sanity webhooks are HTTP requests that Sanity sends to a URL of your choice whenever a document is created, updated or deleted. They're called GR
Dive Deeper
Securing Your Sanity Project: API Tokens and CORS
To secure a Sanity project, give every application its own robot token with the least privileged role it needs, keep those tokens in server-only
Dive Deeper
What Is GROQ? Sanity's Query Language Explained
GROQ (Graph-Relational Object Queries) is the query language Sanity uses to read content from the Content Lake. A GROQ query starts with *, mea
Dive Deeper
What Is Portable Text in Sanity?
Portable Text is Sanity's open specification for storing rich text as structured JSON instead of HTML. A Portable Text field is an array of block
Dive Deeper
What Is Sanity? A Beginner's Guide to the Headless CMS
Sanity is a headless content management system that stores your content as structured JSON documents in a hosted database called the **Content La
Dive Deeper
Why Developers Love Sanity: Key Features Explained
Developers love Sanity because it treats content as structured data that you control with code. You define schemas in TypeScript, query them with
Dive Deeper