Features
- Visual inline editing on your live site
- Git-backed content with markdown/MDX support
- GraphQL API auto-generated from content schema
- Tina Cloud for team collaboration
Pros
- True visual editing — edit content on the live page
- Content stored in Git for version control
- GraphQL layer provides type-safe content queries
Cons
- Visual editing adds complexity to frontend components
- Tina Cloud required for non-local collaboration
- Setup is more involved than simpler Git-based CMS
Overview
TinaCMS is a Git-backed headless CMS that enables visual editing directly on your live website. Content editors see the actual rendered page and can click to edit content inline, with changes committed back to the Git repository as markdown or MDX files.
TinaCMS auto-generates a GraphQL API from your content schema, providing type-safe queries for your frontend. For team collaboration, Tina Cloud adds user management, editorial workflows, and cloud-based editing through the GitHub API.
When to Use
TinaCMS is ideal when content editors need to see their changes in context (visual editing), when you want Git-backed content with a collaborative editing experience, or when building Markdown/MDX-based sites that need a user-friendly editing interface.
Getting Started
npx create-tina-app@latestimport { defineConfig } from "tinacms";
export default defineConfig({
branch: "main",
clientId: "your-client-id",
token: "your-token",
schema: {
collections: [
{
name: "post",
label: "Posts",
path: "content/posts",
fields: [
{ type: "string", name: "title", label: "Title" },
{ type: "rich-text", name: "body", label: "Body" },
],
},
],
},
});