Sveltia CMS

Sveltia CMS is a Git-based lightweight headless CMS under development as a drop-in replacement for Netlify/Decap CMS. You can use it with any static site generator like SvelteKit, Eleventy, Next.js and Hugo to manage content as static files in a Git repository. The open source alternative to Netlify/Decap CMS is now in public beta — with more features to come.

Features

Sveltia CMS is a Git-based lightweight headless CMS, which means:

Git-based: The content is stored as static JSON, YAML or TOML files on your Git repository. No 3rd party database or API is involved. Your data is yours.
Lightweight: The app is compiled as a single small JavaScript file served over a CDN. There’s no need to sign up for a service or install additional software.
Headless: The CMS only takes care of raw data. You can read it and render the final content with your favourite framework.

Here are some highlights mainly compared to Netlify/Decap CMS:

Compatible with Netlify/Decap CMS

Ready to replace Netlify/Decap CMS in some casual use case scenarios by updating one single line of code.
Existing configuration files can be reused as is.
Various features are still missing though; see the compatibility chart below for details.

Better UX

Offering a modern, intuitive UI, with some inspiration from the Netlify/Decap CMS v3 prototype¹.
Immersive dark mode².
The screenshots above are worth a thousand words!

Better performance

Built completely from scratch with Svelte rather than forking React-based Netlify/Decap CMS. The app starts fast and stays fast. The compiled code is vanilla JavaScript; you can use it with any framework.
Using the GraphQL API for GitHub by default to fetch contents quickly at once, so showing and searching entries and media are now instant. Saving entries and media is also much faster.
Caching Git files locally to speed up startup and reduce bandwidth.
Small footprint: less than 300 KB when minified and gzipped, compared to 1.5 MB of Netlify/Decap CMS. And no virtual DOM overhead.

Better productivity

Required fields, not optional fields, are clearly marked for efficient data entry.
Integration with Pexels, Pixabay and Unsplash makes it easy to insert free stock photos into image fields³.
You can work on a local Git repository without having to run a proxy server.
Delete multiple entries and assets at once.
Providing some keyboard shortcuts for faster editing. More to come!
- Create a new entry: Ctrl+E (Windows/Linux) / Command+E (macOS)
- Save an entry: Ctrl+S (Windows/Linux) / Command+S (macOS)
- Search for entries and assets: Ctrl+F (Windows/Linux) / Command+F (macOS)
Solving various outstanding Netlify/Decap CMS bugs⁴.

Better i18n support

Making it easier to switch between locales while editing with just a click on a button.
Integrating DeepL to allow translating text fields from another locale with one click.
You can now use a random UUID for an entry slug, which is a good option for locales writing in non-Latin characters⁵.
Solving limitations in Netlify/Decap CMS’s list and object widgets so that changes made with these widgets will be duplicated between locales as expected when using the i18n: duplicate field configuration⁶.
Users can now choose their preferred UI locale.

Collection enhancements

You can choose a custom icon for each collection⁷.
A per-collection media folder will now appear aside of entries.
String values in YAML files can be quoted with the new yaml_quote: true option for a collection, mainly for framework compatibility⁸.

Media library enhancements

An all-new media library makes it easy to manage all your assets.
Sort or filter assets by name or file type.
View asset details, including size, dimensions, and a list of entries that use the selected asset.
Upload multiple assets at once, including files in nested folders, by browsing or dragging & dropping them into the media library⁹.
You can now navigate between the global media folder and a per-collection media folder¹⁰.

Compatibility

While it’s not our goal to recreate all the features found in Netlify/Decap CMS, we plan to maximize compatibility before the 1.0 release so that more users can migrate to our modern alternative.

Feature	Status in Sveltia CMS
Installation	Installing with npm is not supported yet.
UI locales	Only English and Japanese are available at this time. No registration is needed. While the UI locale is automatically selected depending on the browser’s language settings, it can be changed in Settings. (Click on the Account button at the top right corner of the CMS.)
Account	Only the GitHub backend is available at this time. You can keep using Netlify or a 3rd party OAuth client (or our own) to sign in with GitHub, just like Netlify/Decap CMS. The GitLab backend is coming soon. We plan to add the Test backend as well for our demo site, but Azure and Bitbucket are unlikely to be supported, mainly due to the lack of an API method to fetch content in bulk. Later we may implement a performant Git Gateway alternative using GraphQL.
Configuration	Supported.
Media	External media storage services are not supported yet.
Editorial Workflow	Not supported yet.
Collections	Supported.
Widgets	See below for the current limitations.
Custom widgets	Not supported yet.
Custom previews	Not supported yet.

