Sanity Studio Local

Key Features

• Real-time collaborative editing with live cursor tracking and instant content synchronization
• Dynamic form generation based on custom content schemas with validation and conditional fields
• Hot module replacement for schema changes without losing content editing state
• GROQ query testing and content preview directly within the studio interface
• Asset pipeline with automatic image optimization and CDN distribution through Sanity's infrastructure
• Custom input components and plugins for specialized content types like rich text and media
• NGINX event-driven architecture providing efficient handling of studio assets and API proxying
• Built-in revision history with granular content versioning and rollback capabilities

Common Use Cases

• 1JAMstack development teams building Gatsby, Next.js, or Nuxt.js sites with headless content management
• 2Digital agencies prototyping client content structures before deploying to production environments
• 3Content marketing teams collaborating on blog posts, landing pages, and campaign materials in real-time
• 4E-commerce developers managing product catalogs with complex variant structures and inventory data
• 5Mobile app developers creating content APIs for iOS and Android applications with synchronized updates
• 6Multi-brand organizations managing content across different properties with shared asset libraries
• 7Documentation teams building knowledge bases with structured content and cross-referencing capabilities

Prerequisites

• Sanity account with existing project ID and dataset (sign up at sanity.io)
• Node.js development knowledge for customizing studio schemas and plugins
• Minimum 512MB RAM allocated to Docker for Node.js compilation and hot reloading
• Port 3333 and 80 available on host system for studio and NGINX access
• Understanding of GROQ query language for content fetching and relationships
• Basic NGINX configuration knowledge for customizing reverse proxy settings

docker-compose.yml

1services: 
2  sanity-studio: 
3    image: node:20-alpine
4    container_name: sanity-studio
5    restart: unless-stopped
6    working_dir: /app
7    command: npm run dev -- --host
8    ports: 
9      - "${STUDIO_PORT:-3333}:3333"
10    environment: 
11      - SANITY_PROJECT_ID=${PROJECT_ID}
12      - SANITY_DATASET=${DATASET}
13    volumes: 
14      - ./studio:/app
15
16  nginx: 
17    image: nginx:alpine
18    container_name: sanity-nginx
19    restart: unless-stopped
20    ports: 
21      - "${NGINX_PORT:-80}:80"
22    volumes: 
23      - ./nginx.conf:/etc/nginx/nginx.conf:ro
24
25volumes: {}

.env Template

1# Sanity Studio
2STUDIO_PORT=3333
3PROJECT_ID=your_project_id
4DATASET=production
5NGINX_PORT=80

Usage Notes

Individual Services(2 services)

Copy individual services to mix and match with your existing compose files.

sanity-studio:
  image: node:20-alpine
  container_name: sanity-studio
  restart: unless-stopped
  working_dir: /app
  command: npm run dev -- --host
  ports:
    - ${STUDIO_PORT:-3333}:3333
  environment:
    - SANITY_PROJECT_ID=${PROJECT_ID}
    - SANITY_DATASET=${DATASET}
  volumes:
    - ./studio:/app

nginx:
  image: nginx:alpine
  container_name: sanity-nginx
  restart: unless-stopped
  ports:
    - ${NGINX_PORT:-80}:80
  volumes:
    - ./nginx.conf:/etc/nginx/nginx.conf:ro

Quick Start

1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4  sanity-studio:
5    image: node:20-alpine
6    container_name: sanity-studio
7    restart: unless-stopped
8    working_dir: /app
9    command: npm run dev -- --host
10    ports:
11      - "${STUDIO_PORT:-3333}:3333"
12    environment:
13      - SANITY_PROJECT_ID=${PROJECT_ID}
14      - SANITY_DATASET=${DATASET}
15    volumes:
16      - ./studio:/app
17
18  nginx:
19    image: nginx:alpine
20    container_name: sanity-nginx
21    restart: unless-stopped
22    ports:
23      - "${NGINX_PORT:-80}:80"
24    volumes:
25      - ./nginx.conf:/etc/nginx/nginx.conf:ro
26
27volumes: {}
28EOF
29
30# 2. Create the .env file
31cat > .env << 'EOF'
32# Sanity Studio
33STUDIO_PORT=3333
34PROJECT_ID=your_project_id
35DATASET=production
36NGINX_PORT=80
37EOF
38
39# 3. Start the services
40docker compose up -d
41
42# 4. View logs
43docker compose logs -f

One-Liner

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

1curl -fsSL https://docker.recipes/api/recipes/sanity-studio-stack/run | bash

Troubleshooting