sveltia-cms

Sveltia CMS Skill

Complete skill for integrating Sveltia CMS into static site projects.

What is Sveltia CMS?

Sveltia CMS is a Git-based lightweight headless content management system built from scratch as the modern successor to Decap CMS (formerly Netlify CMS). It provides a fast, intuitive editing interface for content stored in Git repositories.

Key Features

1. Lightweight & Fast
2. Bundle size: <500 KB (minified/brotlied) vs 1.5-2.6 MB for competitors
3. Built with Svelte compiler (no virtual DOM overhead)
4. Uses GraphQL APIs for instant content fetching
5. Relevance-based search across all content

1. Modern User Experience
2. Intuitive admin interface with full viewport utilization
3. Dark mode support (follows system preferences)
4. Mobile and tablet optimized
5. Drag-and-drop file uploads with multiple file support
6. Real-time preview with instant updates

1. Git-Native Architecture
2. Content stored as Markdown, MDX, YAML, TOML, or JSON
3. Full version control and change history
4. No vendor lock-in - content lives with code
5. Supports GitHub, GitLab, Gitea, Forgejo backends

1. Framework-Agnostic
2. Served as vanilla JavaScript bundle
3. Works with Hugo, Jekyll, 11ty, Gatsby, Astro, Next.js, SvelteKit
4. No React, Vue, or framework runtime dependencies
5. Compatible with any static site generator

1. First-Class Internationalization
2. Multiple language support built-in
3. One-click DeepL translation integration
4. Locale switching while editing
5. Flexible i18n structures (files, folders, single file)

1. Built-In Image Optimization
2. Automatic WebP conversion
3. Client-side resizing and optimization
4. SVG optimization support
5. Configurable quality and dimensions

Current Versions

• @sveltia/cms: 0.113.5 (October 2025)
• Status: Public Beta (v1.0 expected early 2026)
• Maturity: Production-ready (265+ issues solved from predecessor)

When to Use This Skill

✅ Use Sveltia CMS When:

1. Building Static Sites
2. Hugo blogs and documentation
3. Jekyll sites and GitHub Pages
4. 11ty (Eleventy) projects
5. Gatsby marketing sites
6. Astro content-heavy sites

1. Non-Technical Editors Need Access
2. Marketing teams managing pages
3. Authors writing blog posts
4. Content teams without Git knowledge
5. Clients needing easy content updates

1. Git-Based Workflow Desired
2. Content versioning through Git
3. Content review through pull requests
4. Content lives with code in repository
5. CI/CD integration for deployments

1. Lightweight Solution Required
2. Performance-sensitive projects
3. Mobile-first editing needed
4. Quick load times critical
5. Minimal bundle size important

1. Migrating from Decap/Netlify CMS
2. Existing config.yml can be reused
3. Drop-in replacement (change 1 line)
4. Better performance and UX
5. Active maintenance and bug fixes

❌ Don't Use Sveltia CMS When:

1. Real-Time Collaboration Needed
2. Multiple users editing simultaneously (Google Docs-style)
3. Use Sanity, Contentful, or TinaCMS instead

1. Visual Page Building Required
2. Drag-and-drop page builders needed
3. Use Webflow, Builder.io, or TinaCMS (React) instead

1. Highly Dynamic Data
2. E-commerce with real-time inventory
3. Real-time dashboards or analytics
4. Use traditional databases (D1, PostgreSQL) instead

1. React-Specific Visual Editing Needed
2. In-context component editing
3. Use TinaCMS instead (React-focused)

Sveltia CMS vs TinaCMS

Use Sveltia for:

• Hugo, Jekyll, 11ty, Gatsby (non-React SSGs)
• Traditional CMS admin panel UX
• Lightweight bundle requirements
• Framework-agnostic projects

Use TinaCMS for:

• React, Next.js, Astro (React components)
• Visual in-context editing
• Schema-driven type-safe content
• Modern developer experience with TypeScript

Both are valid - Sveltia complements TinaCMS for different use cases.

Setup Patterns by Framework

Use the appropriate setup pattern based on your framework choice.

1. Hugo Setup (Most Common)

Hugo is the most popular static site generator for Sveltia CMS.

Steps:

1. Create admin directory:

``bash mkdir -p static/admin ``

1. Create admin index page:

``html <!-- static/admin/index.html --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script> </body> </html> ``

1. Create config file:

```yaml # static/admin/config.yml backend: name: github repo: owner/repo branch: main

media_folder: static/images/uploads public_folder: /images/uploads

collections:

• name: posts

label: Blog Posts folder: content/posts create: true slug: '{{year}}-{{month}}-{{day}}-{{slug}}' fields:

• { label: 'Title', name: 'title', widget: 'string' }
• { label: 'Date', name: 'date', widget: 'datetime' }
• { label: 'Draft', name: 'draft', widget: 'boolean', default: true }
• { label: 'Tags', name: 'tags', widget: 'list', required: false }
• { label: 'Body', name: 'body', widget: 'markdown' }

```

1. Start Hugo dev server:

``bash hugo server ``

1. Access admin:

`` http://localhost:1313/admin/ ``

Template: See templates/hugo/

2. Jekyll Setup

Jekyll is commonly used with GitHub Pages and Sveltia CMS.

Steps:

1. Create admin directory:

``bash mkdir -p admin ``

1. Create admin index page:

``html <!-- admin/index.html --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script> </body> </html> ``

1. Create config file:

```yaml # admin/config.yml backend: name: github repo: owner/repo branch: main

media_folder: assets/images/uploads public_folder: /assets/images/uploads

collections:

• name: posts

label: Blog Posts folder: _posts create: true slug: '{{year}}-{{month}}-{{day}}-{{slug}}' fields:

• { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }
• { label: 'Title', name: 'title', widget: 'string' }
• { label: 'Date', name: 'date', widget: 'datetime' }
• { label: 'Categories', name: 'categories', widget: 'list', required: false }
• { label: 'Body', name: 'body', widget: 'markdown' }

```

1. Start Jekyll dev server:

``bash bundle exec jekyll serve ``

1. Access admin:

`` http://localhost:4000/admin/ ``

Template: See templates/jekyll/

3. 11ty (Eleventy) Setup

11ty works well with Sveltia CMS for flexible static sites.

Steps:

1. Create admin directory:

``bash mkdir -p admin ``

1. Create admin index page:

``html <!-- admin/index.html --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script> </body> </html> ``

1. Create config file:

```yaml # admin/config.yml backend: name: github repo: owner/repo branch: main

media_folder: src/assets/images public_folder: /assets/images