# TinaCMS — Git-Backed Headless CMS with Visual Editing

> An open-source headless CMS that stores content in Git and Markdown, providing a real-time visual editing interface that developers can embed directly into their sites.

## Install

Save in your project root:

# TinaCMS — Git-Backed Headless CMS with Visual Editing

## Quick Use
```bash
npx @tinacms/cli@latest init
npm run dev
# Open http://localhost:3000/admin to access the editing UI
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-d3f06804
Author: AI Open Source