$docker.recipes

Sanity Studio

intermediate

Customizable real-time content editing studio.

[i]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

  • [1]Headless e-commerce platforms requiring flexible product catalog management
  • [2]Multi-site content distribution for agencies managing multiple client websites
  • [3]Real-time news and blog publishing with collaborative editorial workflows
  • [4]Mobile app content management with structured data and media assets
  • [5]Portfolio and creative agency websites with custom content types
  • [6]Documentation platforms requiring version control and multi-author editing
  • [7]Event 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
[!]

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

[$]docker-compose.yml

[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

[i]Usage Notes

  1. [1]Docs: https://www.sanity.io/docs
  2. [2]Studio at http://localhost:3333
  3. [3]GROQ: Sanity's powerful query language
  4. [4]Real-time collaboration and presence
  5. [5]Requires Sanity.io account (generous free tier)
  6. [6]Create 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...
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

## Tags

#sanity#real-time#studio#groq#customizable

## Category

CMS & Blogging

## Related