Sveltia CMS: Netlify/Decap CMS alternative

Sveltia CMS is a Git-based lightweight headless CMS under active development as a modern, powerful, quick replacement for Netlify CMS and Decap CMS. In some simple cases, migration is as easy as a single line of code change, although we are still working on improving compatibility.

The free, open source alternative/successor to Netlify/Decap CMS is now in public beta, turbocharged with great UX, performance, i18n support and so many more enhancements.

Table of contents

• Motivation
  • Our advantage
  • Our goals
• Development status
• Differentiators
  • Better UX
  • Better performance
  • Better productivity
  • Better accessibility
  • Better security
  • Better installation
  • Better configuration
  • Better backend support
  • Better i18n support
  • Better collections
  • Better content editing
  • Better content preview
  • Better data output
  • Better widgets
    • New widgets
  • Better asset management
  • Better customization
  • Better localization
• Compatibility
  • Features not to be implemented
  • Current limitations
  • Compatibility with Static CMS
  • Framework support
  • Backend support
  • Browser support
  • Other notes
• Getting started
  • Installation & setup
  • Migration
    • Migrating from Git Gateway backend
  • Installing with npm
  • Updates
• Tips & tricks
  • Moving your site from Netlify to another hosting service
  • Providing a JSON configuration file
  • Providing multiple configuration files
  • Working around an authentication error
  • Working with a local Git repository
  • Enabling local development in Brave
  • Using a custom icon for a collection
  • Adding dividers to the collection list
  • Using a custom media folder for a collection
  • Specifying default sort field and direction
  • Including Hugo’s special index file in a folder collection
  • Using keyboard shortcuts
  • Using DeepL to translate entry fields
  • Localizing entry slugs
  • Disabling non-default locale content
  • Using a random ID for an entry slug
  • Configuring multiple media libraries
  • Optimizing images for upload
  • Disabling stock assets
  • Editing data files with a top-level list
  • Changing the input type of a DateTime field
  • Rendering soft line breaks as hard line breaks in Markdown
  • Controlling data output
  • Disabling automatic deployments
  • Setting up Content Security Policy
  • Showing the CMS version
• Support & feedback
• Contributions
• Roadmap
  • v1.0
  • v2.0
  • Future
• Trivia
• Related links
  • As seen on
• Disclaimer

Motivation

Sveltia CMS was born in November 2022, when the progress of Netlify CMS was stalled for more than six months. @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 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 architecture 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 concept, we wanted to revive it, modernize it, and take it to the next level.

Our advantage

Due to its unfortunate abandonment in early 2022, Netlify CMS spawned 3 successors:

• Static CMS: a community fork, initial commit made in September 2022 — discontinued in September 2024 after making meaningful improvements
• Sveltia CMS: not a fork but a complete rewrite or “total reboot”, started in November 2022, first appeared on GitHub in March 2023
• Decap CMS: a rebranded version, announced in February 2023 as the official successor with a Netlify agency partner taking ownership — mostly stagnant, with only occasional releases

Sveltia CMS is the only project that doesn’t inherit the complexity, technical debt, and numerous bugs of Netlify CMS, which was launched in 2015. Our product is better by design: We rebuilt the app from the ground up using a modern framework without looking at the predecessor’s code, while closely monitoring and analyzing their issue tracker. This lets us make hundreds of improvements without getting stuck in the old system.

While Sveltia CMS was created to replace legacy Netlify CMS instances, it can also be used as an alternative to other Netlify CMS successors. With its solid i18n support, we’re hoping our product will eventually be an appearing option for anyone looking for a free headless CMS.

Our goals

• Making Sveltia CMS a viable, definitive 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
• Extending its capabilities as digital asset management (DAM) software
• Showcasing the power of Svelte and UX engineering

Development status

Sveltia CMS is currently in beta and version 1.0 (GA) is expected to ship in Q4 2025. Check our release notes and follow us on Bluesky for updates. See also our roadmap.

While we fix reported bugs as quickly as possible, usually within 24 hours, our overall progress may be slower than you think. The thing is, it’s not just a personal project of @kyoshino, but also a complicated system involving various kinds of activities that require considerable effort:

• Ensuring substantial compatibility with Netlify/Decap CMS
• Providing partial compatibility with Static CMS
• Tackling as many Netlify/Decap CMS issues as possible
  • So far, 225+ issues, or 450+ if including duplicates, have been effectively solved in Sveltia CMS
  • Target:
    • 200 issues, or 400 if including duplicates, by GA — We did it! 🎉
    • 400 issues, or 800 if including duplicates, in the future 💪
    • or every single issue that’s relevant, fixable, and worth dealing with 🔥
  • Issues include everything from feature requests to bug reports and issues closed as stale or without an effective solution, as well as discussions and stalled pull requests
  • Many of the bugs, including the annoying crashes, have already been solved
    • The remaining bugs are mostly related to unimplemented features
  • Many of their top-voted features are on our table or already implemented in Sveltia CMS
• Solving our own issues
• Implementing our own enhancement ideas for every part of the product
• Responding to requests from the maintainer’s clients
• Making the code clean and maintainable

Differentiators

Netlify/Decap CMS users will definitely be pleased and surprised by the numerous improvements we have made, from the small to the large. Here’s what makes Sveltia CMS different. Look how serious we are!

Note: This lengthy section compares Sveltia CMS with both Netlify CMS and Decap CMS. Some of the listed bugs may have been fixed in the current version of Decap CMS.

Better UX

• Created and actively maintained by an experienced UX engineer who loves code, design, marketing and problem solving. 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.
• Frequent releases deliver new features and enhancements to users faster. Most of our minor 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,¹ inspired in part by the Netlify CMS v3 prototype.²³⁴⁵⁶
• Provides immersive dark mode.⁷ 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.⁸⁹
  • For a smoother experience, we even go beyond responsive design with optimized navigation, view transitions, larger buttons, and other tweaks. However, there are still rough edges, and we are working 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.
• Made with Svelte, 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.¹⁰¹¹ Best of all, Svelte offers great performance.
• Other crashes in Netlify/Decap CMS are also irrelevant to us, making Sveltia CMS much more stable.¹²¹³¹⁴
• We build our own UI component library, including custom dialogs, to ensure optimal usability without compromising accessibility.^{15161718192021}
• Users can personalize the application with various settings, including appearance and language. Developer Mode can also be enabled.
• Never miss out on the latest features and bug fixes by being notified when an update to the CMS is available.²² Then update to the latest version with a single click.²³

Better performance

