TinaCMS — Git-Backed Headless CMS with Visual Editing

Introduction

TinaCMS is a headless CMS that backs content with Git and Markdown files. It provides a visual editing experience where content editors can modify pages in real time on the actual site, while all changes are committed to the Git repository as Markdown or MDX files.

What TinaCMS Does

• Stores all content as Markdown, MDX, or JSON files committed to Git
• Provides a visual editing UI that overlays your live site for inline content changes
• Generates a type-safe GraphQL API from your content schema definitions
• Supports rich text, images, references between documents, and custom field types
• Integrates with Next.js, Astro, Hugo, and other static site generators

Architecture Overview

TinaCMS consists of a local content API server and a React-based editing UI. The content API reads your schema definition (in tina/config.ts) and indexes Markdown files into a local SQLite database, exposing them through a GraphQL endpoint. The editing UI renders as a sidebar or contextual toolbar on your site, sending mutations back through the API which writes changes to the Markdown files and optionally commits them to Git.

Self-Hosting & Configuration

• Initialize with npx @tinacms/cli@latest init which scaffolds the tina/ directory with a config file
• Define your content schema in tina/config.ts specifying collections, fields, and relationships
• Run tinacms dev alongside your framework dev server to enable local editing
• Use Tina Cloud (hosted backend) or self-host the content API for production deployments
• Configure Git integration to auto-commit content changes to your repository

Key Features

• Git-native: every content edit is a commit, giving you full version history and branch-based workflows
• Visual editing: editors see changes in real time on the actual rendered page
• Type-safe GraphQL: schema-driven API generates TypeScript types for your queries
• MDX support: embed React components inside Markdown content with a visual block editor
• Self-hostable: run the entire CMS stack on your own infrastructure without vendor lock-in

Comparison with Similar Tools

• Strapi — database-backed REST/GraphQL CMS; TinaCMS uses Git and Markdown as the content store
• Sanity — hosted real-time CMS with GROQ queries; TinaCMS stores content in your repo
• Contentlayer — build-time content processing; TinaCMS adds a live editing UI on top of file-based content
• Decap CMS (Netlify CMS) — Git-based CMS with a separate admin UI; TinaCMS offers inline visual editing on the live page
• Payload CMS — code-first CMS with database storage; TinaCMS is file-first with Git as the source of truth

FAQ

Q: Do content editors need to know Git? A: No. The editing UI handles commits automatically. Editors interact with a visual interface and never see Git commands.

Q: Can I use TinaCMS with a static site generator? A: Yes. TinaCMS works with Next.js, Astro, Hugo, and other generators. Content is queried at build time via the GraphQL API.

Q: Is Tina Cloud required? A: No. You can self-host the content API. Tina Cloud is an optional hosted backend that adds user authentication and a hosted GraphQL endpoint.

Q: How does branching work? A: TinaCMS supports branch-based editing where content changes can be made on a feature branch and merged via pull request, enabling editorial review workflows.

Sources

• https://github.com/tinacms/tinacms
• https://tina.io/docs