Sanity

Sanity is a modern headless CMS and composable content platform that treats content as structured data, enabling developers to define custom content schemas and deliver content to any channel via APIs. Unlike traditional CMSs with rigid content models, Sanity's content modeling is infinitely flexible—you can create any structure (articles, products, pages, recipes, events) with custom fields, relationships, and validations using JavaScript. Sanity Studio (the editing environment) is an open-source React application you can customize and deploy anywhere, while content lives in Sanity's hosted Content Lake (real-time, globally distributed). Editors collaborate in real-time (Google Docs-style), developers query content with GROQ (Sanity's powerful query language), and content updates propagate instantly across all channels. Sanity powers major brands (Nike, Figma, Netlify, Sonos) requiring maximum flexibility and real-time content delivery.

Best For:
Sanity excels for organizations requiring customizable content workflows and multi-channel content distribution. It's ideal for large-scale editorial websites with complex content structures (news publications, magazines, media companies), e-commerce with rich product catalogs and personalization, marketing teams managing campaigns across web/mobile/email/digital signage, developer platforms requiring flexible content modeling and custom workflows, design systems and component libraries (managing design tokens as content), and projects needing real-time collaboration between content teams. Sanity is particularly valuable when your content model doesn't fit traditional CMS constraints, you need real-time updates (live events, sports scores, stock tickers), or you want complete control over editing experience through Studio customization.

Common Questions

Sanity vs. Strapi: which to choose?
Sanity is SaaS-based (content hosted by Sanity), offering real-time collaboration, global CDN, and minimal infrastructure management. Strapi is self-hosted open source, giving you complete data control and avoiding vendor lock-in. Use Sanity for real-time collaboration, simpler operations, global content delivery, and willingness to pay for convenience. Use Strapi for data ownership, cost control at scale, full customization without SaaS constraints, or avoiding vendor dependence. Sanity has more polished editor experience; Strapi offers more control. Sanity is developer-friendly SaaS; Strapi is open-source self-hosted.

What is GROQ and why does it matter?
GROQ (Graph-Relational Object Queries) is Sanity's query language for fetching content—more powerful and expressive than traditional REST filters. GROQ lets you query, filter, project (select specific fields), join references, and transform data in a single query. Example: fetch posts with author info and category names: *[_type == "post"]{ title, author->, categories[]-> }. GROQ is more concise than GraphQL for many queries and matches how developers think about content. Learning curve exists, but productivity gains are significant once you grasp it.

How much does Sanity cost?
Sanity offers generous free tier: 3 users, 2 datasets, 100k API requests/month, 10 GB bandwidth, 10 GB assets—sufficient for many production applications indefinitely. Paid plans start $99/month (Team) for unlimited users, 1M requests, 100 GB bandwidth. Growth ($949/month) and Enterprise (custom pricing) add SAML SSO, advanced roles, higher limits, SLAs. Unlike many SaaS CMSs, Sanity's free tier is production-viable, not just prototyping. Costs scale with usage (API requests, bandwidth, assets), but reasonable for most applications.

Can I customize Sanity Studio?
Absolutely—Sanity Studio is open source (MIT license) React application you can customize infinitely. Add custom input components, validation rules, plugins, custom dashboards, or completely rebuild the UI. Deploy Studio to Vercel, Netlify, or self-host—you control the editing environment. This sets Sanity apart from locked-down SaaS CMSs: you get SaaS convenience for content hosting but open-source flexibility for the editor. Sanity's plugin ecosystem offers 200+ plugins (SEO, media, workflow, integrations), and you can build custom ones.

Pricing & Plans

Free Tier (Production-Ready):

• 3 admin users (unlimited viewers/guests)
• 2 datasets (production + staging)
• 100,000 API requests/month
• 10 GB bandwidth/month
• 10 GB asset storage
• Community support
  Free forever—sufficient for small-to-medium production sites.

Team: $99/month

• Unlimited users
• 3 datasets
• 1,000,000 API requests/month
• 100 GB bandwidth/month
• 100 GB assets
• Email support, advanced roles

Growth: $949/month

• Unlimited users and datasets
• 3,000,000 API requests/month
• 300 GB bandwidth/month
• 300 GB assets
• SAML SSO, enhanced security, priority support

Enterprise: Custom pricing

• Unlimited everything
• Dedicated infrastructure, 99.9% SLA, advanced compliance, dedicated support
• Typically $2,000-20,000+/month based on scale

Additional Costs:

• Extra API requests: $2.50 per 100k requests
• Extra bandwidth: $0.15/GB
• Extra assets: $0.25/GB/month
• Sanity Channels (scheduled publishing): $99/month

Limitations

Sanity is SaaS-only—no self-hosted option, meaning vendor lock-in and ongoing costs (though data export is possible via APIs). GROQ has a learning curve—different from SQL or GraphQL, requiring time to master. Sanity's free tier API limits (100k requests/month) can be hit quickly on high-traffic sites without proper caching (use CDN caching via stale-while-revalidate). While Sanity Studio is customizable, building complex custom input components requires React expertise. Sanity's content modeling is powerful but abstract—less intuitive than visual builders for non-developers. Sanity focuses on content delivery, not site building—you need separate frontend (Next.js, Remix, etc.). Costs can escalate at scale: high-traffic sites with millions of API requests/month, large media libraries, or many collaborators reach paid tiers quickly. Sanity's feature releases can introduce breaking changes requiring migration effort.

Getting Started

Install Sanity CLI:

npm install -g @sanity/cli
sanity init
# Follow prompts: create project, dataset, schema template

Define Content Schema:

// schemas/post.js
export default {
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: Rule => Rule.required()
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: { source: 'title' }
    },
    {
      name: 'author',
      title: 'Author',
      type: 'reference',
      to: [{type: 'author'}]
    },
    {
      name: 'body',
      title: 'Body',
      type: 'array',
      of: [{type: 'block'}]  // Rich text
    },
    {
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime'
    }
  ]
}

Start Studio:

sanity start
# Opens Studio at http://localhost:3333

Query Content:
Install client: npm install @sanity/client

import {createClient} from '@sanity/client'

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: true,  // Use CDN for production
})

// GROQ query
const posts = await client.fetch(`
  *[_type == "post" && publishedAt < now()] | order(publishedAt desc) {
    title,
    slug,
    author->{name, image},
    body,
    publishedAt
  }
`)

console.log(posts)

Real-Time Updates:

const query = '*[_type == "post"]'
const subscription = client.listen(query).subscribe(update => {
  console.log('Content updated!', update)
})

Deploy Studio:

# Build and deploy to Sanity's hosting (free)
sanity deploy

# Or deploy to Vercel/Netlify
sanity build
# Then deploy /dist folder

Configure CORS in Sanity management console (add your frontend domains). Create custom input components for specialized editing (color pickers, map selectors, custom validation). Install plugins: sanity install @sanity/vision (GROQ playground), @sanity/dashboard (custom dashboards). Use Presentation plugin for live preview. Follow Sanity documentation, Exchange (community resources), and video tutorials for comprehensive learning.