Widget limitations

Widget	Status in Sveltia CMS
Code	Not supported yet.
Color	It’s a native `<input>` element at this time. The `enableAlpha` option is not supported yet.
Date/DateTime	These are also native `<input>` elements. The `date_format` and `time_format` options with Moment.js tokens are not supported yet. We may deprecate the Moment.js format support anyway.
File/Image	Field-specific media folders and media library options are not supported yet other than `media_library.config.max_file_size` for the default media library.
Map	Not supported yet.
Markdown	It’s a plain text editor at this time. A rich text editor is coming soon.
Relation	The `search_fields` options is not supported yet.

Beta features in Netlify/Decap CMS

Feature	Status in Sveltia CMS
Working with a Local Git Repository	Supported. See below for details.
GitLab and BitBucket Editorial Workflow Support	The GitLab backend is not supported yet. No plan to support BitBucket.
i18n Support	Supported. In fact, i18n is at the core of Sveltia CMS!
GitHub GraphQL API	Supported. Sveltia CMS uses GraphQL by default for a better performance. It cannot be disabled.
GitLab GraphQL API	The GitLab backend is not supported yet.
Open Authoring	Not supported yet.
Folder Collections Path	Supported.
Folder Collections Media and Public Folder	Supported. We recommend using absolute path per-collection folders for easier asset management rather than relative path per-entry folders.
List Widget: Variable Types	Supported.
Custom Mount Element	Supported.
Manual Initialization	Not supported yet.
Raw CSS in registerPreviewStyle	Not supported yet.
Squash merge GitHub pull requests	Editorial workflow is not supported yet.
Commit Message Templates	Supported.
Image widget file size limit	Supported.
Summary string template transformations	Supported.
Registering to CMS Events	Not supported yet.
Dynamic Default Values	Supported.
Nested Collections	Not supported yet.
Remark plugins	Not supported yet.
Custom formatters	Not supported yet.

Other features

Comprehensive config validation is not implemented yet.
Auto-saving a draft entry is not implemented yet.
Duplicating an entry is not implemented yet.
Downloading an asset in the media library is not implemented yet.
Backend health check is not implemented yet.

Known issues

Accessibility support is limited.

Roadmap

Further Netlify/Decap CMS compatibility, including Editorial Workflow
Further performance optimization, including data caching and Svelte 5 migration
Further UX enhancements
Config editor¹¹
Documentation
Demo site
Starter templates

Non goals (for now)

Mobile support
WYSIWYG editing

Getting started

New users

Currently, Sveltia CMS is aimed at existing Netlify/Decap CMS users. If you don’t have it yet, follow their documentation to add it to your site first. Then migrate to Sveltia CMS as described below.

As the product evolves, we’ll implement the configuration editor and provide comprehensive documentation to make it easier for everyone to get started with Sveltia CMS.

Here are some starter templates for popular frameworks created by our contributors. More to follow!

Eleventy by @danurbanowicz

Migration

If you’re already using Netlify/Decap CMS with the GitHub backend and don’t have any custom widget, custom preview or plugin, migrating to Sveltia CMS is super easy. Edit /admin/index.html to replace the CMS script tag, and push the change to your repository:

-<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" type="module"></script>

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

That said, we strongly recommend testing your new Sveltia CMS instance first on your local machine. See below for how.

Tips & tricks

Move 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 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.

Work with a local Git repository

You can use Sveltia CMS with a local Git repository, just like the beta feature in Netlify/Decap CMS, but Sveltia CMS has simplified the workflow by removing the need for additional configuration (the local_backend property) and proxy server, thanks to the File System Access API available in some modern browsers.

Launch the local development server for your frontend framework, typically with npm run dev.
Visit http://localhost:[port]/admin/index.html with Chrome or Edge. The port number depends on your framework.
Click “Work with Local Repository” and select the project’s root directory once prompted.
Make some changes on Sveltia CMS.
See if the produced changes look good using git diff or a GUI like GitHub Desktop.
Commit and push the changes if satisfied, or discard them if you’re just testing.

Use a custom icon for a collection

As shown in the screenshot above, you can use different icons for collections in Sveltia CMS.

Visit the Material Symbols page on Google Fonts.
Search and select an icon, and copy the icon name displayed on the right panel.
Add it to one of your collection definitions in config.yml as the new icon property, like the example below.
Repeat the same steps for all the collections if desired.
Commit and push the changes to your Git repository.
Reload Sveltia CMS once the updated config file is deployed.

   - name: tags
     label: Tags
