TinaCMS

intermediate

Git-backed headless CMS with visual editing for React sites.

Overview

TinaCMS is a modern Git-backed headless content management system designed specifically for React applications. Created by Forestry.io, TinaCMS revolutionizes content editing by providing a visual editing interface that allows content creators to edit directly on the live site, with changes automatically committed to Git repositories. This approach bridges the gap between traditional content management and modern development workflows. This Docker configuration deploys TinaCMS with both the content editing interface and administrative dashboard, utilizing volume mounts to synchronize content with your local file system. The setup provides a complete development environment where content changes are immediately visible and version-controlled through Git, making it ideal for teams that want to maintain content in their repository alongside their code. TinaCMS excels for React developers, content teams, and agencies who need the flexibility of a headless CMS combined with the ease of visual editing. Unlike traditional headless CMSes that require separate dashboards, TinaCMS integrates directly into your React application, allowing real-time content editing without leaving the actual website interface.

Key Features

Visual inline editing directly on your React application interface
Git-based content storage with automatic version control integration
GraphQL API for flexible content querying and manipulation
Schema-driven content modeling through TypeScript configuration
Real-time content synchronization between editing interface and file system
Multi-framework support including Next.js, Astro, and Remix
Branch-based content editing for collaborative workflows
Markdown and MDX support with rich text editing capabilities

Common Use Cases

1React-based marketing websites requiring frequent content updates by non-technical staff
2Developer portfolios and blogs with Git-based deployment workflows
3Agency client sites where content editing needs to be user-friendly but developer-controlled
4Documentation sites built with Next.js or Astro requiring collaborative editing
5E-commerce product catalogs where content and code changes need version control
6Multi-environment content management with branch-based staging and production workflows
7Educational platforms requiring both technical and non-technical content contributors

Prerequisites

Docker Engine 20.10 or higher with Docker Compose support
Minimum 2GB RAM and 1GB free disk space for content storage
Git repository initialized in your project directory for content versioning
Basic understanding of React development and component architecture
Node.js knowledge for customizing TinaCMS schema configuration
Familiarity with Markdown or MDX for content structure setup

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

docker-compose.yml

1services: 
2  tinacms: 
3    image: tinacms/tinacms:latest
4    container_name: tinacms
5    restart: unless-stopped
6    environment: 
7      TINA_PUBLIC_IS_LOCAL: "true"
8    volumes: 
9      - ./content:/app/content
10      - ./tina:/app/tina
11    ports: 
12      - "3000:3000"
13      - "4001:4001"
14    networks: 
15      - tina-network
16
17networks: 
18  tina-network: 
19    driver: bridge

.env Template

.env

1TINA_PUBLIC_IS_LOCAL=true

Usage Notes

1Docs: https://tina.io/docs/
2App at http://localhost:3000, admin at http://localhost:4001
3Git-backed: content stored in repository as MDX/Markdown
4Visual editing: edit content inline on your React site
5Schema defined in tina/config.ts
6Works with Next.js, Astro, Remix, and other frameworks

Quick Start

terminal

1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4  tinacms:
5    image: tinacms/tinacms:latest
6    container_name: tinacms
7    restart: unless-stopped
8    environment:
9      TINA_PUBLIC_IS_LOCAL: "true"
10    volumes:
11      - ./content:/app/content
12      - ./tina:/app/tina
13    ports:
14      - "3000:3000"
15      - "4001:4001"
16    networks:
17      - tina-network
18
19networks:
20  tina-network:
21    driver: bridge
22EOF
23
24# 2. Create the .env file
25cat > .env << 'EOF'
26TINA_PUBLIC_IS_LOCAL=true
27EOF
28
29# 3. Start the services
30docker compose up -d
31
32# 4. View logs
33docker 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/tinacms/run | bash

Troubleshooting

Port 3000 or 4001 already in use: Change port mappings in docker-compose.yml and update TINA_PUBLIC_IS_LOCAL configuration accordingly
Content changes not persisting: Ensure ./content and ./tina directories exist with proper write permissions before container startup
GraphQL schema errors on startup: Verify tina/config.ts file exists and contains valid schema definitions with proper TypeScript syntax
Visual editor not loading in React app: Check that TinaCMS client-side components are properly installed and configured in your React application
Git integration failing: Confirm Git repository is initialized in the mounted volume directory and has proper remote configuration
Container exits with module not found: Ensure all required TinaCMS dependencies are installed in your local node_modules before mounting volumes

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

tinacms

Related Recipes

Ad Space

Shortcuts: C CopyF FavoriteD Download