# TinaCMS — Git-Backed Headless CMS with Visual Editing

> An open-source headless CMS that stores content in Git and provides a real-time visual editing interface. Developers define content schemas in code while editors get a live preview and WYSIWYG experience on the actual site.

## Install

Save as a script file and run:

# TinaCMS — Git-Backed Headless CMS with Visual Editing

## Quick Use
```bash
# Scaffold a new TinaCMS project with Next.js
npx create-tina-app@latest

# Or add Tina to an existing project
npx @tinacms/cli@latest init

# Start the dev server with live editing
npm run dev
```

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

---
Source: https://tokrepo.com/en/workflows/asset-732f773d
Author: Script Depot