• Built completely from scratch with Svelte instead of forking React-based Netlify/Decap CMS. The app starts fast and stays fast with no virtual DOM overhead. Note that Svelte is a compiler and Sveltia CMS is framework-agnostic; it’s served as a vanilla JavaScript bundle.
• Small footprint: The bundle size is less than 500 KB when minified and brotlied, which is much lighter than Netlify CMS (1.5 MB), Decap CMS (1.5 MB) and Static CMS (2.6 MB).²⁴²⁵ This number is remarkable because even though some Netlify/Decap CMS features are omitted or unimplemented in Sveltia CMS, we have added a lot of new features. That’s the power of Svelte 5 + Vite.
• 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²⁶²⁷ (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.²⁸
• Saving entries and assets to GitHub is also much faster thanks to the GraphQL mutation.
• The Gitea backend is also faster because it utilizes an efficient API method introduced in Gitea 1.24.
• Our local repository workflow utilizes the modern File System Access API 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.²⁹³⁰
• No typing lag on input fields, especially within nested lists and objects.³¹
• The entry preview doesn’t use an <iframe> because it’s a performance overhead.³²

Better productivity

• Developers can work with a local Git repository without any additional configuration or proxy server, resulting in a streamlined workflow and improved performance.³³
  • It also avoids a number of issues, including potential dependency corruption,³⁴ a 30 MB file size limit,³⁵ an unknown error with publish_mode,³⁶ and an unused logo_url.³⁷
  • When you delete an entry or an asset file, the empty folder that contains it is also deleted, so you don’t have to delete it manually.
• Provides a smoother user experience in the Content Editor:
  • A local backup of an entry draft is automatically created without interruption by a confirmation dialog, which annoys users and can cause a page navigation problem if dismissed.³⁸ The backup can then be reliably restored without unexpected overwriting.³⁹
  • Click once (the Save button) instead of twice (Publish > Publish now) to save an entry. Or just hit the Ctrl+S (Windows/Linux) or Command+S (macOS) key to save your time.
  • The editor closes automatically when an entry is saved. This behaviour can be changed in the application settings.
• Uploading files can be done with drag and drop.⁴⁰
• Users can upload multiple files at once to the Asset Library.⁴¹
• Users can delete multiple entries and assets at once.
• Instant full-text search with results sorted by relevance helps you find entries faster.
• Some keyboard shortcuts are available for faster editing.

Better accessibility

• Improved keyboard handling lets you efficiently navigate through UI elements using the Tab, Space, Enter and arrow keys.⁴²⁴³
• Comprehensive WAI-ARIA support enables users who rely on screen readers such as NVDA and VoiceOver.⁴⁴ An announcement is read out when you navigate to another page.
• The rich text editor is built with Lexical, which is said to follow accessibility best practices. The Dragon NaturallySpeaking support is enabled.
• Ensures sufficient contrast between the foreground text and background colours.
• Enabled and disabled buttons can be clearly distinguished.⁴⁵
• Links are underlined by default to make them easier to recognize. This behaviour can be changed in the Accessibility Settings if you prefer.
• Honours your operating system’s reduced motion and reduced transparency settings. Support for high contrast mode will be added later.
• Browser console logs for developers are readable in either light or dark mode.⁴⁶
• We’ll continue to test and improve the application to meet WCAG 2.2.

Better security

• Avoids vulnerabilities in dependencies through constant updates, Dependabot alerts, pnpm audit, and frequent releases, unlike Netlify/Decap CMS where a number of high severity vulnerabilities remain unpatched for a long time.⁴⁷
• Our local repository workflow doesn’t require a proxy server, reducing an attack surface.³⁴
• We have enabled npm package provenance.
• We have documented how to set up a Content Security Policy for the CMS to prevent any unexpected errors or otherwise insecure configuration.⁴⁸
• The unsafe-eval and unsafe-inline keywords are not needed in the script-src CSP directive.⁴⁹
• The same-origin referrer policy is automatically set with a <meta> tag.
• Sveltia CMS has a secure context requirement that forces the site content, including the CMS configuration file, to be served over HTTPS.
• GitHub commits are automatically GPG-signed and marked as verified.⁵⁰

Better installation

• Sveltia CMS is built with Svelte, and we only publish compiled vanilla JavaScript bundles, so there are no React compatibility issues that might prevent developers from upgrading a project for many months.⁵¹ We haven’t actually integrated React for custom widgets and other features yet, but anyway, no dependencies will be installed when you install the app with npm.
• Sveltia CMS also won’t cause peer dependency conflicts due to legacy third-party React UI libraries.⁵² We build the app using our own Svelte UI component library to reduce reliance on third parties.
• Some servers and frameworks are known to remove the trailing slash from the CMS URL (/admin) depending on the configuration. In such cases, the config file is loaded from a root-relative URL (/admin/config.yml) instead of a regular relative URL (./config.yml = /config.yml) that results in a 404 Not Found error.⁵³
• The robots meta tag is automatically added to HTML to prevent the admin page from being indexed by search engines.⁵⁴ Developers are still encouraged to manually add <meta name="robots" content="noindex"> to index.html, as not all crawlers support dynamically added tags. However, our solution should at least work with Google in case you forget to do so.

Better configuration

• Sveltia CMS supports a JSON configuration file that can be generated for bulk or complex collections.⁵⁵
• Also supports multiple configuration files to allow developers to modularize the configuration.⁵⁶
• Improved TypeScript support: We try to keep our type definitions for CMS.init() and other methods complete, accurate, up-to-date and annotated.^5758596061 This makes it easier to provide a site config object when manually initializing the CMS.

Better backend support

• Uses the GraphQL API where possible for better performance, as mentioned above. You don’t need to set the use_graphql option to enable it for GitHub and GitLab.
• The Git branch name is automatically set to the repository’s default branch (main, master or whatever) if not specified in the configuration file, preventing data loading errors due to a hardcoded fallback to master.⁶²⁶³ If a branch name is specified, it works as expected.⁶⁴
• It’s possible to disable automatic deployments by default or on demand to save costs and resources associated with CI/CD and to publish multiple changes at once.⁶⁵
• The GitLab backend support comes with background service status checking, just like GitHub.
• Service status checks are performed frequently and an incident notification is displayed prominently.
• Users can quickly open the source file of an entry or asset in your repository using View on GitHub (or GitLab or Gitea) under the 3-dot menu when Developer Mode is enabled.
• We provide our own OAuth client for GitHub and GitLab.
• The GitLab backend supports Git LFS (documentation).⁶⁶
• Users won’t get a 404 Not Found error when you sign in to the GitLab backend.⁶⁷
• Our Gitea backend is high-performing because it retrieves multiple entries at once. It also supports Git LFS (documentation). Additionally, the backend won’t cause 400 Bad Request errors due to the presence of DRAFT_MEDIA_FILES in file paths.⁶⁸
• The OAuth access token is automatically renewed when using the GitLab or Gitea backend with PKCE authorization.⁶⁹ Token renewal for other backend configurations will be implemented later.
• Features the all-new local repository workflow that boosts DX. See the productivity section above.
• Developers can select the local and remote backends while working on a local server.
• The Test backend saves entries and assets in the browser’s origin private file system (OPFS) so that changes are not discarded when the browser tab is closed or reloaded.⁷⁰ The persistent storage support works with all modern browsers except Safari.

Better i18n support

Sveltia CMS has been built with a multilingual architecture from the very beginning. You can expect unparalleled internationalization (i18n) support, as it’s required by clients of maintainer @kyoshino, who himself was a long-time Japanese localizer for Mozilla and currently lives in the most diverse city in the world where 150+ languages are spoken.

• Configuration
  • The i18n limitations in Netlify/Decap CMS do not apply to Sveltia CMS:
    • File collections support multiple files/folders i18n structures.⁷¹ To enable it, simply use the {{locale}} template tag in the file path option, e.g. content/pages/about.{{locale}}.json or content/pages/{{locale}}/about.json. For backward compatibility, the global structure option only applies to folder collections, and the default i18n structure for file collections remains single file.
    • The List and Object widgets support the i18n: duplicate field configuration so that changes made with these widgets are duplicated between locales.⁷²⁷³ The i18n configuration can normally be used for the subfields.
  • The new multiple_folders_i18n_root i18n structure allows to have locale folders below the project root: <locale>/<folder>/<slug>.<extension>.⁷⁴
  • The new omit_default_locale_from_filename i18n option allows to exclude the default locale from filenames. This option applies to entry collections with the multiple_files i18n structure enabled, as well as to file collection items with the file path ending with .{{locale}}.<extension>, aiming to support Zola’s multilingual sites. (Discussion)
  • The required field option accepts an array of locale codes in addition to a boolean, making the field required for a subset of locales when i18n support is enabled. For example, if only English is required, you could write required: [en]. An empty array is equivalent to required: false.
  • Entry-relative media folders can be used in conjunction with the multiple_folders i18n structure.⁷⁵
  • The {{locale}} template tag can be used in the preview_path collection option to provide site preview links for each language.⁷⁶
  • It’s possible to use a random UUID for an entry slug, which is a good option for locales that write in non-Latin characters.
  • It’s possible to localize entry slugs while linking the localized files,⁷⁷ thanks to the support for Hugo’s translationKey.⁷⁸
  • When the clean_accents option is enabled for entry slugs, certain characters, such as German umlauts, will be transliterated.⁷⁹
  • It’s possible to embed the locale code in an entry by using widget: hidden along with default: '{{locale}}'.⁸⁰
  • The value_field Relation field option can contain a locale prefix like {{locale}}/{{slug}}, which will be replaced with the current locale. It’s intended to support i18n in Astro. (Discussion)
• User interface
  • Eliminates UI confusion: The Preview Pane can be displayed without toggling i18n in the Content Editor. Both panes are scrollable. There is no condition where both panes are edited in the same language at the same time.
  • Users can easily switch between locales while editing by clicking a button instead of a dropdown list when there are less than 5 locales.
  • Language labels appear in human-readable display names instead of ISO 639 language codes because it’s not easy for everyone to recognize DE as German, NL as Dutch, ZH as Chinese, and so on.
• Content editing
  • Integrates DeepL to allow translation of text fields from another locale with one click. More translation services will be added in the future.
  • The Content Editor supports RTL scripts such as Arabic, Hebrew and Persian.⁸¹
  • It’s possible to disable non-default locale content.⁸²
  • Boolean, DateTime, List and Number fields in the entry preview are displayed in a localized format.
  • Boolean fields are updated in real time between locales like other widgets to avoid confusion.⁸³
  • Relation fields with i18n enabled won’t trigger a change in the content draft status when you start editing an existing entry.⁸⁴
  • Solves problems with Chinese, Japanese and Korean (CJK) IME text input in the rich text editor for the Markdown widget.⁸⁵
  • Raises a validation error instead of failing silently if the single_file structure is used and a required field is not filled in any of the locales.⁸⁶
  • Fields in non-default locales are validated as expected.⁸⁷
  • No internal error is thrown when changing the locale.⁸⁸
  • Duplicating an entry duplicates all locale content, not just the default locale.⁸⁹
  • Copying Markdown from another locale using the menu works as expected.⁹⁰

Better collections

• Configuration
  • Provides some new options, including:
    • icon: Choose a custom icon for each collection.⁹¹
    • thumbnail: Specify the field name for a thumbnail displayed on the entry list, like thumbnail: featuredImage.⁹²
      • A nested field can be specified using dot notation, e.g. heroImage.src.
      • A wildcard in the field name is also supported, e.g. images.*.src.
      • Multiple field names can be specified as an array for fallback purpose, e.g. [thumbnail, cover].
      • Occasionally, you may not have suitable images for thumbnails. For example, your images may have subtle differences or varied aspect ratios. In that case, you can disable the thumbnail with thumbnail: [].
      • If this option is omitted, any non-nested, non-empty Image or File field will be used.⁹³
    • limit: Specify the maximum number of entries that can be created in a folder collection.⁹⁴
    • divider: Add dividers to the collection list.
  • Enhancements to the entry filter option for folder collections:
    • Boolean value works as expected.⁹⁵
    • value accepts null to match an undefined field value.
    • value accepts an array to provide multiple possible values.⁹⁶
    • pattern can be used instead of value to provide a regular expression, just like the view_filters collection option.⁹⁷
  • Enhancements to summary string transformations:
    • Transformations can be used in more places than just the collection summary:
      • The slug and preview_path collection options⁹⁸
      • The summary field option for the List and Object widgets
    • The default transformation accepts a template tag like {{fields.slug | default('{{fields.title}}')}}, making it possible to fall back to a different field value. (Discussion)
    • The date transformation supports the time zone argument. The only available value is utc, which converts a date to UTC. This is useful if the specified DateTime field is local, but you want to force UTC in the entry slug, e.g. {{date | date('YYYYMMDD-HHmm', 'utc')}}. (Discussion)
    • The date transformation returns an empty string if an invalid date is given.⁹⁹
    • Multiple transformations can be chained like {{title | upper | truncate(20)}}.
  • The collection label defaults to the name value according to the Decap CMS document, while Netlify/Decap CMS actually throws a configuration error if the label option is omitted.
  • Nested fields (dot notation) can be used in the path option for a folder collection, e.g. {{fields.state.name}}/{{slug}}.¹⁰⁰
  • Markdown is supported in the description collection option.¹⁰¹ Bold, italic, strikethrough, code and links are allowed.
  • The collection folder can be an empty string (or . or /) if you want to store entries in the root folder. This supports a typical VitePress setup.
  • Each file in a file collection has the format and frontmatter_delimiter options, which can be used to specify the file format, making it possible to have yaml-frontmatter, toml-frontmatter and json-frontmatter side by side.¹⁰²
• Entry slugs
  • It’s possible to use a random UUID for an entry slug.
  • Slug generation is fail-safe: If a slug cannot be determined from entry content, part of a random UUID is used instead of throwing an error or filling in with arbitrary string field values.¹⁰³
  • Users can edit entry slugs via the 3-dot menu in the Content Editor.¹⁰⁴
  • If a collection only has the Markdown body field, an entry slug will be generated from a header in the body, if exists. This supports a typical VitePress setup.
  • Entry slug template tags support transformations just like summary string template tags.⁹⁸
  • Single quotes (apostrophes) in a slug will be replaced with sanitize_replacement (default: hyphen) rather than being removed.¹⁰⁵
  • The maximum number of characters for an entry slug can be set with the new slug_length collection option to avoid deployment errors with Netlify or other platforms.¹⁰⁶
  • Setting the collection path doesn’t affect the entry slugs stored with the Relation widget.¹⁰⁷
  • Entry slugs are localizable.⁷⁷
• Entry listing
  • Default sort field and direction can be specified.¹⁰⁸
  • Sorting entries by a DateTime field works as expected.¹⁰⁹
  • Entry grouping and sorting can work together. For example, it’s possible to group by year and then sort by year if configured properly.
  • Index file inclusion allows users to edit Hugo’s special _index.md file, including localized ones like _index.en.md, within a folder collection.¹¹⁰ If the index_file option is not defined, these files will be hidden in a folder collection unless the path option is configured to end with _index and the extension is md.¹¹¹
  • A console error won’t be thrown when a collection doesn’t have the title field.¹¹² In that case, an entry summary will be generated from a header in the Markdown body field, if exists, or from the entry slug, so the summary will never be an empty.¹¹³ This supports a typical VitePress and Docusaurus setup.¹¹⁴
  • If there was an error while parsing an entry file, such as duplicate front matter keys, it won’t show up as a blank entry, and a clear error message will be displayed in the browser console.¹¹⁵
  • A single file can be used for more than one item in a file collection.¹¹⁶
• User interface
  • The collection list displays the number of items in each collection.
  • Users can select multiple entries and delete them at once.
  • In an entry summary, basic Markdown syntax used in the title, including bold, italic and code, are parsed as Markdown. HTML character references (entities) are also parsed properly.¹¹⁷
  • If you update an entry field that appears in the collection’s summary, such as title, the entry list displays an updated summary after you save the entry.¹¹⁸
  • Thumbnails of entries are displayed not only in the grid view but also in the list view, making it easier to navigate.
  • If entries don’t have an Image field for thumbnails, the entry list will only be displayed in the list view, because it doesn’t make sense to show the grid view.¹¹⁹
  • Assets stored in a collection media folder can be displayed next to the entries.
  • The New Entry button won’t appear when a developer accidentally sets the create: true option on a file collection because it’s useless.¹²⁰
  • The Delete Entry button won’t appear when a developer accidentally sets the delete: true option on a file collection because the preconfigured files should not be deleted.

Better content editing

• Required fields, not optional fields, are marked for efficient data entry.
• Users can revert changes to all fields or a specific field.
• If you revert changes and there are no unsaved changes, the Save button is disabled as expected.¹²¹
• The new readonly field option makes the field read-only. This is useful when a default value is provided and the field should not be editable by users.¹²²
• Fields with validation errors are automatically expanded if they are part of nested, collapsed objects.¹²³
• A full regular expression, including flags, can be used for the widget pattern option.¹²⁴ For example, if you want to allow 280 characters or less in a multiline text field, you could write /^.{0,280}$/s (but you can now use the maxlength option instead.)
• A long validation error message is displayed in full, without being hidden behind the field label.¹²⁵
• Any links to other entries will work as expected, with the Content Editor being updated for the other.¹²⁶
• In the Boolean and Select widgets, you don’t have to update a value twice to re-enable the Save button after saving an entry.¹²⁷
• data can be used as a field name without causing an error when saving the entry.¹²⁸

Better content preview

• The Preview Pane comes with a minimal default style.¹²⁹ It looks nice without a custom preview style or template.
• For better performance, the Preview Pane doesn’t use an <iframe>.³²
• The Preview Pane displays all fields, including each label, making it easier to see which fields are populated.
• Clicking a field in the Preview Pane focuses the corresponding field in the Edit Pane.¹³⁰ It automatically expands when collapsed.
  • This is equivalent to the (misleading) visual editing feature introduced in Decap CMS 3.6.0, but our click-to-highlight feature is enabled by default; you don’t need to opt in with the editor.visualEditing collection option.
  • Our implementation doesn’t cause a module import error¹³¹ or broken image previews.¹³²
• The Preview Pane doesn’t cause a scrolling issue.¹³³
• The Preview Pane doesn’t crash with a Minified React error.¹³⁴
• Provides better scroll synchronization between the panes when editing or previewing an entry.¹³⁵
• Developers can hide the preview of a specific field using a new field option: preview: false.¹³⁶
• See below for widget-specific enhancements, including support for variable types¹³⁷ and YouTube videos.

Better data output

• Keys in generated JSON/TOML/YAML content are always sorted by the order of configured fields, making Git commits clean and consistent.¹³⁸
• Netlify/Decap CMS often, but not always, omits optional and empty fields from the output.¹³⁹ Sveltia CMS aims at complete and consistent data output — it always saves proper values, such as an empty string, an empty array or null, instead of nothing (undefined), regardless of the required field option.^140141142143
  • In other words, in Sveltia CMS, required: false makes data input optional, but doesn’t make data output optional.
  • To omit empty optional fields from data output, use omit_empty_optional_fields: true in the data output options. This is useful if you have data type validations that expect undefined.¹⁴⁴
• JSON/TOML/YAML data is saved with a new line at the end of the file to prevent unnecessary changes being made to the file.¹⁴⁵
• Leading/trailing whitespaces in text-type field values are automatically removed when you save an entry.¹⁴⁶
• YAML string folding (maximum line width) is disabled, mainly for framework compatibility.¹⁴⁷
• A standard time is formatted as HH:mm:ss instead of HH:mm for framework compatibility.
• DateTime field values in ISO 8601 format are stored in native date/time format instead of quoted strings when the data output is TOML.¹⁴⁸
• Provides JSON/YAML format options as part of the data output options, including indentation and quotes.¹⁴⁹¹⁵⁰
  • The yaml_quote collection option added in v0.5.10 is now deprecated and will be removed in v1.0.0. yaml_quote: true is equivalent to quote: double in the new YAML format options.

Better widgets

Sveltia CMS supports all built-in widgets available in Netlify/Decap CMS except Map. We have made significant improvements to these widgets while adding some new ones. The remaining Map widget will be added soon, followed by support for custom widgets.

Note: The Date widget has been deprecated in Netlify CMS and removed from both Decap CMS and Sveltia CMS in favour of the DateTime widget, as noted in the Compatibility section.

• Boolean
  • A required Boolean field with no default value is saved as false by default, without raising a confusing validation error.¹⁴⁰
  • An optional Boolean field with no default value is also saved as false by default, rather than nothing.¹⁴¹
• Code
  • More than 300 languages are available, thanks to Prism’s extensive language support.
  • The language switcher always appears in the user interface, so it’s easy to spot and change the selected language.
  • Dynamic loading of language modes work as expected.¹⁵¹
  • A Code field under a List field work as expected, saving both code and language.¹⁵²
• Color
  • The widget doesn’t cause scrolling issues.¹⁵³
  • The preview shows both the RGB(A) hex value and the rgb() function notation.
• DateTime
  • A DateTime field doesn’t trigger a change in the content draft status when you’ve just started editing a new entry.¹⁵⁴
  • User’s local time is not saved in UTC unless the picker_utc option is true.¹⁵⁵
• Hidden
  • The default value supports the following template tags:
    • {{locale}}: The current locale code.⁸⁰
    • {{datetime}}: The current date/time in ISO 8601 format.¹⁵⁶
    • {{uuid}}, {{uuid_short}} and {{uuid_shorter}}: A random UUID or its shorter version, just like the slug template tags.¹⁵⁷
  • The default value is saved when you create a file collection item, not just a folder collection item.¹⁵⁸
• List
  • It’s possible to edit data files with a top-level list using the new root option.¹⁵⁹
  • The min and max options can be used separately. You don’t need to specify both to use either option.¹⁶⁰
  • The Add Item button appears at the bottom of the list when the add_to_top option is not true, so you don’t have to scroll up each time to add new items.
  • A list item comes with a menu that allows users to duplicate the item, insert a new item above/below it, or remove it.¹⁶¹
  • Users can expand or collapse the entire list, while the Expand All and Collapse All buttons allow you to expand or collapse all items in the list at once.¹⁶²
  • A required List field with no subfield or value is marked as invalid.¹⁶³ No need to set the min and max options for the required option to work.
  • An optional List field with no subfield or value is saved as an empty array, rather than nothing.¹⁴²
  • An optional List field won’t populate an item by default when the subfield has the default value.¹⁶⁴
  • A simple List field with no subfields is displayed as a multiline text field,¹⁶⁵ where users can use spaces¹⁶⁶ and commas¹⁶⁷ for list items. A comma is no longer treated as a list delimiter.
  • Users can preview variable types without having to register a preview template.¹³⁷
  • It’s possible to omit fields in a variable type object.¹⁶⁸ In that case, only the typeKey (default: type) is saved in the output.
  • A collapsed List field will not display a programmatic summary like List [ Map { "key": "value" } ] if the summary option is not set.¹⁶⁹
• Markdown
  • The rich text editor is built with the well-maintained Lexical framework, which solves various issues with a Slate-based editor in Netlify/Decap CMS,¹⁷⁰ including fatal application crashes,^171172173174 lost formatting when pasting,¹⁷⁵ an extra line break when pasting,¹⁷⁶ extra HTML comments when pasting,¹⁷⁷ backslash injections,¹⁷⁸ dropdown visibility,¹⁷⁹ and text input difficulties with IME.⁸⁵
  • The default editor mode can be set by changing the order of the modes option.¹⁸⁰ If you want to use the plain text editor by default, add modes: [raw, rich_text] to the field configuration.
  • A Markdown field plays well with a variable type List field.¹⁸¹
  • A combination of bold and italic doesn’t create a confusing 3-asterisk markup.¹⁸² In our editor, bold is 2 asterisks and italic is an underscore.
  • The built-in image component can be inserted with a single click.
  • The built-in image component allows users to add, edit or remove a link on an image.¹⁸³ To disable this feature, add linked_images: false to the Markdown field options.
  • It’s possible to paste/drop local/remote images into the rich text editor to insert them as expected. Note: Pasting multiple images is not supported in Firefox. In Netlify/Decap CMS, pasting an image may cause the application to crash.
  • The built-in code-block component is implemented just like a blockquote. You can simply convert a normal paragraph into a code block instead of adding a component.
  • Code in a code block in the editor can be copied as expected.¹⁸⁴
  • Language-annotated code block doesn’t trigger unsaved changes.¹⁸⁵
  • Soft line breaks are rendered as hard line breaks in the Preview Pane.
• Number
  • If the value_type option is int (default) or float, the required option is false, and the value is not entered, the field will be saved as null instead of an empty string.¹⁴³ If value_type is anything else, the data type will remain a string.
• Object
  • Sveltia CMS offers two ways to have conditional fields in a collection:¹⁸⁶
    • The Object widget supports variable types (the types and typeKey options) just like the List widget.¹⁸⁷
    • An optional Object field (required: false) can be manually added or removed with a checkbox.¹⁸⁸ If unadded or removed, the required subfields won’t trigger validation errors,¹⁸⁹ and the field will be saved as null.
• Relation
  • Field options are displayed with no additional API requests.²⁸ The confusing options_length option, which defaults to 20, is therefore ignored.¹⁹⁰
  • slug can be used for value_field to show all available options instead of just one in some situations.¹⁹¹
  • Template strings with a wildcard like {{cities.*.name}} can also be used for value_field.¹⁹²
  • display_fields is displayed in the Preview Pane instead of value_field.
  • The redundant search_fields option is optional in Sveltia CMS, as it defaults to display_fields, value_field or the collection’s identifier_field, which is title by default.
  • The value_field option is also optional in Sveltia CMS, as it defaults to {{slug}} (entry slugs).
  • A new item created in a referenced collection is immediately available in the options.¹⁹³
  • A referenced DateTime field value is displayed in the specified format.¹⁹⁴
  • It’s possible to refer to a List field with the field option, which produces a single subfield but does not output the subfield name in the data, using the value_field: cities.*.name syntax. (Discussion)
• Select
  • It’s possible to select an option with value 0.¹⁹⁵
  • label is displayed in the Preview Pane instead of value.
• String
  • When a YouTube video URL is entered in a String field, it appears as an embedded video in the Preview Pane. Check your site’s CSP if the preview doesn’t work.
  • When a regular URL is entered in a String field, it appears as a link that can be opened in a new browser tab.
  • Supports the type option that accepts url or email as a value, which will validate the value as a URL or email.
  • Supports the prefix and suffix string options, which automatically prepend and/or append the developer-defined value to the user-input value, if it’s not empty.
• Boolean, Number and String
  • Supports the before_input and after_input string options, which allow developers to display custom labels before and/or after the input UI.¹⁹⁶ Markdown is supported in the value.
    • Compatibility note: In Static CMS, these options are implemented as prefix and suffix, respectively, which have different meaning in Sveltia CMS.
• File and Image
  • Provides a reimagined all-in-one asset selection dialog for File and Image fields.¹⁹⁷
    • Entry, file, collection and global assets are listed on separate tabs for easy selection.¹⁹⁸
    • A new asset can be uploaded by dragging & dropping it into the dialog.⁴⁰
    • A URL can also be entered in the dialog.
    • Integration with Pexels, Pixabay and Unsplash makes it easy to select and insert a free stock photo.¹⁹⁹ More stock photo providers will be added in the future.
  • Users can also simply drag and drop a file onto a File/Image field to attach it without having to open the Select File dialog.
  • Large images automatically fit in the Preview Pane instead of being displayed at their original size, which can easily exceed the width of the pane.
  • The new accept option allows files to be filtered by a comma-separated list of unique file type specifiers, in the same way as the HTML accept attribute for <input type="file">.²⁰⁰
    • By default, the Image widget only accepts an AVIF, GIF, JPEG, PNG, WebP or SVG image. BMP, HEIC, JPEG XL, PSD, TIFF and other less common or non-standard files are excluded.²⁰¹
    • The File widget has no default restriction.
  • If the public_folder contains {{slug}} and you’ve edited a slug field (e.g. title) of a new entry after uploading an asset, the updated slug will be used in the saved asset path.²⁰² Other dynamic template tags such as {{filename}} will also be populated as expected.²⁰³
  • The CMS prevents the same file from being uploaded twice. It compares the hashes and selects an existing asset instead.
• List and Object
  • The summary is displayed correctly when it refers to a Relation field²⁰⁴ or a simple List field.
  • The summary template tags support transformations, e.g. {{fields.date | date('YYYY-MM-DD')}}.
  • The collapsed option accepts the value auto to automatically collapse the widget if any of its subfields are filled out. The same applies to the minimize_collapsed option for the List widget.
• Markdown, String and Text
  • A required field containing only spaces or line breaks will result in a validation error, as if no characters were entered.
• Relation and Select
  • If a dropdown list has options with long wrapping labels, they won’t overlap with the next option.²⁰⁵
  • When there are 5 or fewer options, the UI automatically switches from a dropdown list to radio buttons (single-select) or checkboxes (multi-select) for faster data entry.²⁰⁶ This number can be changed with the dropdown_threshold option for the relation and select widgets.
• String and Text
  • Supports the minlength and maxlength options, which allow developers to specify the minimum and maximum number of characters required for input without having to write a custom regular expression with the pattern option. A character counter is available when one of the options is given, and a user-friendly validation error is displayed if the condition is not met.

New widgets

• Compute
  • The experimental compute widget allows to reference the value of other fields in the same collection, similar to the summary property for the List and Object widgets.²⁰⁷ Use the value property to define the value template, e.g. posts-{{fields.slug}}. (Example)
  • The value property also supports a value of {{index}}, which can hold the index of a list item. (Example)
• KeyValue (Dictionary)
  • The new keyvalue widget allows users to add arbitrary key-value string pairs to a field.²⁰⁸
  • While the implementation is compatible with Static CMS, we provide a more intuitive UI. You can press Enter to move focus or add a new row while editing, and the preview is displayed in a clean table.
• UUID
  • In addition to generating UUIDs for entry slugs, Sveltia CMS supports the proposed uuid widget with the following properties:¹⁵⁷
    • prefix: A string to be prepended to the value. Default: an empty string.
    • use_b32_encoding: Whether to encode the value with Base32. Default: false.
    • read_only: Whether to make the field read-only. Default: true.

Better asset management

• A completely new, full-fledged Asset Library, built separately from the image selection dialog, makes it easy to manage all of your files, including images, videos and documents.²⁰⁹
  • Navigate between the global media folder and collection media folders.²¹⁰
  • Preview image, audio, video, text and PDF files. Check your site’s CSP if the preview doesn’t work.
  • Copy the public URL,²¹¹ file path, text data or image data of a selected asset to clipboard. The file path starts with / as expected.²¹²
  • Edit plain text assets, including SVG images.
  • Rename existing assets. If the asset is used in any entries, the File/Image fields will be automatically updated with a new file path.
  • Replace existing assets.
  • Download one or more selected assets at once.
  • Delete one or more selected assets at once.
  • Upload multiple assets at once, including files in nested folders, by browsing or dragging and dropping them into the library.⁴¹
  • Sort or filter assets by name or file type.
  • View asset details, including size, dimensions, commit author/date and a list of entries that use the selected asset.
• Enhancements to media libraries:
  • Supports multiple media libraries with the new media_libraries option.²¹³
  • Default media library
    • It comes with a built-in image optimizer. With a few lines of configuration, images selected by users for upload are automatically converted to WebP format for reduced size,²¹⁴ and it’s also possible to specify a maximum width and/or height.²¹⁵ SVG images can also be optimized.
    • The max_file_size option for the File/Image widget can be defined within the global media_library option, using default as the library name. It applies to all File/Image entry fields, as well as direct uploads to the Asset Library. The option can also be part of the new media_libraries option.
    • Unlike Netlify/Decap CMS, files are uploaded with their original names. Uppercase letters and spaces are not converted to lowercase letters and hyphens.²¹⁶ If you want to slugify filenames according to the slug option, use the slugify_filename default media library option.
  • Other integrations
    • Integrates stock photo providers, including Pexels, Pixabay and Unsplash.¹⁹⁹ Developers can disable them if needed.
    • More integration options, including Amazon S3 and Cloudflare R2/Images/Stream, would be added in the future.
• The global media_folder can be an empty string (or . or /) if you want to store assets in the root folder.
• PDF documents are displayed with a thumbnail image in both the Asset Library and the Select File dialog, making it easier to find the file you’re looking for.³⁰
• Assets stored in an entry-relative media folder are displayed in the Asset Library.²¹⁷
• These entry-relative assets are automatically deleted when the associated entry is deleted because these are not available for other entries.²¹⁸ When you’re working with a local repository, the empty enclosing folder is also deleted.
• Hidden files (dot files) don’t appear in the Asset Library.²¹⁹
• Users can add assets using the Quick Add button in the upper right corner of the application.

Better customization

• The application renders within the dimensions of a custom mount element, if exists.²²⁰
• A custom logo defined with the logo_url property is displayed on the global application header and the browser tab (favicon).²²¹ A smaller logo is also correctly positioned on the authentication page.²²²
• CMS.registerCustomFormat() supports async parser/formatter functions.²²³
• The component definition for CMS.registerEditorComponent() accepts the icon property. Developers can specify a Material Symbols icon name just like custom collection icons.

Better localization

• The application UI locale is automatically selected based on the preferred language set with the browser.²²⁴ Users can also change the locale in the application settings. Therefore, the locale configuration option is ignored and CMS.registerLocale() is not required.
• The List widget’s label and label_singular are not converted to lowercase, which is especially problematic in German, where all nouns are capitalized.²²⁵
• Long menu item labels, especially in non-English locales, don’t overflow the dropdown container.²²⁶

Compatibility

We are trying to make Sveltia CMS compatible with Netlify/Decap CMS where possible, so that more users can seamlessly switch to our modern alternative. It’s ready to be used as a drop-in replacement for Netlify/Decap CMS in some casual use case scenarios with a single line of code update.

However, 100% feature parity is not planned, and some features are still missing or will not be added due to performance, deprecation and other factors. Look at the compatibility info below to see if you can migrate now or in the near future.

Features not to be implemented

• Azure and Bitbucket backends: For performance reasons. We’ll support these platforms if their APIs improve to allow the CMS to fetch multiple entries at once.
• Git Gateway backend: Also for performance reasons. Git Gateway has not been actively maintained since Netlify CMS was abandoned, and it’s known to be slow and prone to rate limit violations. We plan to develop a GraphQL-based high-performance alternative in the future.
• Netlify Identity Widget: It’s not useful without Git Gateway, and the Netlify Identity service itself is now deprecated. We plan to develop an alternative solution with role support in the future, most likely using Cloudflare Workers and Auth.js.
• The deprecated client-side implicit grant for the GitLab backend: It has already been removed from GitLab 15.0. Use the client-side PKCE authorization instead.
• The deprecated Netlify Large Media service: Consider other storage providers.
• Deprecated camel case configuration options: Use snake case instead, according to the current Decap CMS document.
  • Collection: sortableFields
  • DateTime widget: dateFormat, timeFormat, pickerUtc
  • Markdown widget: editorComponents
  • Number widget: valueType
  • Relation widget: displayFields, searchFields, valueField
  • Note: Some other camel case options, including Color widget options, are not deprecated.
• The deprecated Date widget: It was removed from Decap CMS 3.0 and Sveltia CMS 0.10. Use the DateTime widget with the time_format: false option instead.
• Some date/time format tokens: Decap CMS 3.1.1 replaced Moment.js with Day.js, and Sveltia CMS will follow suit soon. Since Day.js tokens are not 100% compatible with Moment.js tokens, this could be a breaking change in certain cases.
• The theme and keymap inline settings for the Code widget, along with support for some languages: We use the Prism-powered code block functionality in Lexical instead of CodeMirror. Prism may be replaced by Shiki in the future.
• Remark plugins for the Markdown widget: Not compatible with our Lexical-based rich text editor.
• An absolute URL in the public_folder option: Such configuration is not recommended, as stated in the Netlify/Decap CMS document.
• Performance-related options: Sveltia CMS has drastically improved performance with GraphQL enabled by default, so these are no longer relevant:
  • Global: search
  • Backend: use_graphql
  • Relation widget: options_length
• The global locale option and CMS.registerLocale() method: Sveltia CMS automatically detects the user’s preferred language and changes the UI locale as mentioned above.
• Undocumented methods exposed on the CMS object: This includes custom backends and custom media libraries, if any. We may support these features in the future, but our implementation would likely be incompatible with Netlify/Decap CMS.
• Any other undocumented options/features. Exceptions apply.

Current limitations

These Netlify/Decap CMS features are not yet implemented in Sveltia CMS. We are working hard to add them before the 1.0 release due Q4 2025. Check the release notes and Bluesky for updates.

• Comprehensive site config validation
• Localization other than English and Japanese
• Forgejo backend (#381)
• Cloudinary and Uploadcare media libraries (#4)
• Field-specific media folders (beta) for the File and Image widgets
• Map widget
• Custom widgets
• Custom editor components: Support for preview, Object/List widgets, and the default field option
• Custom previews (#51)
• Event hooks (#167)

Due to the complexity, we have decided to defer the following features to the 2.0 release. Netlify/Decap CMS has a number of open issues with the collaboration and beta features — we want to implement them the right way.

• Editorial Workflow
• Open Authoring
• Nested Collections (beta)

Found a compatibility issue or other missing feature? Let us know. Bear in mind that undocumented behaviour can easily be overlooked.

Compatibility with Static CMS

Sveltia CMS provides partial compatibility with Static CMS, a now-defunct fork of Netlify CMS. This README will be updated as our development progresses.

• Configuration options
  • Static CMS made some breaking changes to view filters/groups, List widget, etc. while Sveltia CMS follows Netlify/Decap CMS, so you should review your configuration carefully.
  • The default option for sortable fields is implemented in Sveltia CMS.
  • Directory navigation in the Asset Library is partially supported in Sveltia CMS. If you define collection-specific media_folders, these folders will be displayed in the Asset Library and Select File/Image dialog. Display of subfolders within a configured folder will be implemented before GA. We don’t plan to support the folder_support and display_in_navigation options for media_library; subfolders will be displayed with no configuration. (#301)
  • The logo_link global option will not be supported. Use display_url or site_url instead.
  • The yaml global option will not be supported, as Sveltia CMS doesn’t expose the underlying yaml library options for forward compatibility reasons. However, we do have some data output options, including YAML indentation and quotes.
• I18n support
  • The enforce_required_non_default i18n option will not be supported. Sveitia CMS enforces required fields in all locales by default. However, the save_all_locales or initial_locales i18n option allows users to disable non-default locales if needed. Developers can also specify a subset of locales with the required field option, e.g. required: [en].
• Widgets
  • The date/time format options for the DateTime widget are incompatible since Static CMS switched to date-fns while Sveltia CMS continues to use Moment.js (and will soon switch to Day.js). Update your formats accordingly.
  • The KeyValue widget is implemented in Sveltia CMS with the same options.
  • The UUID widget is also implemented, but with different options.
  • The prefix and suffix options for the Boolean, Number and String widgets are implemented as before_input and after_input in Sveltia CMS, respectively. Our prefix and suffix options for the String widget are literally a prefix and suffix to the value.
  • The multiple option for the File and Image widgets will be implemented in Sveltia CMS before GA. (#10)
• Customization
  • CMS.registerIcon() will not be supported, as Sveltia CMS includes the Material Symbols font for custom collection icons that doesn’t require manual registration.

Framework support

While Sveltia CMS is built with Svelte, the application is framework-agnostic. It’s a small, compiled, vanilla JavaScript bundle that manages content in a Git repository directly via an API. It doesn’t interact with the framework that builds your site.

You can use the CMS with any framework or static site generator (SSG) that loads static files during the build process. This includes Astro, Eleventy, Hugo, Jekyll, Next.js, SvelteKit, VitePress, and more.

We have added support for features and file structures used in certain frameworks and i18n libraries, such as index file inclusion and slug localization for Hugo, i18n support for Astro and Zola, and some enhancements for VitePress. Let us know if your framework has specific requirements.

Backend support

• The GitLab backend requires GitLab 16.3 or later.
• The Gitea backend requires Gitea 1.24 or later. It’s not compatible with Forgejo at this time due to API differences. Support for Forgejo is tracked in #381. The default origin of the base_url and api_root backend options is set to https://gitea.com (public free service) instead of https://try.gitea.io (test instance).

Browser support

Sveitia CMS works with all modern browsers, but there are a few limitations because it utilizes some new web technologies:

• The local repository workflow requires a Chromium-based browser, including Chrome, Edge and Brave.
• Safari: The Test backend doesn’t save changes locally; image optimization is slower than in other browsers.
• Firefox Extended Support Release (ESR) and its derivatives, including Tor Browser and Mullvad Browser, are not officially supported, although they may still work.

Other notes

• Sveltia CMS requires a secure context, meaning it only works with HTTPS, localhost or 127.0.0.1 URLs. If you’re running a remote server yourself and the content is served over HTTP, get a TLS certificate from Let’s Encrypt.

Getting started

Installation & setup

Currently, Sveltia CMS is primarily intended for existing Netlify/Decap CMS users. If you don’t have it yet, follow their documentation to add it to your site and create a configuration file first. Skip the Choosing a Backend page and choose the GitHub, GitLab or Gitea backend instead. Then migrate to Sveltia CMS as described below.

Or try one of the starter kits for popular frameworks created by community members:

• Astro
  • astros by @zanhk
  • Astro i18n Starter by @yacosta738
• Eleventy (11ty)
  • Eleventy starter template by @danurbanowicz
• Hugo
  • Hugo module by @privatemaker
  • hugolify-admin by @sebousan

The Netlify/Decap CMS website has more templates and examples. You can probably use one of them and switch to Sveltia CMS. (Note: These third-party resources are not necessarily reviewed by the Sveltia CMS team.)

Unfortunately, we are unable to provide free installation and setup support at this time. As the product evolves, we’ll provide a built-in configuration editor, comprehensive documentation and official starter kits to make it easier for everyone to get started with Sveltia CMS.

Migration

Have a look at the compatibility info above first. If you’re already using Netlify/Decap CMS with the GitHub, GitLab or Gitea backend and don’t have any unsupported features like custom widgets or nested collections, migrating to Sveltia CMS is super easy — it works as a drop-in replacement.

Open /admin/index.html locally with an editor like VS Code and replace the CMS <script> tag with the new one:

<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>

From Netlify CMS:

-<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
+<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>

From Decap CMS:

-<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>

Next, let’s test Sveltia CMS on your local machine. If everything looks good, push the change to your repository.

You can now open https://[hostname]/admin/ as usual to start editing. There is even no authentication process if you’re already signed in with GitHub or GitLab on Netlify/Decap CMS because Sveltia CMS uses your auth token stored in the browser. Simple enough!

Migrating from Git Gateway backend

Sveltia CMS does not support the Git Gateway backend due to performance limitations. If you don’t care about user management with Netlify Identity, you can use the GitHub or GitLab backend instead. Make sure you install an OAuth client on GitHub or GitLab in addition to updating your configuration file. As noted in the document, Netlify is still able to facilitate the auth flow.

To allow multiple users to edit content, simply invite people to your GitHub repository with the write role assigned.

Once you have migrated from the Git Gateway and Netlify Identity combo, you can remove the Netlify Identity Widget script tag from your HTML:

-<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

If you want to stay with Netlify Identity, unfortunately you can’t migrate to Sveltia CMS right now. We plan to develop an alternative to Git Gateway and Netlify Identity Widget in the future.

Installing with npm

For advanced users, we have also made the bundle available as an npm package. You can install it by running npm i @sveltia/cms or pnpm add @sveltia/cms on your project. The manual initialization flow with the init method is the same as for Netlify/Decap CMS.

Updates

Updating Sveltia CMS is transparent, unless you include a specific version in the <script> source URL or use the npm package. Whenever you (re)load the CMS, the latest version will be served via UNPKG. The CMS also periodically checks for updates and notifies you when a new version is available. After the product reaches GA, you could use a semantic version range (^1.0.0) like Netlify/Decap CMS.

If you’ve chosen to install with npm, updating the package is your responsibility. We recommend using ncu or a service like Dependabot to keep dependencies up to date, otherwise you’ll miss important bug fixes and new features.

Tips & tricks

Moving your site from Netlify to another hosting service

You can host your Sveltia CMS-managed site anywhere, such as Cloudflare Pages or GitHub Pages. But moving away from Netlify means you can no longer sign in with GitHub or GitLab via Netlify. Instead, you can use our own OAuth client, which can be easily deployed to Cloudflare Workers, or any other 3rd party client made for Netlify/Decap CMS.

Providing a JSON configuration file

Sveltia CMS supports a configuration file written in the JSON format in addition to the standard YAML format. This allows developers to programmatically generate the CMS configuration to enable bulk or complex collections. To do this, simply add a <link> tag to your HTML, just like a custom YAML config link, but with the type application/json:

<link href="path/to/config.json" type="application/json" rel="cms-config-url" />

Alternatively, you can manually initialize the CMS with a JavaScript configuration object.

Providing multiple configuration files

With Sveltia CMS, developers can modularize the site configuration. Just provide multiple config links and the CMS will automatically merge them in the order of <link> tag appearance. It’s possible to use YAML, JSON or both.

<link href="/admin/config.yml" type="application/yaml" rel="cms-config-url" />
<link href="/admin/collections/authors.yml" type="application/yaml" rel="cms-config-url" />
<link href="/admin/collections/pages.yml" type="application/yaml" rel="cms-config-url" />
<link href="/admin/collections/posts.yml" type="application/yaml" rel="cms-config-url" />

Both standard application/yaml and non-standard text/yaml are acceptable for the YAML config link type.

Limitation: YAML anchors, aliases and merge keys only work if they are in the same file, as files are merged with the deepmerge library after being parsed as separate JavaScript objects.

Working around an authentication error

If you get an “Authentication Aborted” error when trying to sign in to GitHub, GitLab or Gitea using the authorization code flow, you may need to check your site’s Cross-Origin-Opener-Policy. The COOP header is not widely used, but it’s known to break the OAuth flow with a popup window. If that’s your case, changing same-origin to same-origin-allow-popups solves the problem. (Discussion)

Working with a local Git repository

Sveltia CMS has simplified the local repository workflow by removing the need for additional configuration (the local_backend property) and a proxy server (netlify-cms-proxy-server or decap-server), thanks to the File System Access API available in some modern browsers.

Here are the workflow steps and tips:

1. Make sure you have configured the GitHub, GitLab or Gitea backend.
   • The Git Gateway backend mentioned in the Netlify/Decap CMS local Git repository document is not supported in Sveltia CMS, so name: git-gateway won’t work. Use github, gitlab or gitea for the name along with the repo definition. If you haven’t determined your repository name yet, just use a tentative name.
2. Launch the local development server for your frontend framework, typically with npm run dev or pnpm dev.
3. Open http://localhost:[port]/admin/index.html with Chrome or Edge.
   • The port number varies by framework. Check the terminal output from the previous step.
   • The 127.0.0.1 addresses can also be used instead of localhost.
   • If your CMS instance is not located under /admin/, use the appropriate path.
   • Other Chromium-based browsers may also work. Brave user? See below.
4. Click “Work with Local Repository” and select the project’s root directory once prompted.
   • If you get an error saying “not a repository root directory”, make sure you’ve turned the folder into a repository with either a CUI (git init) or GUI, and the hidden .git folder exists.
   • If you’re using Windows Subsystem for Linux (WSL), you may get an error saying “Can’t open this folder because it contains system files.” This is due to a limitation in the browser, and you can try some workarounds mentioned in this issue and this thread.
5. Edit your content using the CMS. All changes are made to local files.
6. Open the dev site at http://localhost:[port]/ to check the rendered pages.
   • Depending on your framework, you may need to manually rebuild your site to reflect the changes you have made.
7. Use git diff or a GUI like GitHub Desktop to see if the produced changes look good.
8. Commit and push the changes if satisfied, or discard them if you’re just testing.

Note that, as with Netlify/Decap CMS, the local repository support in Sveltia CMS doesn’t perform any Git operations. You’ll have to manually fetch, pull, commit and push all changes using a Git client. In the future, we’ll figure out if there’s a way to commit in a browser, because the proxy server actually has the undocumented, experimental git mode that creates commits to a local repository.²²⁷ (Discussion)

You will also need to reload the CMS after making changes to the configuration file or retrieving remote updates. We plan to eliminate this manual work with the newly available File System Observer API.

If you have migrated from Netlify/Decap CMS and are happy with the local repository workflow of Sveltia CMS, you can remove the local_backend property from your configuration and uninstall the proxy server. If you have configured a custom port number with the .env file, you can remove it as well.

Enabling local development in Brave

In the Brave browser, you must enable the File System Access API with an experiment flag to take advantage of the local repository workflow.

1. Open brave://flags/#file-system-access-api in a new browser tab.
2. Click Default (Disabled) next to File System Access API and select Enabled.
3. Relaunch the browser.

Using a custom icon for a collection

You can specify an icon for each collection for easy identification in the collection list. You don’t need to install a custom icon set because the Material Symbols font file is already loaded for the application UI. Just pick one of the 2,500+ icons:

1. Visit the Material Symbols page on Google Fonts.
2. Browse and select an icon, and copy the icon name that appears at the bottom of the right pane.
3. Add it to one of your collection definitions in config.yml as the new icon property, like the example below.
4. Repeat the same steps for all the collections if desired.
5. Commit and push the changes to your Git repository.
6. Reload Sveltia CMS once the updated config file is deployed.

fields:
  - name: tags
    label: Tags
    icon: sell # or any icon name
    create: true
    folder: content/tags

Adding dividers to the collection list

Sveltia CMS allows developers to add dividers to the collection list to distinguish different types of collections. To do this, insert a fake collection with the divider: true option along with a random, unique name. In VS Code, you may get a validation error if config.yml is treated as a “Netlify YAML config” file. You can work around this by adding an empty files list as well:

collections:
  - name: products
    ...
  - divider: true
    name: d1 # d2, d3, etc. Should be unique for each divider
    files: []
  - name: pages
    ...

Using a custom media folder for a collection

This is actually not new in Sveltia CMS but rather an undocumented feature in Netlify/Decap CMS.²²⁸ You can specify media and public folders for each collection that override the global media folder. Well, it’s documented, but that’s probably not what you want.

Rather, if you’d like to add all the media files for a collection in one single folder, specify both media_folder and public_folder instead of leaving them empty. The trick is to use a project relative path starting with a slash for media_folder like the example below. You can try this with Netlify/Decap CMS first if you prefer.

media_folder: static/media # leading slash is optional
public_folder: /media

collections:
  - name: products
    label: Products
    folder: content/products
    media_folder: /static/media/products # make sure to append a slash
    public_folder: /media/products

In Sveltia CMS, those collection media folders are displayed prominently for easier asset management. We recommend setting media_folder and public_folder for each collection if it contains one or more File/Image fields.

Specifying default sort field and direction

Sveltia CMS has extended the sortable_fields collection option to allow developers to define the field name and direction to be used for sorting entries by default. Our implementation is compatible with Static CMS. This is especially useful if you want to show entries sorted by date from new to old:

collections:
  - name: posts
    sortable_fields:
      fields: [title, published_date, author]
      default:
        field: published_date
        direction: descending # default: ascending

For backward compatibility with Netlify/Decap CMS, sortable_fields with a field list (an array) will continue to work.

For backward compatibility with Static CMS, the direction option accepts title case values: Ascending and Descending. However, None is not supported and has the same effect as ascending.

Including Hugo’s special index file in a folder collection

Before this feature, Hugo’s special _index.md file was hidden in a folder collection, and you had to create a file collection to manage the file, since it usually comes with a different set of fields than regular entry fields. Now, with the new index_file option, you can add the index file to the corresponding folder collection, above regular entries, for easier editing:

collections:
  - name: posts
    label: Blog posts
    folder: content/posts
    fields: # Fields for regular entries
      ...
    index_file:
      name: _index # File name, required
      fields: # Fields for the index file. If omitted, regular entry fields are used
        ...
      editor:
        preview: false # Hide the preview pane if needed

Note that the special index file is placed right under the folder, regardless of the collection’s path option. For example, if the path is {{year}}/{{slug}}, a regular entry would be saved as content/posts/2025/title.md, but the index file remains at content/posts/_index.md.

Using keyboard shortcuts

• View the Content Library: Alt+1
• View the Asset Library: Alt+2
• Search for entries and assets: Ctrl+F (Windows/Linux) or Command+F (macOS)
• Create a new entry: Ctrl+E (Windows/Linux) or Command+E (macOS)
• Save an entry: Ctrl+S (Windows/Linux) or Command+S (macOS)
• Cancel entry editing: Escape

Standard keyboard shortcuts are also available in the Markdown editor, including Ctrl+B/Command+B for bold text, Ctrl+I/Command+I for italics, and Tab to indent a list item.

Using DeepL to translate entry fields

Sveltia CMS comes with a handy DeepL integration so that you can translate any text field from another locale without leaving the Content Editor. To enable the high quality, AI-powered, quick translation feature:

1. Update your configuration file to enable the i18n support with multiple locales.
2. Sign up for DeepL API and copy your Authentication Key from DeepL’s Account page.
3. Open an entry in Sveltia CMS.
4. Click on the Translation button on the pane header or each field, right next to the 3-dot menu.
5. Paste your key when prompted.
6. The field(s) will be automatically translated.

Note that the Translation button on the pane header only translates empty fields, while in-field Translation buttons override any filled text.

If you have upgraded to DeepL API Pro, provide your new Authentication Key:

1. Click the Account button in the upper right corner, then click Settings.
2. Select the Contents tab.
3. Replace your free API key ending with :fx with the new paid API key in the DeepL API Authentication Key field.
4. Close the Settings dialog.

Localizing entry slugs

In Sveltia CMS, it’s possible to localize entry slugs (filenames) if the i18n structure is multiple_files or multiple_folders. All you need is the localize filter for slug template tags:

i18n:
  structure: multiple_folders
  locales: [en, fr]

slug:
  encoding: ascii
  clean_accents: true

collections:
  - name: posts
    label: Blog posts
    create: true
    folder: content/posts
    slug: '{{title | localize}}' # This does the trick
    format: yaml
    i18n: true
    fields:
      - name: title
        label: Title
        widget: string
        i18n: true

With this configuration, an entry is saved with localized filenames, while the default locale’s slug is stored in each file as an extra translationKey property, which is used in Hugo’s multilingual support. Sveltia CMS and Hugo read this property to link localized files.

• content/posts/en/my-trip-to-new-york.yaml

  translationKey: my-trip-to-new-york
  title: My trip to New York

• content/posts/fr/mon-voyage-a-new-york.yaml

  translationKey: my-trip-to-new-york
  title: Mon voyage à New York

You can customize the property name and value for a different framework or i18n library by adding the canonical_slug option to your top-level or collection-level i18n configuration. The example below is for @astrolicious/i18n, which requires a locale prefix in the value (discussion):

i18n:
  canonical_slug:
    key: defaultLocaleVersion # default: translationKey
    value: 'en/{{slug}}' # default: {{slug}}

For Jekyll, you may want to use the ref property:

i18n:
  canonical_slug:
    key: ref

Disabling non-default locale content

You can disable output of content in selected non-default locales by adding the save_all_locales property to the top-level or collection-level i18n configuration. Then you’ll find “Disable (locale name)” in the three-dot menu in the top right corner of the Content Editor. This is useful if the translation isn’t ready yet, but you want to publish the default locale content first.

With the following configuration, you can disable the French and/or German translation while writing in English.

i18n:
  structure: multiple_files
  locales: [en, fr, de]
  default_locale: en
  save_all_locales: false # default: true

Alternatively, developers can specify locales to be enabled by default when users create a new entry draft, using the new initial_locales option, which accepts a locale list, default (default locale only) or all (all locales). The default locale is always enabled, even if it’s excluded from initial_locales. When this option is used, save_all_locales is deemed false.

The following example disables German by default, but users can manually enable it if needed. Users can also disable French, which is enabled by default.

i18n:
  structure: multiple_files
  locales: [en, fr, de]
  default_locale: en
  initial_locales: [en, fr]

Using a random ID for an entry slug

By default, the slug for a new entry file will be generated based on the entry’s title field. Or, you can specify the collection’s slug option to use the file creation date or other fields. While the behaviour is generally acceptable and SEO-friendly, it’s not useful if the title might change later or if it contains non-Latin characters like Chinese. In Sveltia CMS, you can easily generate a random UUID for a slug without a custom widget!

It’s simple — just specify {{uuid}} (full UUID v4), {{uuid_short}} (last 12 characters only) or {{uuid_shorter}} (first 8 characters only) in the slug option. The results would look like 4fc0917c-8aea-4ad5-a476-392bdcf3b642, 392bdcf3b642 and 4fc0917c, respectively.

collections:
  - name: members
    label: Members
    slug: '{{uuid_short}}' # or {{uuid}} or {{uuid_shorter}}

Configuring multiple media libraries

The traditional media_library option allows developers to configure only one media library:

media_library:
  name: default
  config:
    max_file_size: 1024000

Sveltia CMS has added support for multiple media libraries with the new media_libraries option so you can mix up the default media library (your repository), Cloudinary and Uploadcare. The new option can be used as a global option as well as a File/Image field option.

media_libraries:
  default:
    config:
      max_file_size: 1024000 # default: Infinity
      slugify_filename: true # default: false
      transformations:
        # See the next section
  cloudinary:
    config:
      cloud_name: YOUR_CLOUD_NAME
      api_key: YOUR_API_KEY
    output_filename_only: true
  uploadcare:
    config:
      publicKey: YOUR_PUBLIC_KEY
    settings:
      autoFilename: true
      defaultOperations: '/resize/800x600/'

Note: Cloudinary and Uploadcare are not yet supported in Sveltia CMS.

Optimizing images for upload

Ever wanted to prevent end-users from adding huge images to your repository? The built-in image optimizer in Sveltia CMS makes developers’ lives easier with a simple configuration like this:

media_libraries:
  default:
    config:
      transformations:
        raster_image: # original format
          format: webp # new format, only `webp` is supported
          quality: 85 # default: 85
          width: 2048 # default: original size
          height: 2048 # default: original size
        svg:
          optimize: true

Then, whenever a user selects images to upload, those images are automatically optimized, all within the browser. Raster images such as JPEG and PNG are converted to WebP format and resized if necessary. SVG images are minified using the SVGO library.

In case you’re not aware, WebP offers better compression than conventional formats and is now widely supported across major browsers. So there is no reason not to use WebP on the web.

• As noted above, the media_libraries option can be global at the root level of config.yml, which applies to both entry fields and the Asset Library, or field-specific for the File/Image widgets.
• raster_image applies to any supported raster image format: avif, bmp, gif, jpeg, png and webp. If you like, you can use a specific format as key instead of raster_image.
• The width and height options are the maximum width and height, respectively. If an image is larger than the specified dimension, it will be scaled down. Smaller images will not be resized.
• File processing is a bit slow on Safari because native WebP encoding is not supported and the jSquash library is used instead.
• AVIF conversion is not supported because no browser has native AVIF encoding support (Chromium won’t fix it) and the third-party library (and AVIF encoding in general) is very slow.
• This feature is not intended for creating image variants in different formats and sizes. It should be done with a framework during the build process.
• We may add more transformation options in the future.

Disabling stock assets

The Select File/Image dialog includes some stock photo providers for convenience, but sometimes these may be irrelevant. Developers can hide them with the following configuration:

media_libraries:
  stock_assets:
    providers: []

Editing data files with a top-level list

Sveltia CMS allows you to edit and save a list at the top-level of a data file, without a field name. All you need to do is create a single List field with the new root option set to true. The configuration below reproduces this Jekyll data file example:

collections:
  - name: data
    label: Data Files
    files:
      - name: members
        label: Member List
        file: _data/members.yml
        fields:
          - name: members
            label: Members
            label_singular: Member
            widget: list
            root: true # This does the trick
            fields:
              - name: name
                label: Name
              - name: github
                label: GitHub account

Note: The root option is ignored if the collection or collection file contains multiple fields. You can still have subfields under the List field.

Changing the input type of a DateTime field

It may be worth mentioning this topic here because the current Decap CMS doc about the DateTime widget is unclear. By default, a DateTime field lets users pick both date and time, but developers can change the input type if needed.

Use time_format: false to hide the time picker and make the input date only:

- label: Start Date
  name: startDate
  widget: datetime
  time_format: false

Use date_format: false to hide the date picker and make the input time only:

- label: Start Time
  name: startTime
  widget: datetime
  date_format: false

We understand that this configuration may be a bit confusing, but it’s necessary to maintain backward compatibility with Netlify CMS. We plan to improve the widget options and introduce new input types: month and week.

Rendering soft line breaks as hard line breaks in Markdown

This tip is not really specific to Sveltia CMS, but some developers have asked the maintainer about it:

In the Markdown editor, pressing Shift+Enter inserts a soft line break (\n). We can’t change the behaviour to add a hard line break (<br>) — it’s a limitation of the underlying Lexical framework. However, if you look at the preview, you may notice that soft line breaks are rendered as hard line breaks. That’s because the preview is using the Marked library with the breaks option enabled, which mimics how comments are rendered on GitHub.

Chances are the Markdown parser you use for your frontend can do the same:

• markdown-it (used in Eleventy and VitePress) also has the breaks option
• remarkable also has the breaks option
• Showdown has the simpleLineBreaks option
• goldmark (used in Hugo) has the html.WithHardWraps option
• kramdown (used in Jekyll) has the hard_wrap option with the GFM parser
• remark (used in Astro) offers a plugin
• micromark clarifies it doesn’t have such an option and recommends alternatives

Controlling data output

Sveltia CMS supports some data output options, including JSON/YAML formatting preferences, at the root level of the configuration file. The default options are listed below:

output:
  omit_empty_optional_fields: false
  encode_file_path: false # true to URL-encode file paths for File/Image fields
  json:
    indent_style: space # or tab
    indent_size: 2
  yaml:
    quote: none # or single or double
    indent_size: 2

Disabling automatic deployments

You may already have a CI/CD tool set up on your Git repository to automatically deploy changes to production. Occasionally, you make a lot of changes to your content to quickly reach the CI/CD provider’s (free) build limits, or you just don’t want to see builds triggered for every single small change.

With Sveltia CMS, you can disable automatic deployments by default and manually trigger deployments at your convenience. This is done by adding the [skip ci] prefix to commit messages, the convention supported by GitHub Actions, GitLab CI/CD, CircleCI, Travis CI, Netlify, Cloudflare Pages and others. Here are the steps to use it:

1. Add the new automatic_deployments property to your backend configuration with a value of false:

   backend:
     name: github
     repo: owner/repo
     branch: main
     automatic_deployments: false

2. Commit and deploy the change to the config file and reload the CMS.
3. Now, whenever you save an entry or asset, [skip ci] is automatically added to each commit message. However, deletions are always committed without the prefix to avoid unexpected data retention on your site.
4. If you want to deploy a new or updated entry, as well as any other unpublished entries and assets, click an arrow next to the Save button in the Content Editor, then select Save and Publish. This will trigger CI/CD by omitting [skip ci].

If you set automatic_deployments to true, the behaviour is reversed. CI/CD will be triggered by default, while you have an option to Save without Publishing that adds [skip ci] only to the associated commit.

Gotcha: Unpublished entries and assets are not drafts. Once committed to your repository, those changes can be deployed any time another commit is pushed without [skip ci], or when a manual deployment is triggered.

If the automatic_deployments property is defined, you can manually trigger a deployment by clicking the Publish Changes button on the application header. To use this feature:

• GitHub Actions:
  1. Without any configuration, Publish Changes will trigger a repository_dispatch event with the sveltia-cms-publish event type. Update your build workflow to receive this event:

     on:
       push:
         branches: [$default-branch]
       repository_dispatch:
         types: [sveltia-cms-publish]

• Other CI/CD providers:
  1. Select Settings under the Account button in the top right corner of the CMS.
  2. Select the Advanced tab.
  3. Enter the deploy hook URL for your provider, e.g. Netlify or Cloudflare Pages.
  4. Configure the CSP if necessary. See below.

Setting up Content Security Policy

If your site adopts Content Security Policy (CSP), use the following policy for Sveltia CMS, or some features may not work.

style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com;
img-src 'self' blob: data:;
media-src blob:;
frame-src blob:;
script-src 'self' https://unpkg.com;
connect-src 'self' blob: data: https://unpkg.com;

(UNPKG is used not only to download the CMS script bundle, but also to check for the latest version and retrieve additional dependencies such as PDF.js and Prism language definitions)

Then, add the following origins depending on your Git backend and enabled integrations.

• GitHub: (If you’re running a GitHub Enterprise Server, you’ll also need to add the origin to these directives.)
  • img-src

    https://*.githubusercontent.com
    

  • connect-src

    https://api.github.com https://www.githubstatus.com
    

• GitLab: (If you’re running a self-hosted instance, you’ll also need to add the origin to these directives.)
  • img-src

    https://gitlab.com https://secure.gravatar.com
    

  • connect-src

    https://gitlab.com https://status-api.hostedstatus.com
    

• Gitea: (If you’re running a self-hosted instance, use the origin instead.)
  • img-src

    https://gitea.com
    

  • connect-src

    https://gitea.com
    

• Pexels:
  • img-src

    https://images.pexels.com
    

  • connect-src

    https://images.pexels.com https://api.pexels.com
    

• Pixabay:
  • img-src

    https://pixabay.com
    

  • connect-src

    https://pixabay.com
    

• Unsplash:
  • img-src

    https://images.unsplash.com
    

  • connect-src

    https://images.unsplash.com https://api.unsplash.com
    

• DeepL API Free:
  • connect-src

    https://api-free.deepl.com
    

• DeepL API Pro:
  • connect-src

    https://api.deepl.com
    

• YouTube:
  • frame-src

    https://www.youtube-nocookie.com
    

If you choose to disable automatic deployments and have configured a webhook URL, you may need to add the origin to the connect-src directive. For example,

• Netlify:
  • connect-src

    https://api.netlify.com
    

• Cloudflare Pages
  • connect-src

    https://api.cloudflare.com
    

If you have image field(s) and expect that images will be inserted as URLs, you may want to allow any source using a wildcard instead of specifying individual origins:

img-src 'self' blob: data: https://*;

Showing the CMS version

1. Click on your avatar in the top right corner of the application to open the Account menu.
2. Click Settings.
3. Click the Advanced tab.
4. Enable Developer Mode.
5. Close the Settings dialog.

A Release Notes link will now appear under the Account menu with the current application version.

Support & feedback

While we don’t have dedicated developer/user support resources, you can post quick questions on the Discussions page of our GitHub repository. Feedback is also welcome, but please check the Compatibility and Roadmap sections of this README before starting a new discussion — your idea may already be covered.

Join us on Discord or ping us on Bluesky for a casual chat.

As described throughout this README, Sveltia CMS is being built as a replacement for Netlify/Decap CMS. At this point, we assume that most developers and users are moving from the other product. We are happy to help you migrate, but we cannot help you set up Sveltia CMS from scratch through our free support channels.

Planning to build a website with Sveltia CMS? Looking for professional support? Maintainer @kyoshino is available for hire depending on your needs. Feel free to reach out!

Contributions

See Contributing to Sveltia CMS. Bug reports are highly encouraged!

Roadmap

v1.0

Due Q4 2025

• Enhanced compatibility with Netlify/Decap CMS
• Tackling some more Netlify/Decap CMS issues
• Accessibility audit
• Localization
• Developer documentation (implementation guide)
• Marketing site
• Live demo site

v2.0

• Implementing some deferred Netlify/Decap CMS features
• Tackling even more Netlify/Decap CMS issues
• End-user documentation
• Contributor documentation

Future

• Tackling many of the remaining Netlify/Decap CMS issues, including MDX support,²²⁹ manual entry sorting,²³⁰ config editor,²³¹ singletons,²³² and other top-voted features (some of them may be included in v2.0)
• Exploring features that require server-side implementation, including user management (Netlify Identity alternative), roles,²³³ commits without a Git service account (Git Gateway alternative), post locking (like WordPress)²³⁴ and scheduled posts²³⁵
• More integration options: stock photos, stock videos, cloud storage providers, translation services, maps, analytics tools, etc.
• AI integrations for image generation, content writing, translation, etc.
• Search enhancements
• Advanced digital asset management (DAM) features, including image editing and tagging²³⁶
• Marketplace for custom widgets, etc.
• VS Code extension for config.yml schema validation
• Official starter templates for the most popular frameworks, including SvelteKit and Next.js
• and so much more!

Trivia

• The original version of Netlify CMS was built with Ember before being rewritten in React. And now we are completely rewriting it in Svelte. So this is effectively the second time the application has gone through a framework migration.
• Our local repository workflow shares implementation with the Test backend, as both utilize the File System API, allowing us to reduce maintenance costs. The seamless local workflow is critical not only for improved DX, but also for our rapid application development.

Related links

• Introducing Sveltia CMS: a short technical presentation by @kyoshino during the This Week in Svelte online meetup on March 31, 2023 — recording & slides

As seen on

• LogRocket Blog – 9 best Git-based CMS platforms for your next project
• Jamstack – Headless CMS
• Hugo – Front-end interfaces
• Made with Svelte

Disclaimer

This software is provided “as is” without any express or implied warranty. We are not obligated to provide any support for the application. This product is not affiliated with or endorsed by Netlify, Decap CMS or any other integrated services. All product names, logos, and brands are the property of their respective owners.

Footnotes

1. Netlify/Decap CMS #2536 ↩

2. Netlify/Decap CMS #2557 ↩

3. Netlify/Decap CMS #3263 ↩

4. Netlify/Decap CMS #3264 ↩

5. Netlify/Decap CMS #3265 ↩

6. Netlify/Decap CMS #3266 ↩

7. Netlify/Decap CMS #2039, #3267, #7084 ↩

8. Netlify/Decap CMS #441, #1277, #1339, #2500, #2833, #2984, #3852, #7083 ↩

9. Netlify/Decap CMS #7241 ↩

10. Netlify/Decap CMS #5656, #5837, #5972, #6476, #6516, #6930, #6965, #7080, #7105, #7106, #7119, #7176, #7194, #7244, #7278, #7301, #7342, #7348, #7354, #7376, #7408, #7412, #7413, #7422, #7427, #7434, #7438, #7454, #7464, #7471, #7485, #7499, #7515 — These removeChild crashes are common in React apps, likely caused by a browser extension or Google Translate. ↩

11. Netlify/Decap CMS #4961, #4979, #5545, #5778, #6279, #6464, #6810, #6922, #7118, #7293 — A comment on one of the issues says the crash was due to Google Translate. Sveltia CMS has turned off Google Translate on the admin page. ↩

12. Netlify/Decap CMS #5815, #6522, #6532, #6588, #6617, #6640, #6663, #6695, #6697, #6764, #6765, #6835, #6983, #7205, #7450, #7453 ↩

13. Netlify/Decap CMS #7360, #7462 ↩

14. Netlify/Decap CMS #7240, #7428 ↩

15. Netlify/Decap CMS #3057, #3260 — We use Svelte though. ↩

16. Netlify/Decap CMS #3257 ↩

17. Netlify/Decap CMS #3258 ↩

18. Netlify/Decap CMS #3259 ↩

19. Netlify/Decap CMS #3261 ↩

20. Netlify/Decap CMS #3262 ↩

21. Netlify/Decap CMS #3296 ↩

22. Netlify/Decap CMS #1045 ↩

23. Netlify/Decap CMS #3353 ↩

24. Netlify/Decap CMS #328, #1290 ↩

25. Netlify/Decap CMS #3853 ↩

26. Netlify/Decap CMS #302, #5549 ↩

27. Netlify/Decap CMS #6034 ↩

28. Netlify/Decap CMS #4635, #5920, #6410, #6827, #6924 ↩ ↩²

29. Netlify/Decap CMS #946, #1970 ↩

30. Netlify/Decap CMS #1984 ↩ ↩²

31. Netlify/Decap CMS #2009, #2293, #3415, #3952, #6563 ↩

32. Netlify/Decap CMS #1891 ↩ ↩²

33. Netlify/Decap CMS #3285, #7030, #7067, #7217 ↩

34. Netlify/Decap CMS #6107 ↩ ↩²

35. Netlify/Decap CMS #6731 ↩

36. Netlify/Decap CMS #5472 ↩

37. Netlify/Decap CMS #5752 ↩

38. Netlify/Decap CMS #2822 ↩

39. Netlify/Decap CMS #5055, #5470, #6956, #6989 ↩

40. Netlify/Decap CMS #4563 ↩ ↩²

41. Netlify/Decap CMS #1032 ↩ ↩²

42. Netlify/Decap CMS #1333, #4216 ↩

43. Netlify/Decap CMS #7077 ↩

44. Netlify/Decap CMS #6762 ↩

45. Netlify/Decap CMS #5701 ↩

46. Netlify/Decap CMS #3431 ↩

47. Netlify/Decap CMS #542, #4532, #6513, #7295 ↩

48. Netlify/Decap CMS #6879 ↩

49. Netlify/Decap CMS #2138, #2343, #4367, #5932 ↩

50. Netlify/Decap CMS #3284 ↩

51. Netlify/Decap CMS #2673, #5315, #6499, #6544, #6551, #6679, #6773, #6883, #7363, #7365 — This problem occurs every time a new major version of React is released. ↩

52. Netlify/Decap CMS #5376, #7203, #7380 ↩

53. Netlify/Decap CMS #332, #683, #999, #1456, #4175, #4818, #5688, #6828, #6829, #6862, #7023 ↩

54. Netlify/Decap CMS #6616 ↩

55. Netlify/Decap CMS #283, #386 ↩

56. Netlify/Decap CMS #3457, #3624, #6713 ↩

57. Netlify/Decap CMS #4987 ↩

58. Netlify/Decap CMS #5970 ↩

59. Netlify/Decap CMS #6527 ↩

60. Netlify/Decap CMS #6800 ↩

61. Netlify/Decap CMS #6794 ↩

62. Netlify/Decap CMS #4417 ↩

63. Netlify/Decap CMS #4564, #5617, #5815 ↩

64. Netlify/Decap CMS #7457 ↩

65. Netlify/Decap CMS #6831 ↩

66. Netlify/Decap CMS #3704 ↩

67. Netlify/Decap CMS #7172 ↩

68. Netlify/Decap CMS #7281 — The issue was closed, but the attached PR is not yet merged. ↩

69. Netlify/Decap CMS #7352 ↩

70. Netlify/Decap CMS #7157 ↩

71. Netlify/Decap CMS #5280 ↩

72. Netlify/Decap CMS #4386, #4888, #7332, #7514 ↩

73. Netlify/Decap CMS #6978 ↩

74. Netlify/Decap CMS #4416, #7400 ↩

75. Netlify/Decap CMS #4781 ↩

76. Netlify/Decap CMS #4877 ↩

77. Netlify/Decap CMS #5493, #6600 ↩ ↩²

78. Netlify/Decap CMS #4645 ↩

79. Netlify/Decap CMS #1685 ↩

80. Netlify/Decap CMS #5969 ↩ ↩²

81. Netlify/Decap CMS #2524 ↩

82. Netlify/Decap CMS #6932 ↩

83. Netlify/Decap CMS #7086 ↩

84. Netlify/Decap CMS #7142, #7276 ↩

85. Netlify/Decap CMS #1347, #1559, #4629, #4837, #6287, #6826 — Decap CMS 3.0 updated the Slate editor in an attempt to fix the problems, but the IME issues remain unresolved when using a mobile/tablet browser. ↩ ↩²

86. Netlify/Decap CMS #4480, #5122, #6353 ↩

87. Netlify/Decap CMS #5112, #5653 ↩

88. Netlify/Decap CMS #6307 ↩

89. Netlify/Decap CMS #7371 ↩

90. Netlify/Decap CMS #7507 ↩

91. Netlify/Decap CMS #1040 ↩

92. Netlify/Decap CMS #6571 ↩

93. Netlify/Decap CMS #5317 ↩

94. Netlify/Decap CMS #6203, #7417, #7451 ↩

95. Netlify/Decap CMS #1000 ↩

96. Netlify/Decap CMS #7328 ↩

97. Netlify/Decap CMS #7347 ↩

98. Netlify/Decap CMS #4783 ↩ ↩²

99. Netlify/Decap CMS #6427 ↩

100. Netlify/Decap CMS #7192 ↩

101. Netlify/Decap CMS #5726 ↩

102. Netlify/Decap CMS #978 ↩

103. Netlify/Decap CMS #445 ↩

104. Netlify/Decap CMS #377 ↩

105. Netlify/Decap CMS #6970, #7147 ↩

106. Netlify/Decap CMS #526, #6987 ↩

107. Netlify/Decap CMS #4092 ↩

108. Netlify/Decap CMS #3715 ↩

109. Netlify/Decap CMS #4637, #5198 ↩

110. Netlify/Decap CMS #7381 ↩

111. Netlify/Decap CMS #2727, #4884, #6908 ↩

112. Netlify/Decap CMS #2491 ↩

113. Netlify/Decap CMS #1274 ↩

114. Netlify/Decap CMS #7486 ↩

115. Netlify/Decap CMS #7262 ↩

116. Netlify/Decap CMS #2289, #4518 ↩

117. Netlify/Decap CMS #4350 ↩

118. Netlify/Decap CMS #3796 ↩

119. Netlify/Decap CMS #1341 ↩

120. Netlify/Decap CMS #4255 ↩

121. Netlify/Decap CMS #7267 ↩

122. Netlify/Decap CMS #7483 ↩

123. Netlify/Decap CMS #5630 ↩

124. Netlify/Decap CMS #6500 ↩

125. Netlify/Decap CMS #1654 ↩

126. Netlify/Decap CMS #4147 ↩

127. Netlify/Decap CMS #6202 ↩

128. Netlify/Decap CMS #7399 ↩

129. Netlify/Decap CMS #1948 ↩

130. Netlify/Decap CMS #7011 ↩

131. Netlify/Decap CMS #7401 ↩

132. Netlify/Decap CMS #7415, #7421 ↩

133. Netlify/Decap CMS #7085 ↩

134. Netlify/Decap CMS #2368, #3454, #3585, #3651, #3885, #3962, #4037, #4143, #6585, #6664, #6665, #6739, #7243, #7379, #7469 ↩

135. Netlify/Decap CMS #1466 ↩

136. Netlify/Decap CMS #7279 ↩

137. Netlify/Decap CMS #2307 ↩ ↩²

138. Netlify/Decap CMS #1609, #3557, #5253, #6759, #6901 ↩

139. Netlify/Decap CMS #1449, #1988 ↩

140. Netlify/Decap CMS #1424 ↩ ↩²

141. Netlify/Decap CMS #4726 ↩ ↩²

142. Netlify/Decap CMS #2613 ↩ ↩²

143. Netlify/Decap CMS #2007, #2848 ↩ ↩²

144. Netlify/Decap CMS #995, #2017, #7120, #7186 ↩

145. Netlify/Decap CMS #1382, #6994 ↩

146. Netlify/Decap CMS #1481, #7398 ↩

147. Netlify/Decap CMS #5640, #6444 ↩

148. Netlify/Decap CMS #3583 ↩

149. Netlify/Decap CMS #5870 ↩

150. Netlify/Decap CMS #3505, #4211, #5439 ↩

151. Netlify/Decap CMS #7442 ↩

152. Netlify/Decap CMS #6254 ↩

153. Netlify/Decap CMS #7092 ↩

154. Netlify/Decap CMS #725 ↩

155. Netlify/Decap CMS #7319 ↩

156. Netlify/Decap CMS #1270 ↩

157. Netlify/Decap CMS #1975, #3712 ↩ ↩²

158. Netlify/Decap CMS #2294, #3046, #4363, #4520, #5806 ↩

159. Netlify/Decap CMS #531, #621, #1282, #1877, #2514, #2737 ↩

160. Netlify/Decap CMS #4733 ↩

161. Netlify/Decap CMS #1244 ↩

162. Netlify/Decap CMS #756 — The Expand All and Collapse All buttons cannot be found in the current version of Decap CMS. ↩

163. Netlify/Decap CMS #4387, #5381 ↩

164. Netlify/Decap CMS #2380 ↩

165. Netlify/Decap CMS #3018 ↩

166. Netlify/Decap CMS #4646, #7167 ↩

167. Netlify/Decap CMS #2153 ↩

168. Netlify/Decap CMS #7322 ↩

169. Netlify/Decap CMS #1275 ↩

170. Netlify/Decap CMS #6905 — We use Lexical created by Facebook (Meta). ↩

171. Netlify/Decap CMS #6999, #7000, #7001, #7152, #7220, #7283, #7316, #7429, #7465, #7500 ↩

172. Netlify/Decap CMS #7047 ↩

173. Netlify/Decap CMS #6993, #7123, #7127, #7128, #7237, #7251, #7361, #7391, #7393, #7470, #7475, #7480, #7503, #7504 ↩

174. Netlify/Decap CMS #7190, #7218, #7392 ↩

175. Netlify/Decap CMS #991, #4488, #7233 ↩

176. Netlify/Decap CMS #7364 ↩

177. Netlify/Decap CMS #6180 ↩

178. Netlify/Decap CMS #512, #5673, #6707, #7501 ↩

179. Netlify/Decap CMS #6482 ↩

180. Netlify/Decap CMS #5125 ↩

181. Netlify/Decap CMS #7458 ↩

182. Netlify/Decap CMS #3291 ↩

183. Netlify/Decap CMS #4754 ↩

184. Netlify/Decap CMS #7143 ↩

185. Netlify/Decap CMS #7431 ↩

186. Netlify/Decap CMS #565, #6733 ↩

187. Netlify/Decap CMS #7031 ↩

188. Netlify/Decap CMS #1267 ↩

189. Netlify/Decap CMS #2103, #2790, #7302 ↩

190. Netlify/Decap CMS #4738 ↩

191. Netlify/Decap CMS #4954 ↩

192. Netlify/Decap CMS #5487 ↩

193. Netlify/Decap CMS #4841 ↩

194. Netlify/Decap CMS #3421 ↩

195. Netlify/Decap CMS #6515 ↩

196. Netlify/Decap CMS #2677, #6836 ↩

197. Netlify/Decap CMS #2019 — Rather than relying on a third-party library, we built our own asset browser that integrates more seamlessly with the rest of the CMS. ↩

198. Netlify/Decap CMS #5910 ↩

199. Netlify/Decap CMS #2579 ↩ ↩²

200. Netlify/Decap CMS #1345 ↩

201. Netlify/Decap CMS #5467 ↩

202. Netlify/Decap CMS #5444 ↩

203. Netlify/Decap CMS #3723, #6990 ↩

204. Netlify/Decap CMS #6325 ↩

205. Netlify/Decap CMS #6508 ↩

206. Netlify/Decap CMS #1489, #5838 ↩

207. Netlify/Decap CMS #450, #2122, #6819 ↩

208. Netlify/Decap CMS #961, #5489 ↩

209. Netlify/Decap CMS #962 ↩

210. Netlify/Decap CMS #3240 ↩

211. Netlify/Decap CMS #4209 ↩

212. Netlify/Decap CMS #5569, #6754 ↩

213. Netlify/Decap CMS #5901 ↩

214. Netlify/Decap CMS #5419, #7107 ↩

215. Netlify/Decap CMS #1322, #6442 ↩

216. Netlify/Decap CMS #4288 ↩

217. Netlify/Decap CMS #7124 ↩

218. Netlify/Decap CMS #3615, #4069, #5097, #6642 ↩

219. Netlify/Decap CMS #2370, #5596 ↩

220. Netlify/Decap CMS #7197 ↩

221. Netlify/Decap CMS #5548 ↩

222. Netlify/Decap CMS #2133 ↩

223. Netlify/Decap CMS #13 — The issue appears to have been closed without a fix being available. ↩

224. Netlify/Decap CMS #6816 ↩

225. Netlify/Decap CMS #3856 ↩

226. Netlify/Decap CMS #3562, #6215, #7479 ↩

227. Netlify/Decap CMS #4429 ↩

228. Netlify/Decap CMS #3671 ↩

229. Netlify/Decap CMS #1776, #2064, #7158, #7259 ↩

230. Netlify/Decap CMS #475, #5469 ↩

231. Netlify/Decap CMS #341, #1167 ↩

232. Netlify/Decap CMS #535 ↩

233. Netlify/Decap CMS #2 ↩

234. Netlify/Decap CMS #277 ↩

235. Netlify/Decap CMS #263 ↩

236. Netlify/Decap CMS #5029, #5048 ↩