+    icon: sell
     create: true
     folder: data/tags/

Use 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 as a beta feature, 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 an absolute path for media_folder like the example below. You can try this with Netlify/Decap CMS first if you prefer.

 media_folder: static/media
 public_folder: /media

 collections:
   - name: products
     label: Products
     create: true
     folder: data/products/
+    media_folder: /static/media/products
+    public_folder: /media/products

In Sveltia CMS, those per-collection media folders are displayed prominently for easier asset management.

Use 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, quick translation feature:

Sign up for DeepL API and copy your Authentication Key from DeepL’s Account page.
Go back to Sveltia CMS, click on the Account button at the top right corner, then click Settings.
Paste your key to the DeepL API Authentication Key field, and close the Settings dialog.
Open any entry, and you can now translate all fields or individual fields by selecting the Translate menu item.
If you have upgraded to DeepL API Pro, provide your new Authentication Key in the same way.

Use 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.

   - name: members
     label: Members
     create: true
     folder: data/members/
+    slug: '{{uuid_short}}'

Set 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:;
script-src 'self' https://unpkg.com;
connect-src 'self' blob: data:;

And combine the following policies depending on your Git backend and enabled integrations.

GitHub:

img-src https://avatars.githubusercontent.com https://raw.githubusercontent.com;
connect-src https://api.github.com https://www.githubstatus.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;
```

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://*;

Self-host the CMS

Sveltia CMS is open source for sure! You can host it on your server rather than loading it from UNPKG, though it’s not recommended due to missing bug fixes. Simply copy the latest sveltia-cms.js file from the CDN, or build it yourself:

Clone this Git repository.
Run pnpm install && pnpm build at the project root.
sveltia-cms.js will be generated under the dist directory.

Importing the CMS as an npm package is not supported yet.

Support & feedback

Visit the Discussions page on this GitHub repository and start a new discussion. Tell us about your use cases!

Want to build a website with Sveltia CMS? @kyoshino is available for hire depending on your requirements.

Contributions

Sveltia CMS is still in early beta, so we do expect various problems. Please report any bugs to us. Feel free to submit feature requests as well. Meanwhile, pull requests may not be accepted for the time being due to limited review resources.

Disclaimer

This software is provided “as is” without any express or implied warranty. 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.

Netlify/Decap CMS #2557 ↩
Netlify/Decap CMS #3267 ↩
Netlify/Decap CMS #2579 ↩
Netlify/Decap CMS #1382 and many more. We’ll be updating this list after reviewing their issue list. ↩
Netlify/Decap CMS #1975 ↩
Netlify/Decap CMS #4386 ↩
Netlify/Decap CMS #1040 ↩
Netlify/Decap CMS #3505 ↩
Netlify/Decap CMS #1032 ↩
Netlify/Decap CMS #3240 ↩
Netlify/Decap CMS #341 ↩
Netlify/Decap CMS #3671 ↩

Samsonium/sveltia-cms

Sveltia CMS

Features

Compatible with Netlify/Decap CMS

Better UX

Better performance

Better productivity

Better i18n support

Collection enhancements

Media library enhancements

Compatibility

Widget limitations

Beta features in Netlify/Decap CMS

Other features

Known issues

Roadmap

Non goals (for now)

Getting started

New users

Migration

Tips & tricks

Move your site from Netlify to another hosting service

Work with a local Git repository

Use a custom icon for a collection

Use a custom media folder for a collection

Use DeepL to translate entry fields

Use a random ID for an entry slug

Set up Content Security Policy

Self-host the CMS

Support & feedback

Contributions

Related Links

Disclaimer

Samsonium/sveltia-cms

Sveltia CMS

Features

Compatible with Netlify/Decap CMS

Better UX

Better performance

Better productivity

Better i18n support

Collection enhancements

Media library enhancements

Compatibility

Widget limitations

Beta features in Netlify/Decap CMS

Other features

Known issues

Roadmap

Non goals (for now)

Getting started

New users

Migration

Tips & tricks

Move your site from Netlify to another hosting service

Work with a local Git repository

Use a custom icon for a collection

Use a custom media folder for a collection

Use DeepL to translate entry fields

Use a random ID for an entry slug

Set up Content Security Policy

Self-host the CMS

Support & feedback

Contributions

Related Links

Disclaimer

Footnotes