← Back to posts
comparison guide self-hosted · · 11 min read

Decap CMS vs TinaCMS vs Sveltia CMS: Best Git-Based CMS 2026

Compare Decap CMS, TinaCMS, and Sveltia CMS — three open-source Git-based content management systems for static sites. Self-hosting guide with configuration examples.

OS
Editorial Team

Managing content for static websites used to mean choosing between editing raw Markdown files by hand or adopting a heavy database-driven platform like WordPress. Git-based CMS tools solve this problem by providing a friendly editing interface while storing all content directly in your Git repository — no database required.

In this guide, we compare three leading open-source Git-based CMS platforms: Decap CMS (formerly Netlify CMS), TinaCMS, and Sveltia CMS. We cover installation, configuration, self-hosting, and help you pick the right tool for your workflow.

Why Choose a Git-Based CMS

A Git-based CMS (sometimes called a “headless CMS for static sites”) stores content as plain files — Markdown, JSON, or YAML — in a version-controlled repository. The CMS provides a web-based editor that reads and writes these files through the Git API.

Key advantages over traditional database-driven CMS platforms:

  • No database to maintain — all content is plain files in Git, backed up automatically
  • Version control built in — every edit is a Git commit with full history, diff, and rollback
  • Deploy anywhere — works with Hugo, Jekyll, Astro, Eleventy, Next.js, or any static site generator
  • Self-hostable — run the admin panel on your own server with no third-party dependencies
  • Team collaboration — multiple editors can work simultaneously with Git’s merge and conflict resolution

For related reading, see our complete guide to self-hosted static site generators and the headless CMS comparison covering Strapi, Directus, and Ghost. If you prefer a flat-file approach without Git integration, our Grav vs Pico vs Bludit guide covers that alternative.

Decap CMS

Decap CMS is the community-maintained successor to Netlify CMS, the original open-source Git-based CMS. After Netlify rebranded the project and transferred it to the community, Decap CMS has become the standard choice for integrating a visual editor into static site workflows.

MetricValue
GitHub Stars19,015
Last UpdatedApril 2026
LicenseMIT
FrameworkReact (single-page application)
Supported GeneratorsHugo, Jekyll, Gatsby, Next.js, Eleventy, Astro, Nuxt, any SSG

How Decap CMS Works

Decap CMS is a React single-page application served as static files. It connects to your Git repository (GitHub, GitLab, or Bitbucket) via OAuth or a self-hosted proxy, reads your content configuration from a config.yml file, and renders an editing interface. Content is saved as commits to your repository, triggering your build pipeline automatically.

Installation and Configuration

Decap CMS requires no build step — you serve the admin panel as static files. Create an admin/ directory in your site’s static/ folder:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

# For Hugo sites, create the admin directory in static/
mkdir -p static/admin
cd static/admin

# Create the admin HTML file
cat > index.html << 'HTMLEOF'
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Content Editor</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/decap-cms@3/dist/decap-cms.js"></script>
</body>
</html>
HTMLEOF

Then create the configuration file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# static/admin/config.yml
backend:
  name: git-gateway
  branch: main

publish_mode: editorial_workflow
media_folder: static/uploads
public_folder: /uploads

collections:
  - name: "posts"
    label: "Blog Posts"
    folder: "content/posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      visualEditing: true
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Tags", name: "tags", widget: "list", default: ["guide"] }
      - { label: "Draft", name: "draft", widget: "boolean", default: false }
      - { label: "Body", name: "body", widget: "markdown" }

  - name: "pages"
    label: "Pages"
    folder: "content/pages"
    create: true
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

Self-Hosting Decap CMS

To self-host without relying on Netlify’s OAuth service, you need a Git Gateway proxy. The most popular option is netlify-cms-proxy-server or the community-maintained decap-server:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# Install the self-hosted proxy
npm install -g decap-server

# Start the proxy (listens on port 8081 by default)
decap-server

# Point your config.yml to the proxy
# backend:
#   name: git-gateway
#   branch: main
#   proxy_url: http://localhost:8081/api/v1

For production, serve the proxy behind Caddy:

1
2
3
4
5

