Sanity

Overview

Sanity is a structured content platform with real-time collaboration, GROQ querying, and a customizable React-based Studio. Content is stored in the Content Lake with CDN delivery, Portable Text for structured rich content, and visual editing capabilities for live frontend previews.

Instructions

• When defining schemas, use defineType() and defineField() with validation rules, model content for reuse by separating pages from content blocks, and use references over inline objects for shared content.
• When querying data, write GROQ queries with projections to fetch only needed fields, use the -> dereference operator for joined data, and set useCdn: true for production reads.
• When customizing Sanity Studio, configure desk structure for sidebar navigation, add custom input components for specialized editing, and create custom publish workflows with actions.
• When building rich content, use Portable Text which is structured data (not HTML) that renders on any platform, with customizable toolbar, custom blocks, and inline objects.
• When integrating with Next.js, use next-sanity with ISR, preview mode, and visual editing, and @sanity/visual-editing for click-to-edit overlays in the frontend.
• When managing environments, use datasets (production, staging, development) for content isolation, GROQ-powered webhooks for filtered build triggers, and set apiVersion to a specific date to avoid breaking changes.
• When handling images, use Sanity's image with hotspot for focal point selection and sanity-image-url for generating responsive image URLs with transforms.

Examples

Example 1: Build a content-driven marketing site

User request: "Set up Sanity with Next.js for a marketing site with modular page builder"

Actions:

1. Define page, hero, feature, CTA, and testimonial schemas as reusable block types
2. Configure Sanity Studio with desk structure and live preview
3. Set up next-sanity with ISR and GROQ queries for each page type
4. Enable visual editing with @sanity/visual-editing for click-to-edit overlays

Output: A modular marketing site where editors build pages from reusable content blocks with live preview.

Example 2: Implement real-time content preview

User request: "Add live preview to our Sanity + Next.js site so editors see changes as they type"

Actions:

1. Configure Sanity Studio's Presentation tool for side-by-side editing
2. Set up @sanity/visual-editing in the Next.js frontend for click-to-edit overlays
3. Use client.listen() for real-time content updates in preview mode
4. Configure draft content display with !(_id in path("drafts.**")) filtering

Output: A live editing experience where content changes appear in the frontend as editors type.

Guidelines

• Use defineType() and defineField() for schema definitions; they provide TypeScript types for the Studio.
• Model content for reuse: separate pages from content blocks so blocks can appear on any page.
• Use references over inline objects for content that appears in multiple places.
• Query with GROQ projections to fetch only needed fields, not entire documents.
• Use the CDN API (useCdn: true) for production reads; it is free and fast.
• Set apiVersion to a specific date to avoid breaking changes.
• Use Portable Text for rich content; it is structured data that renders on any platform.