Sanity Studio

intermediate

Customizable real-time content editing studio.

Overview

Sanity Studio is a powerful, open-source headless CMS platform that revolutionizes content management through its real-time collaborative editing environment and flexible content modeling system. Developed by Sanity.io, it transforms traditional content management by providing a customizable React-based studio interface where content creators can work simultaneously on structured content using GROQ (Graph-Relational Object Queries) for powerful data retrieval. The platform's unique approach to content as data, combined with its real-time synchronization capabilities, has made it a favorite among developers building everything from simple blogs to complex enterprise applications. This Docker configuration creates a complete Sanity Studio development environment using Node.js Alpine, providing an isolated workspace where content teams can collaborate in real-time while maintaining version control and content history. The setup eliminates the complexity of local Node.js environment management while ensuring consistent studio behavior across different development machines. Content creators, developers, and agencies benefit from this containerized approach as it provides instant studio deployment with built-in hot reloading, making it ideal for rapid prototyping, client demonstrations, and distributed development teams who need immediate access to content editing capabilities without complex setup procedures.

Key Features

Real-time collaborative editing with live presence indicators showing active users
GROQ query language integration for complex content relationships and filtering
Customizable studio interface with drag-and-drop content modeling
Built-in revision history with granular content versioning
Hot module reloading for instant schema and configuration updates
Portable content schemas exportable across different environments
Asset management with automatic image optimization and CDN delivery
Plugin ecosystem supporting custom input components and studio tools

Common Use Cases

1Headless e-commerce platforms requiring flexible product catalog management
2Multi-site content distribution for agencies managing multiple client websites
3Real-time news and blog publishing with collaborative editorial workflows
4Mobile app content management with structured data and media assets
5Portfolio and creative agency websites with custom content types
6Documentation platforms requiring version control and multi-author editing
7Event management systems with dynamic scheduling and speaker information

Prerequisites

Sanity.io account with project credentials (free tier available)
Docker and Docker Compose installed with 2GB available RAM
Port 3333 available for studio interface access
Basic understanding of content modeling and schema design
Node.js familiarity for studio customization and plugin development
Network access for Sanity Cloud API communication and real-time features

For development & testing. Review security settings, change default credentials, and test thoroughly before production use. See Terms

docker-compose.yml

1services: 
2  sanity: 
3    image: node:20-alpine
4    container_name: sanity-studio
5    restart: unless-stopped
6    working_dir: /app
7    command: npx sanity dev --host 0.0.0.0
8    volumes: 
9      - ./sanity:/app
10    ports: 
11      - "3333:3333"
12    networks: 
13      - sanity-network
14
15networks: 
16  sanity-network: 
17    driver: bridge

.env Template

.env

1SANITY_PROJECT_ID=your-project-id
2SANITY_DATASET=production

Usage Notes

1Docs: https://www.sanity.io/docs
2Studio at http://localhost:3333
3GROQ: Sanity's powerful query language
4Real-time collaboration and presence
5Requires Sanity.io account (generous free tier)
6Create project first: npx sanity init

Quick Start

terminal

1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4  sanity:
5    image: node:20-alpine
6    container_name: sanity-studio
7    restart: unless-stopped
8    working_dir: /app
9    command: npx sanity dev --host 0.0.0.0
10    volumes:
11      - ./sanity:/app
12    ports:
13      - "3333:3333"
14    networks:
15      - sanity-network
16
17networks:
18  sanity-network:
19    driver: bridge
20EOF
21
22# 2. Create the .env file
23cat > .env << 'EOF'
24SANITY_PROJECT_ID=your-project-id
25SANITY_DATASET=production
26EOF
27
28# 3. Start the services
29docker compose up -d
30
31# 4. View logs
32docker compose logs -f

One-Liner

Run this command to download and set up the recipe in one step:

terminal

1curl -fsSL https://docker.recipes/api/recipes/sanity-like-tina/run | bash

Troubleshooting

Studio loads with 'Project not found' error: Verify sanity.json contains correct projectId and run 'sanity projects list' to confirm access
Real-time features not working: Check network connectivity to Sanity Cloud and ensure websocket connections aren't blocked by firewall
Schema changes not reflected: Restart container after schema modifications and clear browser cache to reload studio configuration
Authentication failures in studio: Run 'sanity login' within container or mount Sanity credentials as environment variables
Hot reloading not triggering: Ensure volume mount path matches working directory and file permissions allow container write access
GROQ queries timing out: Optimize query structure and add proper indexes through Sanity management console

Community Notes

Loading notes...

Download Recipe Kit

Get all files in a ready-to-deploy package

Includes docker-compose.yml, .env template, README, and license

Components

sanity

Related Recipes

Ad Space

Shortcuts: C CopyF FavoriteD Download