TinaCMS — Git-Backed Headless CMS with Visual Editing

Introduction

TinaCMS is an open-source, Git-backed headless CMS designed for modern web frameworks. Content is stored as Markdown or JSON files in your Git repository, giving developers full version control over content. Editors interact with a visual editing UI that renders changes in real-time on the actual site, bridging the gap between developer workflows and content management.

What TinaCMS Does

• Provides a visual editing interface that overlays on your live site for inline content editing
• Stores all content as Markdown, MDX, or JSON files committed directly to your Git repository
• Generates a type-safe GraphQL API from developer-defined content schemas
• Supports rich text editing with custom components, embedded media, and structured blocks
• Offers Tina Cloud as an optional hosted backend for authentication and Git integration

Architecture Overview

TinaCMS runs as a local GraphQL server during development that reads and writes content files from the filesystem. Content models are defined in a tina/config.ts file using a TypeScript schema DSL. The editing UI is a React application that injects an editing toolbar and inline forms into your site. In production, Tina Cloud provides a hosted GraphQL API and handles Git commits on behalf of non-technical editors through a GitHub integration.

Self-Hosting & Configuration

• Install with npx @tinacms/cli init which adds Tina configuration files to your project
• Define content collections and fields in tina/config.ts with TypeScript for type safety
• Run tinacms dev alongside your framework dev server for local editing
• Connect to Tina Cloud for production editing by adding your project in the Tina dashboard
• Self-host the backend by running the Tina GraphQL server on your own infrastructure

Key Features

• Git-native content storage means every edit is a commit with full history and rollback
• Visual editing shows changes on the actual rendered page, not in a separate admin panel
• Type-safe GraphQL API generated from your schema with auto-completed queries
• MDX support allows mixing Markdown content with React components
• Branch-based editing lets content teams preview changes on feature branches before merging

Comparison with Similar Tools

• Strapi — Database-backed CMS; TinaCMS uses Git as the content store
• Sanity — Hosted structured content; TinaCMS keeps content in your repo with visual editing
• Contentful — Proprietary SaaS; TinaCMS is open source with optional cloud hosting
• Decap CMS (Netlify CMS) — Git-based but uses a separate admin UI; TinaCMS edits inline on the live site
• Payload CMS — Code-first with a custom admin panel; TinaCMS integrates editing into the frontend

FAQ

Q: Does TinaCMS require Tina Cloud? A: No. TinaCMS works fully locally during development. Tina Cloud is optional and provides hosted authentication and Git integration for production editing.

Q: Which frameworks does TinaCMS support? A: TinaCMS works with Next.js, Astro, Hugo, and any framework that can consume a GraphQL API or read Markdown/JSON files.

Q: Can non-technical editors use TinaCMS? A: Yes. The visual editing interface provides a WYSIWYG experience. Editors do not need to know Git or Markdown.

Q: Is content stored in a database? A: No. Content is stored as files in your Git repository. This gives you version history, branching, and the ability to review content changes in pull requests.

Sources

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