---
url: /en/docs/intro.md
description: >-
Find out about the features, use cases and target audience of Sveltia CMS, a
leading Git-based headless content management system designed for modern
Jamstack sites.
---
# What is Sveltia CMS?
Sveltia CMS is a leading Git-based headless content management system designed for [Jamstack](https://jamstack.org/) web development. It’s open source and free for personal and commercial use. Our modern, lightweight CMS provides an excellent user experience (UX) for content editors and a great developer experience (DX) for web developers.
Sveltia CMS was specifically built as a [successor to Netlify CMS](/en/docs/successor-to-netlify-cms) (now Decap CMS), addressing its shortcomings and adding many new features, while maintaining compatibility with its configuration format, API and workflow. [Migrating from Netlify/Decap CMS](/en/docs/migration/netlify-decap-cms) to Sveltia CMS is straightforward and requires minimal changes.
Try Sveltia CMS today and experience a fast, flexible, and user-friendly CMS that empowers you to manage your content with ease.
## Highlights
While there are numerous CMS options available in the market, Sveltia CMS stands out due to its unique combination of features, architecture, performance, and user experience.
The unique selling points of Sveltia CMS include:
#### Git-Based
Content is stored in your Git repository, giving you full control, complete version history, and collaboration capabilities. No database is required. Every change is auditable.
#### Headless
Decoupled from the frontend, allowing you to use any static site generator (SSG) or frontend framework of your choice. Deploy anywhere. Perfect for Jamstack architecture.
#### Lightweight
It’s a single-page application (SPA) with less than 500 KB (minified + brotlied) for the entire CMS application, yet packed with many powerful features. A low-carbon footprint CMS.
#### High Performance
Built with the Svelte framework, Lexical editor, efficient GraphQL APIs, smart caching strategies, and lazy loading to ensure a fast and responsive user experience.
#### Maintenance-Free
The CMS is a small JavaScript bundle served via a content delivery network (CDN) and runs entirely in the browser. Always up-to-date. No build tools or servers required.
#### Not SaaS
It’s not a service but a client-side application, giving you full control over your data. No user registration or subscription required. NPM package is available for self-hosting.
#### Modern UX
An intuitive, user-friendly, and accessible UI for content editors, including 20+ languages, mobile support, dark mode, keyboard shortcuts, drag-and-drop uploads, and more.
#### Excellent DX
Developer experience is a top priority, with comprehensive documentation, JSON schema for configuration, TypeScript support, AI tools, and local development workflow.
#### Generic-Purpose
Designed to handle a wide range of content types and use cases, making it suitable for various projects — from blogs and portfolios to catalogs and knowledge bases.
#### No Vendor Lock-In
Framework-agnostic and platform-independent, with support for common file formats and multiple Git service providers. Bring your favorite tech stack. Switch services anytime.
#### First-Class I18n Support
Built-in support for multiple languages, making it easy to create multilingual websites. Translate content with one-click using AI integrations.
#### Powerful Asset Management
A built-in digital asset management (DAM) system for uploading and managing media files. Integrates with external storage and stock photo providers.
#### Open Source
Available under the permissive MIT license, allowing modification and commercial use. Fully transparent development process on GitHub. Free of charge, forever.
#### Privacy Focused
We don’t collect any user data. No account. No analytics. All operations occur directly between your browser and Git backend, as well as your chosen third-party integrations.
#### Active Development
Regular updates and improvements, with a focus on addressing user feedback and issues. Bug fixes typically released within 24 hours, and new features added frequently.
#### Successor to Netlify CMS
A modern, powerful, and user-friendly [alternative to Netlify/Decap CMS](/en/docs/successor-to-netlify-cms), with a familiar configuration format, API and workflow. Easy [migration path](/en/docs/migration/netlify-decap-cms) for existing users.
#### Trusted Platform
Maintained with great care by an [experienced UX engineer](#about-the-author). [Praised by developers](/en/#developers-love-sveltia-cms). Backed by hundreds of [real-world examples](/en/showcase), including a U.S. government agency.
## Use Cases
Sveltia CMS is a generic-purpose content management system that can handle a wide variety of content types and use cases beyond just blog posts and pages.
It can be used in various scenarios, including:
* Personal blogs and websites
* Small business sites
* Community and organization sites
* Institutional and educational sites
* Nonprofit and charity sites
* Government and public sector sites
* Retail and e-commerce sites
* Artist and creative sites
* Blogs and news sites
* Marketing sites
* Documentation sites
* Portfolios and resumes
* Product catalogs
* Event listings
* Member directories
* Knowledge bases, glossaries and wikis
Take a look at the [Showcase](/en/showcase) page for real-world examples of websites using Sveltia CMS across different industries and purposes.
### Migrating from Other CMSs
Sveltia CMS is a modern, powerful, and user-friendly [successor to Netlify CMS](/en/docs/successor-to-netlify-cms) (now Decap CMS). Many sites are [switching from Netlify/Decap CMS](/en/docs/migration/netlify-decap-cms) to Sveltia CMS to enjoy its superior features, performance, and user experience.
CMS migrations are more common than you might think. In fact, the majority of Sveltia CMS users are [migrating from other platforms](/en/docs/migration), including:
* Our predecessor and its variants: Netlify CMS, Decap CMS, Static CMS
* Other headless CMSs: Pages CMS, DatoCMS, Keystatic, TinaCMS, etc.
* Traditional CMSs: WordPress, Joomla, Drupal, etc.
* Website builders: Wix, Squarespace, GoDaddy, Google Sites, Webflow, Weebly, Canva, etc.
Our [industry-leading showcase](/en/showcase) tracks which sites have migrated from which platforms, so you can see how other users have successfully transitioned to Sveltia CMS. Switch with confidence, knowing that you’re not alone in your migration journey.
### Selling Products Online
Sveltia CMS isn’t an e-commerce platform, but some small online stores use it to manage their product catalogs and accept orders through a messaging app like WhatsApp. This is a great option for small businesses that want to sell products online without the complexity and cost of a full-fledged e-commerce solution.
See the [Retail & E-commerce](/en/showcase?category=retail) category on our [Showcase](/en/showcase) for examples of retailers using Sveltia CMS.
### Scalability
There are no hard limits on the amount of content or number of users you can have with Sveltia CMS. However, performance may vary depending on the size of your Git repository and your Git service provider’s capabilities.
The CMS is largely constrained by the API of the underlying Git backend: the number of files that can be fetched, created, updated, or deleted in a single API call, as well as rate limits, response times, and other factors. Among the [supported backends](/en/docs/backends#supported-backends), GitHub generally offers the best performance and reliability thanks to its powerful GraphQL API.
Due to these limitations, Git-based CMSs like Sveltia CMS are best suited for small to medium-sized projects. For large projects involving thousands of entries and assets, consider a more robust CMS solution designed for enterprise use.
### Framework Agnosticism
Sveltia CMS is typically used to generate data that is then consumed by a frontend framework to build websites or web applications. It’s framework-agnostic, meaning it simply reads and writes data files without interacting with [your chosen framework](/en/docs/frameworks).
This flexibility extends far beyond traditional web projects. It can manage a JSON data catalog consumed by mobile apps or other software, or power [vanilla JavaScript projects](/en/docs/frameworks/none) where webpages directly read static files. Whether you’re using a modern framework, no framework at all, or building entirely different types of applications, the CMS adapts to your needs.
At its core, Sveltia CMS is a simple NoSQL database management system that uses Git repositories as its data store. This design enables it to be adapted to various content management scenarios.
## Target Audience
Git-based headless CMSs like Sveltia CMS are part of the larger [Jamstack](https://jamstack.org/) ecosystem. Setting up the CMS requires broad technical knowledge, such as familiarity with Git workflow, framework integration and CI/CD pipelines. Therefore, it’s primarily targeted at experienced web developers who have the necessary skills.
Of course, the CMS is not only aimed at individuals. It serves small to medium-sized businesses (SMBs), nonprofit organizations, and agencies with access to engineering resources for initial setup and ongoing maintenance. It is ideal for those who need a flexible, powerful and cost-effective CMS solution without vendor lock-in.
Once set up by developers, CMS end-users, such as content editors and marketers, don’t need any technical knowledge to use the application for content editing and management. The CMS hides all technical complexities behind a user-friendly interface.
No resources to set up and maintain a CMS? The maintainer is available for hire to help you get started. See the [Support](/en/support#professional-services) page for details.
::: info Users require a Git service account
Currently, Sveltia CMS does not have a built-in user authentication system. Instead, it relies on the Git backend for user authentication and access control. This means that users need to have an account with the chosen Git service provider (e.g. GitHub) to access the CMS, though they don’t need to know Git itself or how to use the service. We plan to add better authentication methods in [future releases](/en/docs/roadmap) to accommodate users without Git service accounts.
:::
### Great for Freelancers and Clients
Sveltia CMS was originally developed by a [freelance UX engineer](#about-the-author) for his own clients, and he continues to maintain it. As such, it’s designed with the needs of freelancers and their clients in mind.
It’s ideal for freelance developers who want to provide their clients with a modern, powerful, user-friendly CMS solution without the hassle of setting up and maintaining a traditional CMS, such as WordPress. It’s also great for clients who want an intuitive interface for managing their content without worrying about technical details.
## Why Choose Sveltia CMS?
If you’re specifically looking for a free, open source, Git-based [headless CMS](https://jamstack.org/headless-cms/), your options are limited. Actively maintained, framework-agnostic offerings are especially rare, leaving Tina and Sveltia CMS as the primary choices.
Tina is a commercial entity that mainly caters to large-scale Next.js projects. In contrast, Sveltia CMS is a community-driven project that prioritizes excellent UX and DX for small to medium-sized projects using [any framework](/en/docs/frameworks), including Astro, Eleventy, Hugo, Jekyll and SvelteKit.
It’s also a [successor to Netlify CMS](/en/docs/successor-to-netlify-cms) (now Decap CMS), which has been widely used in the Jamstack community for years. Trying Sveltia CMS is a no-brainer if you’re looking for a modern, powerful, and user-friendly alternative to Netlify/Decap CMS.
Need [i18n support](/en/docs/i18n)? Sveltia CMS is the only option that offers first-class multilingual content management capabilities right out of the box.
::: info Choose a well-maintained CMS
Most open source, Git-based CMS projects either become abandoned or are barely maintained. This includes Netlify CMS, Decap CMS, Static CMS, and Keystatic, among others.
Users are left with unmaintained software that may contain security vulnerabilities, bugs, and compatibility issues. To ensure you receive timely updates and support, always choose a CMS that is actively maintained and has a responsive development team.
:::
## Who’s Using Sveltia CMS?
While there is no way to track all Sveltia CMS users due to its open source nature, we have seen a growing number of websites adopting Sveltia CMS since its launch. [GitHub search](https://github.com/search?q=sveltia\&type=commits\&s=committer-date\&o=desc) suggests our product is already being used by thousands of projects, including personal blogs, community sites, institutional sites, and small business sites.
Our [Showcase](/en/showcase) page features a curated selection of websites using Sveltia CMS across different industries and purposes. We encourage you to explore these examples to see the versatility and capabilities of Sveltia CMS in action.
We’ve shared some [community insights](https://github.com/sveltia/sveltia-cms/discussions/809) based on the first 300 sites listed on the showcase. These insights give us a good idea of the types of projects and users that have adopted Sveltia CMS.
See also the homepage for [testimonials](/en/#developers-love-sveltia-cms) from developers who have tried Sveltia CMS and shared their feedback.
## Try It Online
A live demo site is coming soon!
## Project Goals
* Making Sveltia CMS a viable, definitive [successor to Netlify CMS](/en/docs/successor-to-netlify-cms)
* Empowering SMBs and individuals who need a free, yet powerful, high-quality CMS solution
* Emerging as the leading open source offering in the Git-based CMS market
* Providing superior [i18n support](/en/docs/i18n) for multilingual content management
* Extending its capabilities as digital asset management (DAM) software
* Showcasing the power of Svelte and UX engineering
## Project Status
Sveltia CMS is currently in **beta**, with version 1.0 (GA) scheduled for release in late 2026. Check our [release notes](/en/docs/releases#release-information) for updates. See also our [roadmap](/en/docs/roadmap).
This is currently a personal project maintained by a single developer. We continue to [create a robust successor to Netlify CMS](/en/docs/successor-to-netlify-cms#objectives) and refactor the codebase for long-term maintainability, so our development pace may be slower than you expect. We’ll welcome contributions from the community once our codebase has stabilized.
## About the Author
Sveltia CMS is created and maintained by [Kohei Yoshino](https://github.com/kyoshino), a seasoned UX engineer based in Toronto, Canada. With over 20 years of experience in web development and open source, Kohei is passionate about building tools that improve people’s lives.
As a generalist who loves code, design, marketing, localization, documentation and everything in between, Kohei brings a unique perspective to software development. He is dedicated to creating high-quality, user-centric products that solve real-world problems.
Sveltia CMS is Kohei’s flagship open source project originally built for his own freelance clients, and he is committed to its long-term success and growth. You’re in good hands — Expect constant improvements to the UX and DX across the platform.
## Resources
* Introducing Sveltia CMS: a short technical presentation by [@kyoshino](https://github.com/kyoshino) during the *This Week in Svelte* online meetup on March 31, 2023 — [slides](https://docs.google.com/presentation/d/1Wi4ty-1AwOp2-zy7LctmzCV4rrdYPfke9NGhO0DdRdM) & [recording](https://www.youtube.com/watch?v=-YjLubiieYs\&t=1660)
* [Introducing Sveltia CMS: The Git-based Headless CMS Renaissance](https://www.meetup.com/buildtime/events/312997511/): a presentation by [@kyoshino](https://github.com/kyoshino) at the *Build-Time Render* online meetup on February 3, 2026 — [slides](https://docs.google.com/presentation/d/1XQr6TcXPSuW-zO0RpKPfYserIBQyNNcyB2vO0pEsu6g) & [recording](https://www.youtube.com/watch?v=IBopFzdFBAU)
## External Recognition
* [LogRocket Blog – 9 best Git-based CMS platforms for your next project](https://blog.logrocket.com/9-best-git-based-cms-platforms/)
* [Jamstack – Headless CMS](https://jamstack.org/headless-cms/)
* [Hugo – Front-end interfaces](https://gohugo.io/tools/front-ends/)
* [Made with Svelte](https://madewithsvelte.com/sveltia-cms)
* [11ty Bundle Blog](https://11tybundle.dev/blog/11ty-bundle-82/)
## Acknowledgements
This project would not have been possible without the open source Netlify CMS project. We are grateful to the maintainers for their hard work over the years. We would also like to thank the Sveltia CMS user community for their valuable feedback and ongoing support, which has helped us to identify issues and improve the product.
Additionally, we want to acknowledge the contributions of the many open source projects and libraries that Sveltia CMS relies on, including Svelte, Lexical, DOMPurify, and more. Finally, we want to thank you for taking the time to learn about Sveltia CMS. We hope it can be a valuable tool for your content management needs.
---
---
url: /en/docs/successor-to-netlify-cms.md
description: >-
Find out how Sveltia CMS became the de facto successor to Netlify CMS and a
modern alternative to Decap CMS, offering significant improvements in every
area.
---
# Successor to Netlify CMS (now Decap CMS)
Sveltia CMS was built from scratch as a modern successor to Netlify CMS, which was popular but abandoned in early 2022. We have picked up where they left off and have already solved hundreds of issues reported in the predecessor’s repository, ranging from critical bugs to top feature requests.
Netlify CMS was later rebranded as Decap CMS, but it’s been poorly maintained under new management for years. Sveltia CMS is a superior alternative to both Netlify CMS and Decap CMS, offering a significantly improved experience, security, and reliability.
Join the growing number of users who have switched to Sveltia CMS and enjoy a modern, powerful, and well-maintained content management system for your static sites!
::: info Netlify vs. Netlify CMS
**Netlify CMS** was one of the open source projects maintained by **Netlify**, the popular web hosting and automation platform. While the CMS is no longer part of their portfolio, Netlify itself remains a thriving company offering various services for modern web development.
:::
::: info Independent Project
We are not affiliated with Netlify or any of its partners. Sveltia CMS is an independent, open source project created and maintained by [Kohei Yoshino](https://github.com/kyoshino). It’s not tied to any specific company.
:::
## TL;DR
* A complete modern rewrite of [Netlify CMS](https://www.netlify.com/blog/2017/12/07/open-source-netlify-cms-hits-1.0-bringing-git-based-content-management-to-static-sites-everywhere/) (now [Decap CMS](https://github.com/decaporg/decap-cms))
* Actively maintained and outperforming neglected Decap CMS in every aspect
* De facto successor to Netlify/Decap CMS that works better by design
* Drop-in replacement for common Netlify/Decap CMS use cases
* Solved 310+ [Netlify/Decap CMS issues](https://github.com/decaporg/decap-cms/issues) (730+ including duplicates)
* Significant UX/DX improvements with more enhancements planned
* Much more stable, performant, secure, accessible, powerful and reliable
* Many sites already migrated from Netlify/Decap CMS — See [examples](/en/showcase?migrated-from=decap-cms)
## Motivation
Sveltia CMS was born in November 2022, when the progress of [Netlify CMS](https://www.netlify.com/blog/2017/12/07/open-source-netlify-cms-hits-1.0-bringing-git-based-content-management-to-static-sites-everywhere/) was stalled for more than six months. [@kyoshino](https://github.com/kyoshino)’s clients wanted to replace their Netlify CMS instances without much effort, mainly to get better internationalization (i18n) support.
To achieve radical improvements in UX, performance, i18n and other areas, it was ultimately decided to build an alternative from the ground up, while ensuring an easy migration path from the other. After proving the idea with a rapid [Svelte](https://svelte.dev/) prototype, development was accelerated to address their primary use cases. The new product has since been named Sveltia CMS and released as open source software to encourage wider adoption.
We loved the simple, unique setup of Netlify CMS that turned a Git repository into a database with a single-page app served from a CDN plus a plain YAML config file. In support of the [Jamstack](https://jamstack.org/) concept, we wanted to revive it, modernize it, and take it to the next level.
## Objectives
Our goal is not just to create another CMS that is compatible with Netlify CMS, but to **succeed Netlify CMS as a whole** by addressing its numerous issues reported to its repository over the years. Here’s how we’re doing:
### Ensuring High [Compatibility with Netlify/Decap CMS](/en/docs/migration/netlify-decap-cms#compatibility)
* Inherits the [CDN-served SPA architecture](/en/docs/architecture#how-sveltia-cms-works) of Netlify CMS, with various improvements
* Aims to work as a drop-in replacement for common use cases, as long as deprecated features are not in use
* The vast majority of existing configurations work out of the box
* Some missing features will be implemented before GA
### Tackling as Many [Netlify/Decap CMS Issues](https://github.com/decaporg/decap-cms/issues) as Possible
* So far, **310+ issues, or 730+ if including duplicates, have been effectively solved** in Sveltia CMS — Yes, you read it right
* Target:
* 350 issues, or 750 if including duplicates, by v1.0 — Good progress!
* 450 issues, or 1,000 if including duplicates, in the future 💪
* or every single issue that’s relevant, fixable, and worth dealing with 🔥
* Issues include everything:
* Outstanding issues from feature requests to bug reports
* [Issues closed as stale](https://github.com/decaporg/decap-cms/issues?q=is%3Aissue+%22Closing+as+stale%22) or without an optimal solution
* [Discussions](https://github.com/decaporg/decap-cms/discussions)
* Stalled [pull requests](https://github.com/decaporg/decap-cms/pulls)
* Many of the bugs, including the annoying crashes, have already been solved
* The remaining bugs are mostly related to [unimplemented features](/en/docs/migration/netlify-decap-cms#current-limitations)
* Many of their [top-voted features](https://github.com/decaporg/decap-cms/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc) are [on our table](/en/docs/roadmap) or already implemented in Sveltia CMS
## What About Decap CMS?
Due to its unfortunate abandonment in early 2022, Netlify CMS spawned three successors. Sveltia CMS is one of them, along with Static CMS and Decap CMS. Here’s a brief comparison of the three projects:
* [Static CMS](https://github.com/StaticJsCMS/static-cms): a community fork
* Initial commit made in September 2022
* ❌ Discontinued in September 2024 after making meaningful improvements
* [Decap CMS](https://github.com/decaporg/decap-cms): a rebranded version
* [Announced in February 2023](https://www.netlify.com/blog/netlify-cms-to-become-decap-cms/) as an official continuation with a Netlify agency partner taking ownership
* Maintained by a company with three developers
* ⚠️ A bloated, legacy React application that carries over all the technical debt and issues of Netlify CMS
* ⚠️ Seemingly random issues were [closed as stale](https://github.com/decaporg/decap-cms/issues?q=is%3Aissue+%22Closing+as+stale%22) following the takeover
* ⚠️ It took six months to ship the first release (v3.0) under the new name
* ⚠️ Mostly low activity with [only occasional releases](https://github.com/decaporg/decap-cms/releases) and a few minor improvements
* ⚠️ Bug reports continue to pile up, often without any response
* ⚠️ Regressions are sometimes ignored even when they’re reported by multiple users
* ⚠️ Pull requests, including those from maintainers, sit idle for months or years
* ⚠️ Basic i18n support with critical limitations and outstanding bugs
* ⚠️ Keeps poor documentation without any migration guide or compatibility notes
* ⚠️ The [Examples](https://decapcms.org/docs/examples/) page only lists outdated demos, not real-world users
* ⚠️ No testimonials are available, leaving users without social proof
* ⚠️ No public roadmap is available, leaving users in the dark
* ⚠️ Distracted by a [premium service](https://decapcms.org/turbo/) while the core open source project remains in a miserable state
* ⚠️ No effective issue triage practice in place, with fixed issues sometimes left open and duplicates often left unmarked
* ⚠️ Maintainers are sometimes absent for weeks, leaving users with no support
* ❌ Security is a low priority with a poor track record of addressing vulnerabilities in a professional, timely and responsible manner
* ❌ A moderate-severity [XSS vulnerability](https://github.com/advisories/GHSA-xp8g-32qh-mv28), a [proxy server vulnerability](https://github.com/decaporg/decap-cms/issues/7875), and high-severity dependency vulnerabilities remain unaddressed
* ❌ Constant fatal crash reports are being dismissed without any solution
* **Sveltia CMS**: not a fork but a **complete rewrite**
* Started in November 2022, first appeared on GitHub in March 2023
* Personal project of an experienced UX engineer
* ✅ A lightweight Svelte application built from scratch with no technical debt
* ✅ Actively developed with [frequent releases](https://github.com/sveltia/sveltia-cms/releases) and [numerous improvements](#improvements-over-netlify-decap-cms)
* ✅ Relevant issues are being resolved regardless of their age or status
* ✅ Most of bug reports are addressed promptly, usually within 24 hours
* ✅ Any regressions are fixed swiftly once reported
* ✅ First-class [i18n support](/en/docs/i18n) for easier multilingual content management
* ✅ Provides comprehensive documentation, including [Netlify CMS migration guide](/en/docs/migration/netlify-decap-cms)
* ✅ The [Showcase](/en/showcase) page features real-world sites from various industries
* ✅ Provides [developer testimonials](/en/#developers-love-sveltia-cms) for validation
* ✅ An [extensive roadmap](/en/docs/roadmap) is available to keep users informed
* ✅ Focused on the core platform, free from monetization distractions
* ✅ Effective issue triage practice in place, with fixed issues closed and duplicates marked
* ✅ Maintainer is responsive and available to provide support
* ✅ [Security is a top priority](/en/docs/security), and we follow the best practices and respond swiftly
* ✅ No known unpatched security vulnerabilities, with dependencies kept up-to-date
* ✅ No known crashes, with a swift response to any that may arise
While Decap CMS unexpectedly emerged as the official successor, it has largely stagnated and failed to revive the original Netlify CMS project as hoped. Years of neglect have left evident signs that make a turnaround unfeasible at this point, with [security remaining a major concern](#better-security). This leaves users with no choice but to switch to Sveltia CMS or other alternatives.
Created months before the announcement of Decap CMS, Sveltia CMS has firmly established itself as the de facto successor. We have a clear focus on delivering a superior experience for users seeking a modern alternative to Netlify CMS. Regardless of other projects in this field, we are committed to continuously enhancing the platform for the benefit of our users.
::: info Official vs. De Facto Successor
In the open source world, it’s not uncommon for an official product to fail while an unofficial one, typically a fork, thrives. A notable example is [Apache OpenOffice](https://en.wikipedia.org/wiki/Apache_OpenOffice) and [LibreOffice](https://en.wikipedia.org/wiki/LibreOffice). The former is the official successor to OpenOffice.org, but it has largely been abandoned, leaving security issues unresolved for years. Meanwhile, LibreOffice has become the de facto successor, enjoying active development and a vibrant community.
:::
There is no reason for new projects to choose legacy, poorly-maintained Decap CMS over modern, well-maintained Sveltia CMS. We also encourage existing Netlify/Decap CMS users to [migrate to Sveltia CMS](/en/docs/migration/netlify-decap-cms) as soon as possible to take advantage of its [numerous improvements](#improvements-over-netlify-decap-cms).
## True Successor, Better by Design
Among the three successors, Sveltia CMS is the only project that doesn’t inherit the complexity, technical debt, and numerous bugs of Netlify CMS.
* We rebuilt the app from scratch using a [modern framework](https://svelte.dev/)
* We develop our own UI component, i18n, and utility libraries
* We don’t reuse any part of the predecessor’s codebase
* We incorporate [i18n support](/en/docs/i18n) into the core instead of adding it as an afterthought
* We closely monitor and analyze the predecessor’s issue tracker
* We rearchitect the entire user experience (UX) and developer experience (DX)
This “total reboot” has enabled us to implement [hundreds of improvements](#improvements-over-netlify-decap-cms) without getting stuck in a legacy system. Furthermore:
* We carry forward the original vision of Netlify CMS as a simple, Git-based content management solution for Jamstack sites
* We dedicate significant time and effort to modernizing the platform, including documentation and developer tools
* We continue to address [issues](https://github.com/decaporg/decap-cms/issues) reported in the predecessor’s repository, with the aim of solving 1,000 issues, including duplicates
* We materialize the enhancements that Netlify CMS users have long desired
For that reason, Sveltia CMS is the **true successor to Netlify CMS**, not a spiritual successor or mere alternative, albeit unofficial. Whether you’re migrating from the original Netlify CMS or another successor, Sveltia CMS offers the best overall experience.
## Adoption
[GitHub search](https://github.com/search?q=decap+sveltia\&type=commits\&s=committer-date\&o=desc) shows that Netlify/Decap CMS users are migrating to Sveltia CMS every day to take advantage of its numerous improvements. More than one-third of Sveltia CMS users have migrated from Netlify/Decap CMS, and the number continues to grow. Visit our [Showcase](/en/showcase) page to see some of them!
* [Examples of sites migrated from Netlify CMS](/en/showcase?migrated-from=netlify-cms)
* [Examples of sites migrated from Decap CMS](/en/showcase?migrated-from=decap-cms)
## Improvements over Netlify/Decap CMS
Netlify/Decap CMS users will definitely be pleased and surprised by the numerous improvements we have made, from the small to the large. We make *everything* better.
::: info Note
This lengthy section compares Sveltia CMS with both Netlify CMS and Decap CMS. Some of the listed issues may have been resolved in the current version of Decap CMS.
:::
### Better UX
* Created and actively maintained by an [experienced UX engineer](https://github.com/kyoshino) who loves code, design, marketing, localization, documentation and everything in between. You can expect constant improvements to the user experience (UX) and developer experience (DX) across the platform.
* The maintainer tries to respond to bug reports as quickly as possible. While there are no guarantees, the typical turnaround time for a bug fix is less than 24 hours. In some cases, a fix can be released within an hour or two. In contrast, most bug reports to Netlify/Decap CMS will never be addressed.
* Frequent releases deliver new features and enhancements to users more quickly. Meanwhile, Decap CMS’s release interval has been irregular and often long, sometimes exceeding two months, even between patch releases, which can be frustrating for both users and contributors.
* Many of our minor [releases](https://github.com/sveltia/sveltia-cms/releases) address one or more Netlify/Decap CMS issues, giving you even more reasons to switch from the legacy predecessor.
* Offers a modern, intuitive user interface that utilizes the full viewport,\[^178] inspired in part by the Netlify CMS v3 prototype.\[^1]\[^211]\[^212]\[^213]\[^214]
* Provides immersive dark mode.\[^2] The UI theme follows the user’s system preference by default and can be changed in the application settings.
* Users can easily manage content on-the-go with mobile and tablet support.\[^18]\[^215]
* For a smoother experience, we even go beyond responsive design with optimized navigation, floating action buttons, [view transitions](https://developer.chrome.com/docs/web-platform/view-transitions), larger buttons, and other tweaks. We’ll continue to fully optimize the app for small screens and touch devices.
* If you’re already signed in on your desktop, open the Account menu in the top right corner of the CMS, click Sign In with Mobile, and scan the QR code for passwordless sign-in. Your settings will be automatically copied.
* Users can [install the CMS as an app](/en/docs/ui#installing-as-an-app) (PWA) on their devices and use it like a native application.\[^339]
* Made with [Svelte](https://svelte.dev/), not React, means we can spend more time on UX rather than tedious state management. It also allows us to avoid common fatal React application crashes.\[^113]\[^129] Best of all, Svelte offers great performance.
* Other crashes in Netlify/Decap CMS are also irrelevant to us, making Sveltia CMS much more stable.\[^112]\[^203]\[^204]\[^260]\[^331]\[^338]\[^341]\[^342]\[^343]\[^344] Netlify/Decap CMS continues to receive crash reports on a daily basis, with no effective solution in sight.
* We build [our own UI component library](https://github.com/sveltia/sveltia-ui), including custom dialogs, to ensure optimal usability without compromising accessibility.\[^277]\[^196]\[^205]\[^206]\[^207]\[^208]\[^209]\[^210]
* Users can personalize the application with various settings, including appearance and language. [Developer Mode](/en/docs/ui#developer-mode) can also be enabled, which enables certain features and displays the CMS version number.\[^270]
* Never miss out on the latest features and bug fixes by being notified when an update to the CMS is available.\[^31] Then update to the latest version with a single click.\[^66]
### Better Performance
* Built completely from scratch with [Svelte](https://svelte.dev/) instead of forking React-based Netlify/Decap CMS. The app starts fast and stays fast with [no virtual DOM overhead](https://svelte.dev/blog/virtual-dom-is-pure-overhead). Note that Svelte is a compiler and Sveltia CMS is [framework-agnostic](/en/docs/frameworks); it’s served as a vanilla JavaScript bundle.
* Small footprint: The bundle size is less than 500 KB when minified and [brotlied](https://en.wikipedia.org/wiki/Brotli), which is much lighter than Netlify CMS (1.5 MB), Decap CMS (1.7 MB) and Static CMS (2.6 MB).\[^57] This significant reduction in size is thanks to the combination of [Svelte 5](https://svelte.dev/blog/svelte-5-is-alive) and [Vite](https://vite.dev/). Sveltia CMS also dynamically loads locale files and certain dependencies only when needed, further reducing the initial load time.
* Uses the GraphQL API for GitHub and GitLab to quickly fetch content at once, so that entries and assets can be listed and searched instantly\[^32]\[^65] (the useless `search` configuration option is therefore ignored). It also avoids the slowness and potential API rate limit violations caused by hundreds of requests with Relation fields.\[^14]
* Saving entries and assets to GitHub is also much faster thanks to the [GraphQL mutation](https://github.blog/changelog/2021-09-13-a-simpler-api-for-authoring-commits/).
* The Gitea/Forgejo backend is also faster because it utilizes an efficient API method introduced in Gitea 1.24 and Forgejo 12.0.
* Our [local development workflow](/en/docs/workflows/local) utilizes the modern [File System Access API](https://developer.chrome.com/docs/capabilities/web-apis/file-system-access) to read and write files natively through the web browser, rather than using a slow, ad hoc REST API through a proxy server.
* Sorting, filtering and grouping of entries is done instantly without reloading the entire content.
* Uses caching, lazy loading and infinite scrolling techniques. A list of repository files is stored locally for faster startup and bandwidth savings.
* Thumbnails of assets, including videos and PDF files, are generated and cached for faster rendering of the Asset Library and other parts of the CMS.\[^39]\[^38]
* No typing lag on input fields, especially within nested lists and objects.\[^77]
* The entry preview doesn’t use an ``
: '',
});
```
In this example, the “YouTube” component allows users to embed YouTube videos using a Hugo shortcode. The `pattern` regular expression captures the video ID, width, and height from the shortcode. The `fromBlock` function processes the captured values, casting width and height to numbers. The `toBlock` function generates the shortcode string, while the `toPreview` function creates an iframe preview of the embedded video.
The `pattern` uses the `m` (multiline) flag to make the component block-level, though it’s not multiline in this case.
### Inline Link (Dialog Mode)
The `dialog` mode is ideal for inline elements that would be too disruptive to display as a block within the editor. This example creates a custom link shortcode that appears as a compact inline placeholder and opens a dialog when clicked:
```js
CMS.registerEditorComponent({
id: 'custom-link',
label: 'Custom Link',
icon: 'link',
mode: 'dialog',
summary: '{{text}} — {{url}}',
fields: [
{ name: 'text', label: 'Link Text' },
{ name: 'url', label: 'URL' },
],
pattern: /\[link text="(?.*?)" url="(?.*?)"\]/,
toBlock: ({ text, url }) => `[link text="${text}" url="${url}"]`,
toPreview: ({ text, url }) => `${text}`,
});
```
In this example, the “Custom Link” component renders as a small inline chip in the editor showing the link text and URL. Clicking it opens a dialog where the user can fill in or update the fields. The `summary` template controls what text is shown in the placeholder — here it shows the link text and URL separated by an em dash. When neither the summary nor any string field value is available (e.g. for a freshly inserted component), the component `label` is shown as a fallback.
### Using React for Preview
You can use React components to create rich, interactive previews for your custom editor components. The `toPreview` function can return a React element instead of a string, allowing you to leverage React's capabilities for rendering complex previews.
You can use either JSX or non-JSX syntax to define the component — see the [Writing React Components](/en/docs/api#writing-react-components) section for more details.
::: code-group
```js [Without JSX]
CMS.registerEditorComponent({
id: 'callout',
label: 'Callout',
fields: [
{
name: 'type',
label: 'Type',
widget: 'select',
options: ['info', 'warning', 'tip'],
default: 'info',
},
{ name: 'content', label: 'Content', widget: 'text' },
],
pattern: /\[(?info|warning|tip)\]\s*(?.*)/gs,
fromBlock: (match) => ({ type: match.groups?.type, content: match.groups?.content }),
toBlock: ({ type = 'info', content = '' }) => `[${type}] ${content}`,
toPreview: ({ type = 'info', content = '' }) => {
const colors = { info: '#0ea5e9', warning: '#f59e0b', tip: '#22c55e' };
const borderColor = colors[type] ?? colors.info;
return h(
'div',
{
style: {
padding: '0.75em 1em',
borderLeft: `4px solid ${borderColor}`,
background: '#f8fafc',
borderRadius: '0 4px 4px 0',
},
},
h('strong', { style: { textTransform: 'capitalize' } }, type),
h('p', { style: { margin: '0.25em 0 0' } }, content),
);
},
});
```
```jsx [With JSX]
CMS.registerEditorComponent({
id: 'callout',
label: 'Callout',
fields: [
{
name: 'type',
label: 'Type',
widget: 'select',
options: ['info', 'warning', 'tip'],
default: 'info',
},
{ name: 'content', label: 'Content', widget: 'text' },
],
pattern: /\[(?info|warning|tip)\]\s*(?.*)/gs,
fromBlock: (match) => ({ type: match.groups?.type, content: match.groups?.content }),
toBlock: ({ type = 'info', content = '' }) => `[${type}] ${content}`,
toPreview: ({ type = 'info', content = '' }) => {
const colors = { info: '#0ea5e9', warning: '#f59e0b', tip: '#22c55e' };
const borderColor = colors[type] ?? colors.info;
return (
{type}
{content}
);
},
});
```
:::
## Showcase
Real-world examples can be found in our [showcase](/en/showcase?feature=editor-components).
---
---
url: /en/docs/api/field-types.md
description: >-
Create custom field types in Sveltia CMS for reusable, complex input controls
and previews.
---
# Custom Field Types
A custom field type allows you to create reusable, complex input controls and previews available in the CMS interface. Registered field types can be used in your collection just like [built-in field types](/en/docs/fields#built-in-field-types).
::: warning Compatibility Note
Because there is little [Netlify/Decap CMS documentation](https://decapcms.org/docs/custom-widgets/#registerwidget) on this topic, Sveltia CMS may not be fully compatible with existing preview templates. Our implementation does not include any undocumented component props, and the `schema` parameter is unimplemented. Additionally, we haven’t verified that all of the examples below work with Sveltia CMS. If you encounter any issues, please [report them to us](https://github.com/sveltia/sveltia-cms/issues).
:::
::: tip Naming Convention
In Sveltia CMS, what was previously referred to as a **widget** in Netlify/Decap CMS is now called a **field type**. This change was made to better align with common content management terminology, as originally [proposed](https://github.com/decaporg/decap-cms/issues/3719) by Netlify CMS maintainers themselves.
The `registerWidget` method from Netlify/Decap CMS has been renamed to `registerFieldType` in Sveltia CMS to reflect this terminology change, but the old name remains available as an alias for backward compatibility. The signature and behavior are identical.
:::
## Overview
To register a custom field type, use the `registerFieldType` method on the [`CMS` object](/en/docs/api#accessing-the-cms-object):
```js
CMS.registerFieldType(name, control, [preview], [schema]);
```
For backward compatibility with Netlify/Decap CMS, the `registerWidget` method is available as an alias with the same signature.
### Parameters
* `name` (string, required): The name of the custom field type. This is the name you will use in your collection configuration to reference this type. It should be unique and not conflict with [built-in field types](/en/docs/fields#built-in-field-types) names.
* `control` (React component, required): A React **class component** that defines the control (input) part of the field.
* `preview` (React component, optional): A React **class component** that defines how the field’s value is previewed in the CMS preview pane. If not provided, no preview will be shown.
* `schema` (object, optional): A [JSON schema](https://json-schema.org/) object that defines the configuration options for the field type.
You can use either JSX or non-JSX syntax to define the component — see the [Writing React Components](/en/docs/api#writing-react-components) section for more details.
## Control Component Props
The control component receives the following props:
* `value` (any): The current field value. Your component should display this value and call `onChange` when the user modifies it.
* `field` ([Immutable Map](https://immutable-js.com/docs/v5/Map/)): An Immutable Map of the current field configuration from the CMS config. Contains all field properties including `name`, `label`, `widget`, and any custom properties you define in your schema. Access properties using methods like `field.get('name')` or `field.getIn(['custom', 'property'])`.
* `forID` (string): The HTML `id` attribute that should be used for the main input element. This enables proper label association and accessibility.
* `classNameWrapper` (string): A CSS class name that can be applied to your input element for consistent styling with built-in field controls.
* `onChange` (function): A callback function that must be called with the new value whenever the user modifies the field. This updates the entry draft in the CMS.
### Custom Validation
Control components may optionally implement an `isValid` instance method for custom validation. The method should return:
* `true` when the value is valid.
* `false` or `{ error: { message: "text" } }` when the value is invalid.
* A Promise that resolves to any of the above formats for async validation.
## Preview Component Props
The preview component receives the following props:
* `value` (any): The current field value to display in the preview.
* `field` ([Immutable Map](https://immutable-js.com/docs/v5/Map/)): An Immutable Map of the current field configuration. Use `field.get('name')` to access properties.
* `metadata` (Immutable Map): Any available metadata for the current field. For relation fields, contains referenced entry data. Use Immutable Map methods to access nested data.
## Field Schema
The `schema` parameter is a [JSON schema](https://json-schema.org/) object that defines the configuration options for your field type. When users include your custom field type in their collection config, they can set these configuration options. For example:
```js
var schema = {
properties: {
separator: { type: 'string' },
maxItems: { type: 'integer' },
},
};
```
Users would then configure the field like:
```yaml
fields:
- name: tags
label: Tags
widget: array # custom field type name
separator: ', ' # custom configuration option
maxItems: 10 # custom configuration option
```
## Examples
::: tip With or without JSX
The following JSX examples assume you have a build step to transpile JSX to JavaScript. If you are not using JSX, see the non-JSX examples below. See [Writing React Components](/en/docs/api#writing-react-components) for more details.
:::
### Simple Text Array
A custom field type that converts a comma-separated string to an array and back:
::: code-group
```js [Without JSX]
var ArrayControl = createClass({
handleChange: function (e) {
const separator = this.props.field.get('separator', ', ');
this.props.onChange(e.target.value.split(separator).map((item) => item.trim()));
},
render: function () {
const separator = this.props.field.get('separator', ', ');
const value = this.props.value;
return h('input', {
id: this.props.forID,
className: this.props.classNameWrapper,
type: 'text',
value: value ? value.join(separator) : '',
onChange: this.handleChange,
});
},
});
var ArrayPreview = createClass({
render: function () {
const value = this.props.value;
return h(
'ul',
{ style: { margin: '0', paddingLeft: '20px' } },
Array.isArray(value) &&
value.map(function (item, index) {
return h('li', { key: index }, item);
}),
);
},
});
var schema = {
properties: {
separator: { type: 'string' },
},
};
CMS.registerFieldType('array', ArrayControl, ArrayPreview, schema);
```
```jsx [With JSX]
class ArrayControl extends React.Component {
handleChange = (e) => {
const separator = this.props.field.get('separator', ', ');
this.props.onChange(e.target.value.split(separator).map((item) => item.trim()));
};
render() {
const separator = this.props.field.get('separator', ', ');
const value = this.props.value;
return (
);
}
}
class ArrayPreview extends React.Component {
render() {
const value = this.props.value;
return (