Sveltia CMS is a Git-based lightweight headless CMS under active development as a modern, 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, UX-focused alternative to Netlify/Decap CMS is now in public beta — with more features to come.
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 decided to build an alternative from the ground up, while ensuring an easy migration path from the other. After proving the concept with a rapid Svelte prototype, development was accelerated to address their primary use cases. The new offering has since been named Sveltia CMS and released as open source software to encourage wider adoption.
Our goal is to make it a viable successor to Netlify CMS, expand the Git-based headless CMS market, empower small businesses and individuals who need a simple yet powerful CMS solution, and showcase the huge potential of the Svelte framework.
Sveltia CMS is still in beta, so please be careful when trying it out.
While we are fixing reported bugs as fast as we can, usually within 24 hours, the overall progress may be slower than you think. The thing is, it’s not just a personal project of @kyoshino, but also involves different kinds of activities:
- Ensuring maximum compatibility with existing versions of Netlify/Decap CMS
- Tackling as many issues reported to Netlify/Decap CMS as possible (so far 75+ of them have been effectively solved in Sveltia CMS, with the goal of reaching 100 by GA)
- Implementing our own enhancement ideas
At this point, we are on track to ship version 1.0 in Q3 2024. Check our release notes for updates.
We are working hard to create a significantly better alternative to Netlify CMS and Decap CMS by improving everything. Here’s what makes Sveltia CMS different. Look how serious we are!
- Ready to replace Netlify/Decap CMS in some casual use case scenarios by updating a single line of code.
- Your existing configuration file can be reused as is.
- Various features are still missing though — look at the compatibility info below to see if you can migrate now or soon.
- Created and maintained by an experienced UX engineer who loves code, design and marketing. You can expect constant UX improvements across the platform.
- Offers a modern, intuitive user interface, including an immersive dark mode1, inspired in part by the Netlify CMS v3 prototype2.
- Comes with touch device support. While the UI is not yet optimized for small screens, large tablets like iPad Pro or Pixel Tablet should work well. Mobile support is planned after the 1.0 release.
- Made with Svelte, not React, means we can spend more time on UX rather than tedious state management. It also allows us to avoid fatal React app crashes3. Best of all, Svelte offers great performance!
- The screenshots above are worth a thousand words, but read on to learn about many other improvements in detail.
- Built completely from scratch with Svelte instead of forking React-based Netlify/Decap CMS. The app starts fast and stays fast. The compiled code is vanilla JavaScript — you can use it with almost any framework.
- Small footprint: The bundle size is less than 500 KB when minified and gzipped, which is much lighter than bloated Netlify CMS (1.5 MB) and Decap CMS (1.8 MB)45. Sveltia CMS is free of technical debt and virtual DOM overhead.
- No typing lag on input widgets, especially within nested lists and objects6.
- Uses the GraphQL API for GitHub and GitLab to quickly fetch content at once, so that entries and assets can be listed and searched instantly78. It also avoids the slowness and potential API rate limit violations caused by hundreds of requests with Relation widgets9.
- Saving entries and assets to GitHub is also much faster thanks to the GraphQL mutation.
- Using caching and lazy loading techniques. A list of repository files is stored locally for faster startup and bandwidth savings.
- Thumbnails of assets, including PDF files, are generated and cached for faster rendering of the Asset Library and other parts of the CMS10.
- The upcoming Svelte 5 upgrade is anticipated to deliver a further boost in performance, including accelerated speed and reduced code size.
- You can work with a local Git repository without any extra configuration or proxy server11.
- Eliminates some workflow disruptions in the Content Editor:
- Click once (the Save button) instead of twice (Publish > Publish now) to save an entry.
- The editor closes automatically when an entry is saved.
- You can upload multiple assets at once15.
- You can delete multiple entries and assets at once.
- Some keyboard shortcuts are available for faster editing. More to come!
- View the Content Library:
Alt+1 - View the Asset Library:
Alt+2 - Search for entries and assets:
Ctrl+F(Windows/Linux) orCommand+F(macOS) - Create a new entry:
Ctrl+E(Windows/Linux) orCommand+E(macOS) - Save an entry:
Ctrl+S(Windows/Linux) orCommand+S(macOS)
- View the Content Library:
- Never miss out on the latest features and bug fixes by being notified when an update to the CMS is available16. Then update to the latest version with a single click17.
- Improved keyboard handling lets you efficiently navigate through UI elements using the Tab, Space, Enter and arrow keys1819.
- Comprehensive WAI-ARIA support enables users who rely on screen readers such as NVDA and VoiceOver.
- Ensures sufficient contrast between the foreground text and background colours.
- Honours your operating system’s reduced motion and reduced transparency settings.
- We’ll continue to test and improve the application to meet WCAG 2.2.
- Avoids high/critical severity vulnerabilities through constant dependency updates and frequent releases20.
- We have documented how to set up a Content Security Policy for the CMS.
- The
unsafe-evalandunsafe-inlinekeywords are not needed in thescript-srcCSP directive21. - The
same-originreferrer policy is automatically set with a<meta>tag.
- Uses the GraphQL API where possible for better performance, as mentioned above. You don’t need to set the
use_graphqloption to enable it for GitHub and GitLab. - The Git branch name is automatically set to the repository’s default branch (
main,masteror whatever) if not specified in the configuration file, preventing data loading errors due to a hardcoded fallback tomaster22. - You can disable automatic deployments by default or on demand to save costs and resources associated with CI/CD and to publish multiple changes at once23.
- The GitLab backend support comes with background service status checking, just like GitHub.
- You can quickly open the source file of an entry or asset in your repository using View on GitHub (or GitLab) under the 3-dot menu.
- Sveltia CMS has been built with a multilingual architecture from the very beginning. You can expect top-notch 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 a city where 150+ languages are spoken.
- You can easily switch between locales while editing with just a click on a button instead of a dropdown list.
- Fields in non-default locales are validated as expected24.
- Boolean, DateTime, List and Number fields in the entry preview are displayed in a localized format.
- Integrates DeepL to allow translation of text fields from another locale with one click.
- You can disable non-default locale content25.
- You can use a random UUID for an entry slug, which is a good option for locales that write in non-Latin characters.
- Removes the limitations in the List and Object widgets so that changes made with these widgets will be duplicated between locales as expected when using the
i18n: duplicatefield configuration2627. - Raises a validation error instead of failing silently if the
single_filestructure is used and a required field is not filled in any of the locales28. - Entry-relative media folders can be used in conjunction with the
multiple_foldersi18n structure29. - Boolean fields are updated in real time between locales like other widgets to avoid confusion30.
- Solves problems with Chinese, Japanese and Korean (CJK) IME text input in the rich text editor for the Markdown widget31.
- You can use the
{{locale}}template tag in thepreview_pathcollection option to provide site preview links for each language32. - You can localize entry slugs while linking the localized files33, thanks to the support for Hugo’s
translationKey34.
- Supports a JSON configuration file that can be generated for bulk or complex collections35.
- You can choose a custom icon for each collection36.
- Assets stored in a per-collection media folder can be displayed next to the entries.
- Entry slug template tags support filter transformations just like summary string template tags37.
- You can set the maximum number of characters for an entry slug with the new
slug_lengthcollection option38. - Single quotes in a slug will be replaced with
sanitize_replacement(default: hyphen) rather than being removed39. - You can use nested fields (dot notation) in the
pathoption for a folder collection, e.g.{{fields.state.name}}/{{slug}}40. - You can use Markdown in collection descriptions41. Bold, italic, strikethrough, code and links are allowed.
- Required fields, not optional fields, are clearly marked for efficient data entry.
- You can revert changes to all fields or a specific field.
- You can hide the preview of a specific field with
preview: false. - Fields with validation errors are automatically expanded if they are part of nested, collapsed objects42.
- When you click on a field in the Preview pane, the corresponding field in the Editor pane is highlighted. It will be automatically expanded if collapsed43.
- You can use a full regular expression, including flags, for the widget
patternoption44. For example, if you want to allow 280 characters or less in a multiline text field, you could write/^.{0,280}$/s. - A long validation error message is displayed in full, without being hidden behind the field label45.
- For data consistency, Boolean, List (see below) and other fields are always saved as a proper value, such as an empty string or an empty array, rather than nothing, even if it’s optional or empty.
- Leading and trailing spaces in text-type field values are automatically removed when you save an entry46.
- JSON/TOML/YAML data is saved with a new line at the end of the file to prevent unnecessary changes being made to the file4748.
- String values in YAML files can be quoted with the new
yaml_quote: trueoption for a collection, mainly for framework compatibility49.
- Boolean
- Hidden
- The
defaultvalue is saved when you create a file collection item, not just a folder collection item52.
- The
- List
- A required List field with no subfield or value is marked as invalid53.
- An optional List field with no subfield or value is saved as an empty array, rather than nothing54.
- You can enter spaces in a simple text-based List field55.
- You can preview variable types without having to register a preview template56.
- Markdown
- The rich text editor is built with Lexical instead of Slate, which solves various problems found in Netlify/Decap CMS, including fatal application crashes5758596061.
- You can set the default editor mode by changing the order of the
modesoption62. If you want to use the plain text editor by default, addmodes: [raw, rich_text]to the field configuration.
- Object
- Sveltia CMS offers two ways to have conditional fields in a collection63:
- You can use variable types (the
typesoption) with the Object widget 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 errors64.
- You can use variable types (the
- Sveltia CMS offers two ways to have conditional fields in a collection63:
- Relation
- Select
- It’s possible to select an option with value
066.
- It’s possible to select an option with 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.
- Supports the
typeproperty that acceptsurloremailas a value, which will validate the value as a URL or email. - Supports the
prefixandsuffixstring properties, which automatically prepend and/or append the developer-defined value to the user-input value.
- When a YouTube video URL is entered in a String field, it appears as an embedded video in the preview pane.
- Boolean, Number and String
- Supports the
before_inputandafter_inputstring properties, which allow developers to display custom labels before and/or after the input UI67. Markdown is supported in the value.
- Supports the
- File and Image
- Provides a reimagined all-in-one asset selection dialog for File and Image fields.
- Collection-specific assets are listed for easy selection, while all assets are displayed in a separate tab68.
- A new asset can be uploaded by dragging & dropping it into the dialog69.
- 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 photo70. More services will be added later.
- Provides a reimagined all-in-one asset selection dialog for File and Image fields.
- List and Object
- The
summaryis displayed correctly when it refers to a Relation field71.
- The
- 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
- When there are 5 or fewer options, the UI switches from a dropdown list to radio buttons (single-select) or checkboxes (multi-select) for faster data entry72.
- Compute
- The experimental
computewidget allows to reference the value of other fields in the same collection, similar to thesummaryproperty for the List and Object widgets. Use thevalueproperty to define the value template, e.g.posts-{{fields.slug}}(example).
- The experimental
- UUID
- In addition to generating UUIDs for entry slugs, Sveltia CMS also supports the proposed
uuidwidget with the following properties73: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.
- In addition to generating UUIDs for entry slugs, Sveltia CMS also supports the proposed
- A completely new 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 per-collection media folders74.
- Preview image, audio, video, text and PDF files.
- Check your site’s CSP if the preview doesn’t work.
- Copy the public URL75, file path, text data or image data of a selected asset to clipboard.
- The file path starts with
/as expected76.
- The file path starts with
- Edit plain text assets, including SVG images.
- 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 library15.
- 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.
- More features are planned so that you’ll be able to utilize Sveltia CMS as digital asset management (DAM) software.
- 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 for77.
- Assets stored in an entry-relative media folder are automatically deleted when the associated entry is deleted because these assets are not available for other entries78.
- Hidden files (dot files) don’t appear in the Asset Library79.
We are trying to make Sveltia CMS as compatible as possible with Netlify/Decap CMS, so that more users can seamlessly switch to our modern, powerful alternative. However, some features will be omitted due to deprecations and other factors.
These limitations are expected to be resolved before GA:
| Feature | Status in Sveltia CMS |
|---|---|
| Backends | Only GitHub and GitLab are available. We’ll add the Test backend for our demo site and see if Azure can also be supported. |
| Configuration | The application UI locales are only available in English and Japanese. Comprehensive config validation is not yet implemented. |
| Media Libraries | Cloudinary and Uploadcare are not yet supported. |
| Workflow | Editorial Workflow and Open Authoring are not yet supported. |
| Content Editor | Auto-saving a draft entry is not yet implemented. |
| Collections | Nested collections are not yet supported. |
| Widgets | Custom widgets are not yet supported. See the table below for other limitations. |
| Customizations | Custom previews, custom formatters and event subscriptions are not yet supported. |
| Widget | Status in Sveltia CMS |
|---|---|
| Code | Not yet supported. |
| DateTime | The date_format and time_format options with Moment.js tokens are not yet supported. Note: Decap CMS 3.1 has replaced Moment.js with Day.js; we’ll follow the change soon. |
| File/Image | Field-specific media folders and media library options are not yet supported other than media_library.config.max_file_size for the default media library. |
| Map | Not yet supported. |
| Markdown | Editor components are not yet supported. |
If we have missed any other features, let us know by filing an issue.
- The deprecated client-side implicit grant for the GitLab backend will not be supported, as it has already been removed from GitLab 15.0. Use the client-side PKCE authorization instead.
- The Bitbucket, Gitea/Forgejo and Git Gateway backends will not be supported due to performance limitations. We may implement a performant Git Gateway alternative in the future.
- The Netlify Identity Widget will not be supported, as it’s not useful without Git Gateway. We may be able to support it in the future if/when a Git Gateway alternative is created.
- The deprecated Netlify Large Media service will not be supported. Consider other storage providers.
- Sveltia CMS has dropped the support for the deprecated Date widget following Decap CMS 3.0. Use the DateTime widget instead.
- Remark plugins will not be supported, as they are not compatible with our Lexical-based rich text editor.
- Undocumented methods available on the
window.CMSobject will not be implemented. This includes custom backends, if any.
- Enhanced compatibility with Netlify/Decap CMS (see above for the status)
- Automation test coverage (Vitest + Playwright)
- Svelte 5 migration
- Localization
- Documentation
- Marketing site
- Demo site
- Starter templates
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. Then migrate to Sveltia CMS as described below.
As the product evolves, we’ll implement a built-in configuration editor and provide comprehensive documentation to make it easier for everyone to get started with Sveltia CMS.
Here are some starter kits for popular frameworks created by community members. More to follow!
- Eleventy starter template by @danurbanowicz
- Hugo module by @privatemaker
- Astro: astro-sveltia-cms, astro-starter and astros by @zanhk
Alternatively, you can probably use one of the Netlify/Decap CMS templates and make a quick migration to Sveltia CMS.
Have a look at the compatibility info above first. If you’re already using Netlify/Decap CMS with the GitHub or GitLab backend and don’t have any custom widget, custom preview or plugin, migrating to Sveltia CMS is super easy — it works as a drop-in replacement. Edit /admin/index.html to replace the CMS <script> tag, and push the change to your repository. Your new <script> tag is:
<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>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 or GitLab 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.
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.
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.
Depending on your server or framework’s configuration, when you access the CMS at /admin/, you’ll be redirected to /admin with the trailing slash removed. The CMS assumes that your configuration exists in the same directory, which means /config.yml is loaded instead of /admin/config.yml, resulting in an error saying “The configuration file could not be retrieved.” There are a couple of ways to work around this problem:
- Access
/admin/index.htmlor/admin/#/ - Rename
/admin/index.htmlto/admin/cms.html, and access/admin/cms - Specify the configuration file path with a
<link>tag in the/admin/index.html:<link href="/admin/config.yml" type="text/yaml" rel="cms-config-url" />
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.
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 backend 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.
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.
If you get an “Authentication Aborted” error when trying to sign in to GitHub or GitLab 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)
You can use Sveltia CMS with a local Git repository like Netlify/Decap CMS, but Sveltia CMS has simplified the workflow by removing the need for additional configuration (the local_backend property) and a 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 devorpnpm dev. - Visit
http://localhost:[port]/admin/index.htmlwith Chrome or Edge. The port number varies by framework.- Other Chromium-based browsers may also work. In Brave, you need to enable the File System Access API with a flag.
- 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.gitfolder 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.
- 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 (
- Make some changes to your content on Sveltia CMS.
- See if the produced changes look good using
git diffor a GUI like GitHub Desktop. - Open the dev site at
http://localhost:[port]/to check the rendered pages. - Commit and push the changes if satisfied, or discard them if you’re just testing.
Remember that the local repository support doesn’t do any Git operation. You have to fetch, pull, commit and push all changes manually with a Git client. Also, at this point, you have to reload the CMS to see the latest content after retrieving remote updates (this will be unnecessary once browsers support the proposed FileSystemObserver API).
You can have an icon for each collection for easy identification in the collection list.
- 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.ymlas the newiconproperty, 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/This is actually not new in Sveltia CMS but rather an undocumented feature in Netlify/Decap CMS83. 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 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/productsIn Sveltia CMS, those per-collection media folders are displayed prominently for easier asset management.
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:
- Update your configuration file to enable the i18n support with multiple locales.
- 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 in 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 Translate from the three-dot menu.
- If you have upgraded to DeepL API Pro, provide your new Authentication Key in the same way.
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: data/posts/
slug: '{{title | localize}}'
format: yaml
i18n: true
fields:
- name: title
label: Title
widget: string
i18n: trueWith 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.
data/posts/en/my-trip-to-new-york.yamltitle: My trip to New York translationKey: my-trip-to-new-york
data/posts/fr/mon-voyage-a-new-york.yamltitle: Mon voyage à New York translationKey: my-trip-to-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 per-collection 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}}You can now disable output of content in selected non-default locales by adding the save_all_locales property to the top-level or per-collection 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: falseBy 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}}'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, GitLab, CircleCI, Travis CI, Netlify, Cloudflare Pages and others. Here are the steps to use it:
- Add the new
automatic_deploymentsproperty to yourbackendconfiguration with a value offalse:backend: name: github repo: owner/repo branch: main + automatic_deployments: false - Commit and deploy the change to the config file and reload the CMS.
- 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. - 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 selecting Publish Changes under the Account button in the top right corner of the CMS. To use this feature:
- GitHub Actions:
- Without any configuration, Publish Changes will trigger a
repository_dispatchevent with thesveltia-cms-publishevent type. Update your build workflow to receive this event:on: push: branches: [$default-branch] + repository_dispatch: + types: [sveltia-cms-publish]
- Without any configuration, Publish Changes will trigger a
- Other CI/CD providers:
- Select Settings under the Account button in the top right corner of the CMS.
- Select the Advanced tab.
- Enter the deploy hook URL for your provider, e.g. Netlify or Cloudflare Pages.
- Configure the CSP if necessary. See below.
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;
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-srchttps://*.githubusercontent.comconnect-srchttps://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-srchttps://gitlab.com https://secure.gravatar.comconnect-srchttps://gitlab.com https://status-api.hostedstatus.com
- Pexels:
img-srchttps://images.pexels.comconnect-srchttps://images.pexels.com https://api.pexels.com
- Pixabay:
img-srchttps://pixabay.comconnect-srchttps://pixabay.com
- Unsplash:
img-srchttps://images.unsplash.comconnect-srchttps://images.unsplash.com https://api.unsplash.com
- DeepL API Free:
connect-srchttps://api-free.deepl.com
- DeepL API Pro:
connect-srchttps://api.deepl.com
- YouTube:
frame-srchttps://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-srchttps://api.netlify.com
- Cloudflare Pages
connect-srchttps://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://*;
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? Maintainer @kyoshino is available for hire depending on your requirements.
Since Sveltia CMS is still in beta, we expect various problems. Please report any bugs to us so we can make it better for everyone. Feel free to submit feature requests as well. Meanwhile, pull requests may not be accepted for the time being due to limited review resources and the upcoming Svelte 5 migration. As we get closer to the 1.0 release, we’ll be welcoming localizers.
Tips are always welcome! The project hasn’t set up a sponsorship program, but maintainer @kyoshino has a PayPal account.
Last but not least, don’t forget to star this project and spread the word so more users can benefit from the app!
- Introducing Sveltia CMS: a short technical presentation by @kyoshino during the This Week in Svelte online meetup on March 31, 2023 — recording & slides
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
-
Netlify/Decap CMS #5656, #5837, #5972, #6476, #6516, #6930, #6965, #7080, #7105, #7106, #7119, #7176, #7194 — These
removeChildcrashes are common in React apps and seem to be caused by a browser extension or Google Translate. ↩ -
Netlify/Decap CMS #1347, #4629, #6287 — Decap 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. ↩