cms.example.com {
    reverse_proxy /api/* localhost:8081
    root * /var/www/mysite
    file_server
}

TinaCMS

TinaCMS takes a different approach — instead of being a separate admin panel, Tina embeds visual editing directly into your live site. Editors see changes in real-time as they modify content, using a side-panel that overlays on the actual rendered page.

MetricValue
GitHub Stars13,298
Last UpdatedApril 2026
LicenseApache 2.0
FrameworkReact + GraphQL
Supported GeneratorsNext.js, Hugo (via Tina Cloud), Astro, Remix

How TinaCMS Works

TinaCMS integrates as a development dependency in your project. It compiles a GraphQL API from your content schema (.tina/schema.ts), serves the editing UI alongside your site, and writes changes directly to Markdown/JSON files on disk (in development) or through Tina Cloud (in production).

Installation and Configuration

1
2
3
4
5

# Create a new Next.js project with TinaCMS
npm create tina-app@latest my-tina-site

# Or add Tina to an existing project
npm install --save-dev @tinacms/cli tinacms

Initialize Tina in your project:

1

npx tinacms init

This creates a .tina/schema.ts file. Here is a typical schema configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// .tina/schema.ts
import { defineSchema, defineConfig } from "tinacms";

const schema = defineSchema({
  collections: [
    {
      label: "Blog Posts",
      name: "posts",
      path: "content/posts",
      format: "mdx",
      fields: [
        {
          type: "string",
          label: "Title",
          name: "title",
          isTitle: true,
          required: true,
        },
        {
          type: "datetime",
          label: "Date",
          name: "date",
          required: true,
        },
        {
          type: "string",
          label: "Tags",
          name: "tags",
          list: true,
        },
        {
          type: "rich-text",
          label: "Body",
          name: "body",
          isBody: true,
        },
      ],
    },
  ],
});

export default schema;

export const config = defineConfig({
  clientId: process.env.TINA_CLIENT_ID!,
  branch: process.env.TINA_BRANCH!,
  token: process.env.TINA_TOKEN!,
  schema,
});

Self-Hosting TinaCMS

TinaCMS offers a local development server for self-hosted use:

1
2
3
4
5

# Start the local Tina filesystem GraphQL server
npx tinacms server:start

# The server runs on http://localhost:4001/graphql
# Access the editor at http://localhost:3000/admin

For production self-hosting without Tina Cloud, you can use the filesystem backend:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// .tina/config.ts (self-hosted variant)
import { defineConfig } from "tinacms";
import { LocalBackendAuthProvider } from "@tinacms/auth";

export default defineConfig({
  schema,
  branch: "main",
  localBackend: true,
  auth: LocalBackendAuthProvider(),
});

Run the Tina server in production:

1
2

# Build and serve with Tina's local backend
npx tinacms server:start --port 4001

Sveltia CMS

Sveltia CMS is a complete rewrite of Netlify CMS built with Svelte. It maintains full configuration compatibility with Netlify/Decap CMS while delivering a significantly modernized user interface, improved performance, and first-class internationalization support.

MetricValue
GitHub Stars2,338
Last UpdatedApril 2026
LicenseMIT
FrameworkSvelte (single-page application)
Supported GeneratorsAny SSG — Hugo, Jekyll, Astro, Eleventy, Next.js

How Sveltia CMS Works

Like Decap CMS, Sveltia CMS is a single-page application served as static files. However, it is built from the ground up with Svelte, resulting in a smaller bundle size, faster load times, and a more responsive editing experience. It is fully compatible with existing config.yml files from Netlify/Decap CMS, making migration straightforward.

Installation and Configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

# For Hugo sites
mkdir -p static/admin
cd static/admin

# Create the admin page using Sveltia CMS from CDN
cat > index.html << 'HTMLEOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Content Editor</title>
  <link rel="icon" type="image/svg+xml" href="https://app.sveltia.net/favicon.svg" />
</head>
<body>
  <script src="https://app.sveltia.net/cms.js"></script>
</body>
</html>
HTMLEOF

The configuration format is identical to Decap CMS, so existing config.yml files work without modification:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

# static/admin/config.yml
backend:
  name: github
  repo: username/my-site
  branch: main

media_folder: static/uploads
public_folder: /uploads

collections:
  - name: "posts"
    label: "Blog Posts"
    folder: "content/posts"
    create: true
    slug: "{{slug}}"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Date", name: "date", widget: "datetime" }
      - { label: "Body", name: "body", widget: "markdown" }

Self-Hosting Sveltia CMS

Sveltia CMS can be self-hosted by downloading the application files:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# Download Sveltia CMS for self-hosting
mkdir -p /var/www/cms-admin
cd /var/www/cms-admin

wget https://github.com/sveltia/sveltia-cms/releases/latest/download/sveltia-cms.zip
unzip sveltia-cms.zip

# Serve with Caddy
cat > /etc/caddy/Caddyfile << 'CADDYEOF'
cms.example.com {
    root * /var/www/cms-admin
    file_server
    encode gzip
}
CADDYEOF

caddy reload

For the Git backend proxy, Sveltia CMS works with the same decap-server proxy used by Decap CMS:

1
2

npm install -g decap-server
decap-server --port 8081

Then update your config.yml to point to the self-hosted proxy:

1
2
3
4

backend:
  name: git-gateway
  branch: main
  proxy_url: http://localhost:8081/api/v1

Comparison

FeatureDecap CMSTinaCMSSveltia CMS
FrameworkReactReact + GraphQLSvelte
Stars19,01513,2982,338
LicenseMITApache 2.0MIT
Bundle Size~1.2 MB~800 KB (dev dep)~400 KB
Visual EditingPartialFull inline overlayPartial
Config FormatYAML (config.yml)TypeScript schemaYAML (config.yml)
Decap Config Compatible—NoYes
Self-Host ComplexityLowMediumLow
Git ProvidersGitHub, GitLab, Bitbucket, GiteaGitHub, GitLabGitHub, GitLab, Bitbucket
Editorial WorkflowYesNoYes
i18n SupportBasicLimitedFull
Hugo SupportExcellentVia Tina CloudExcellent
Last UpdatedApril 2026April 2026April 2026

Which One Should You Choose?

Choose Decap CMS if:

  • You need the most mature, widely-tested Git-based CMS with the largest community
  • You are migrating from the original Netlify CMS and want a drop-in replacement
  • You need broad framework support and extensive plugin ecosystem

Choose TinaCMS if:

  • You use Next.js and want inline visual editing on the live page
  • You prefer a GraphQL-based content API over YAML configuration
  • Your team wants WYSIWYG editing with real-time preview

Choose Sveltia CMS if:

  • You want a modern, fast editing experience with smaller bundle sizes
  • You need excellent internationalization (i18n) support
  • You want Decap CMS compatibility with a more actively maintained codebase and better UX

Deployment Architecture

For a self-hosted setup with any of these three CMS options, a typical architecture looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│   Content    │────>│  Git-based   │────>│   Static     │
│   Editor     │     │   CMS Admin  │     │   Site       │
│   (Browser)  │     │   (SPA)      │     │   (Hugo)     │
└──────────────┘     └──────┬───────┘     └──────┬───────┘
                            │                    │
                     ┌──────▼───────┐     ┌──────▼───────┐
                     │  Git Proxy   │     │  Git Repo    │
                     │  (decap-     │────>│  (GitHub/    │
                     │   server)    │     │   GitLab)    │
                     └──────────────┘     └──────────────┘

A production Nginx configuration serving both the CMS admin and the generated site:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

server {
    listen 80;
    server_name example.com;

    # Serve the CMS admin panel
    location /admin/ {
        alias /var/www/example.com/admin/;
        try_files $uri $uri/ /admin/index.html;
    }

    # Serve the static site
    location / {
        root /var/www/example.com/public;
        try_files $uri $uri/ =404;
    }
}

# With HTTPS via Let's Encrypt
server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    location /admin/ {
        alias /var/www/example.com/admin/;
        try_files $uri $uri/ /admin/index.html;
    }

    location / {
        root /var/www/example.com/public;
        try_files $uri $uri/ =404;
    }
}

FAQ

What is the difference between a Git-based CMS and a headless CMS?

A Git-based CMS stores content as files in a Git repository (Markdown, JSON, YAML), while a traditional headless CMS stores content in a database and serves it via an API. Git-based CMS tools like Decap CMS and Sveltia CMS commit every edit directly to your repository, providing built-in version control and eliminating the need for database backups.

Can I use these CMS tools without Netlify or any cloud service?

Yes. All three tools can be fully self-hosted. Decap CMS and Sveltia CMS require a Git Gateway proxy (such as decap-server) to handle authentication when self-hosting. TinaCMS can run entirely locally with its filesystem backend, requiring no external services.

Which CMS works best with Hugo?

Decap CMS and Sveltia CMS have excellent Hugo support since they write directly to the content/ directory using Hugo’s expected Markdown format with YAML frontmatter. TinaCMS primarily targets Next.js but can work with Hugo through its cloud backend, though self-hosting with Hugo requires more configuration.

How do I handle user authentication for self-hosted CMS?

For Decap CMS and Sveltia CMS, the decap-server proxy handles OAuth authentication with GitHub, GitLab, or Bitbucket. You register an OAuth application with your Git provider and configure the proxy with the client ID and secret. TinaCMS uses its own authentication when self-hosted via the LocalBackendAuthProvider.

Can I migrate from Netlify CMS to one of these tools?

Sveltia CMS is a drop-in replacement — it uses the exact same config.yml format, so you only need to change the CDN URL in your admin/index.html. Decap CMS is the official successor and maintains near-full compatibility. TinaCMS uses a different configuration format (TypeScript schema), so migration requires rewriting your content schema.

Do these CMS tools support multiple content types?

Yes. All three support multiple collections (content types) with different field schemas. You can define collections for blog posts, pages, product listings, team members, and more — each with custom fields like strings, dates, images, lists, and rich text.

Is there a way to preview content before publishing?

Decap CMS and Sveltia CMS support an editorial workflow where content goes through draft → review → ready states before being merged. TinaCMS offers real-time visual preview — you see changes rendered on the live page as you edit. For Hugo sites, you can also run hugo server locally to preview changes before committing.

Tags: comparison guide self-hosted cms git-based
Advertise here

Related Articles

Grav CMS vs Pico vs Bludit: Best Flat-File CMS 2026

Apr 23, 2026 · 11 min

Strapi vs Directus vs Ghost: Best Self-Hosted Headless CMS 2026

Apr 16, 2026 · 15 min

BookWyrm vs Jelu vs BookLogr: Best Self-Hosted Goodreads Alternatives 2026

Apr 28, 2026 · 10 min
Advertise here