sveltia / sveltia-cms

Alternative to Netlify/Decap CMS. Modern, fast, lightweight, Git-based headless CMS. Free & open source. UX-driven development. Made with Svelte.

Sveltia CMS

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.

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

Development status

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, 100+ of them have been effectively solved in Sveltia CMS, with the goal of reaching 150 by GA and 250 in later releases.
  • Let us know if you have any specific issues you’d like to see solved!
• Responding to user feedback
• Implementing our own UX enhancement ideas

Sveltia CMS version 1.0 is expected to ship in Q3 2024. Check our release notes for updates. See also our roadmap.

Features

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!

Compatible with Netlify/Decap CMS

• 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.
• Your existing configuration file can be reused as is.
• Some features are still missing or will not be added though — look at the compatibility info below to see if you can migrate now or soon.

Better UX

• Created and maintained by an experienced UX engineer who loves code, design and marketing. You can expect constant improvements to the user experience (UX) and developer experience (DX) across the platform.
• Offers a modern, intuitive user interface, including an immersive dark mode¹, inspired in part by the Netlify CMS v3 prototype².
• 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 crashes³. 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.

Better performance

• 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)⁴⁵. Sveltia CMS is free of technical debt and virtual DOM overhead.
• No typing lag on input widgets, especially within nested lists and objects⁶.
• 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⁷⁸. It also avoids the slowness and potential API rate limit violations caused by hundreds of requests with Relation widgets⁹.
• 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 CMS¹⁰.
• The upcoming Svelte 5 upgrade is anticipated to deliver a further boost in performance, including accelerated speed and reduced code size.

Better productivity

• You can work with a local Git repository without any extra configuration or proxy server¹¹.
  • Deleting an entry or asset file also deletes the empty enclosing folder, so you don’t have to delete it manually.
  • In addition to a streamlined workflow, it offers great performance by loading files natively through the browser rather than using a slow, ad hoc REST API.
  • It also avoids a number of issues, including the 30 MB file size limit¹², an unknown error with publish_mode¹³, and an unused logo_url¹⁴.
• Eliminates some workflow disruptions 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.
  • The editor closes automatically when an entry is saved.
• You can upload multiple assets at once¹⁷.
• You can delete multiple entries and assets at once.
• Some keyboard shortcuts are available for faster editing.
• 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 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.
• Ensures sufficient contrast between the foreground text and background colours.
• Enabled and disabled buttons can be clearly distinguished²².
• 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.

Better security

• Avoids high/critical severity vulnerabilities through constant dependency updates and frequent releases²³.
• 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.

Better configuration

• Some servers and frameworks 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²⁶.
• Supports a JSON configuration file that can be generated for bulk or complex collections²⁷.

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²⁸²⁹.
• 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 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.
• 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.

Better i18n support

Sveltia CMS has been built with a multilingual architecture from the very beginning. You can expect first-class 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 a city where 150+ languages are spoken.

• Configuration
  • Supports multiple files/folders i18n structure for file collections³¹. 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 as before.
  • Entry-relative media folders can be used in conjunction with the multiple_folders i18n structure³².
  • 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: duplicate field configuration³³³⁴.
  • You can use the {{locale}} template tag in the preview_path collection option to provide site preview links for each language³⁵.
  • You can use a random UUID for an entry slug, which is a good option for locales that write in non-Latin characters.
  • You can 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³⁸.
  • You can embed the locale code in an entry by using widget: hidden along with default: '{{locale}}'³⁹.
• 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.
  • You can easily switch between locales while editing by clicking a button instead of a dropdown list. No internal error is thrown when changing the locale⁴⁰.
  • Language labels appear in human-readable display names instead of ISO 639 language codes, which not everyone is familiar with. (For example, it might be difficult to recognize DE as German, NL as Dutch, or ZH as Chinese.)
  • The List widget’s label and label_singular are not converted to lowercase, which is especially problematic in German, where all nouns are capitalized⁴¹.
• Content editing
  • Integrates DeepL to allow translation of text fields from another locale with one click.
  • You can 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⁴⁷.

Better collections

• You can choose a custom icon for each collection⁴⁸.
• You can add dividers to the collection list.
• Assets stored in a per-collection media folder can be displayed next to the entries.
• You can use nested fields (dot notation) in the path option for a folder collection, e.g. {{fields.state.name}}/{{slug}}⁴⁹.
• You can use Markdown in collection descriptions⁵⁰. Bold, italic, strikethrough, code and links are allowed.
• 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.
• A folder collection filter with a boolean value works as expected⁵².
• Improved entry slugs
  • You can use a random UUID for an entry slug.
  • Entry slug template tags support filter transformations just like summary string template tags⁵³.
  • Single quotes in a slug will be replaced with sanitize_replacement (default: hyphen) rather than being removed⁵⁴.
  • You can set the maximum number of characters for an entry slug with the new slug_length collection option⁵⁵.

Better content editing

• 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 objects⁵⁶.
• When you click on a field in the preview pane, the corresponding field in the edit pane is highlighted. It will be automatically expanded if collapsed⁵⁷.
• The preview pane displays all fields, including each title, making it easier to see which fields are populated.
• Provides better scroll synchronization between the panes when editing or previewing an entry⁵⁸.
• You can use a full regular expression, including flags, 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⁶¹.

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⁶².
• 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 entry⁶⁶.
• 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⁶⁷⁶⁸.
• String values in YAML files can be quoted with the new yaml_quote: true option for a collection, mainly for framework compatibility⁶⁹.

Better widgets

• 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⁶⁴.
• Color
  • 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⁷⁰.
• Hidden
  • The default value is saved when you create a file collection item, not just a folder collection item⁷¹.
  • The default value supports the {{locale}} and {{datetime}} template tags, which will be replaced by the locale code and the current date/time in ISO 8601 format, respectively³⁹⁷².
• List
  • 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.
  • You 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⁷³.
  • An optional List field with no subfield or value is saved as an empty array, rather than nothing⁶⁵.
  • You can enter spaces in a simple text-based List field⁷⁴.
  • You can preview variable types without having to register a preview template⁷⁵.
• Markdown
  • The rich text editor is built with Lexical instead of Slate, which solves various problems found in Netlify/Decap CMS, including fatal application crashes^7677787980.
  • You can set the default editor mode 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.
  • Line breaks are rendered as line breaks in the preview pane according to GitHub Flavored Markdown.
• Object
  • Sveltia CMS offers two ways to have conditional fields in a collection⁸²:
    • You can use variable types (the types option) 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 errors⁸⁴.
• 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 not required in Sveltia CMS, as it defaults to display_fields (and value_field).
• 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.
• 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.
• 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 tab⁹⁰.
    • 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 services will be added later.
  • 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.
• List and Object
  • The summary is displayed correctly when it refers to a Relation field⁹³.
• 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 switches from a dropdown list to radio buttons (single-select) or checkboxes (multi-select) for faster data entry⁹⁵.
• 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).
• UUID
  • In addition to generating UUIDs for entry slugs, Sveltia CMS also 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 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 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.
  • 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.
  • 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 for¹⁰².
• 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 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¹⁰⁴.
• You can add assets using the Quick Add button in the upper right corner of the application.
• Files are uploaded with their original names, without converting uppercase letters and spaces to lowercase letters and hyphens¹⁰⁵.

Compatibility

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.

Current limitations

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.
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, including built-in image and code-block as well as custom components, are not yet supported.

Missing other features? Let us know by filing an issue.

Features not to be implemented

• 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.CMS object will not be implemented. This includes custom backends, if any.

Roadmap

Before the 1.0 release

• Enhanced compatibility with Netlify/Decap CMS
• Tackling more Netlify/Decap CMS issues
• Broad automation test coverage (Vitest + Playwright)
• Svelte 5 migration
• Localization with Fluent
• Documentation
• Marketing site
• Live demo site
• Starter templates for popular frameworks

After the 1.0 release

• Compatibility with Static CMS, a community fork of Netlify CMS
• Roles¹⁰⁶
• Config editor¹⁰⁷
• Mobile support¹⁰⁸
• and more!

Getting started

New users

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.

Migration

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.

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

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.

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

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.

Working around authentication error

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)

Working with a local Git repository

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.

1. Launch the local development server for your frontend framework, typically with npm run dev or pnpm dev.
2. Visit http://localhost:[port]/admin/index.html with 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.
3. 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.
4. Make some changes to your content on Sveltia CMS.
5. See if the produced changes look good using git diff or a GUI like GitHub Desktop.
6. Open the dev site at http://localhost:[port]/ to check the rendered pages.
7. Commit and push the changes if satisfied, or discard them if you’re just testing.

Keep in mind that the local repository support doesn’t perform any Git operations. You’ll have to manually fetch, pull, commit and push all changes using a Git client. In the near future, we’ll figure out if there’s a way to do this in a browser (because netlify-cms-proxy-server actually has undocumented git mode that allows developers to create commits to a local repository).

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.

Using a custom icon for a collection

You can have an icon for each collection for easy identification in the collection list.

1. Visit the Material Symbols page on Google Fonts.
2. Search and select an icon, and copy the icon name displayed on the right panel.
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.

   - name: tags
     label: Tags
+    icon: sell
     create: true
     folder: data/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 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 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 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.

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

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 Language tab.
3. Paste your key to the DeepL API Authentication Key field.
4. Close the Settings dialog.

More translation service providers will be added in the future.

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: data/posts/
    slug: '{{title | localize}}'
    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.

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

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

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

  title: 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}}

Or, for Jekyll, you may want to use the ref property:

i18n:
  canonical_slug:
    key: ref

Disabling non-default locale content

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: false

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.

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

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, GitLab, 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 selecting Publish Changes under the Account button in the top right corner of the CMS. 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;

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
    

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

Support & feedback

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

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

Contributions

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 a better CMS experience!

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

• Made with Svelte
• LogRocket Blog

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 #3267 ↩

2. Netlify/Decap CMS #2557 ↩

3. Netlify/Decap CMS #5656, #5837, #5972, #6476, #6516, #6930, #6965, #7080, #7105, #7106, #7119, #7176, #7194 — These removeChild crashes are common in React apps and seem to be caused by a browser extension or Google Translate. ↩

4. Netlify/Decap CMS #328 ↩

5. Netlify/Decap CMS #3853 ↩

6. Netlify/Decap CMS #3415, #6565 ↩

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

8. Netlify/Decap CMS #6034 ↩

9. Netlify/Decap CMS #4635, #5920, #6410 ↩ ↩²

10. Netlify/Decap CMS #946 ↩

11. Netlify/Decap CMS #3285, #7030, #7067 ↩

12. Netlify/Decap CMS #6731 ↩

13. Netlify/Decap CMS #5472 ↩

14. Netlify/Decap CMS #5752 ↩

15. Netlify/Decap CMS #2822 ↩

16. Netlify/Decap CMS #5055, #5470, #6989 ↩

17. Netlify/Decap CMS #1032 ↩ ↩²

18. Netlify/Decap CMS #1045 ↩

19. Netlify/Decap CMS #3353 ↩

20. Netlify/Decap CMS #1333 ↩

21. Netlify/Decap CMS #7077 ↩

22. Netlify/Decap CMS #5701 ↩

23. Netlify/Decap CMS #6513 ↩

24. Netlify/Decap CMS #6829 ↩

25. Netlify/Decap CMS #2138 ↩

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

27. Netlify/Decap CMS #386 ↩

28. Netlify/Decap CMS #4417 ↩

29. Netlify/Decap CMS #3285 ↩

30. Netlify/Decap CMS #6831 ↩

31. Netlify/Decap CMS #5280 ↩

32. Netlify/Decap CMS #4781 ↩

33. Netlify/Decap CMS #4386 ↩

34. Netlify/Decap CMS #6978 ↩

35. Netlify/Decap CMS #4877 ↩

36. Netlify/Decap CMS #5493, #6600 ↩

37. Netlify/Decap CMS #4645 ↩

38. Netlify/Decap CMS #1685 ↩

39. Netlify/Decap CMS #5969 ↩ ↩²

40. Netlify/Decap CMS #6307 ↩

41. Netlify/Decap CMS #3856 ↩

42. Netlify/Decap CMS #6932 ↩

43. Netlify/Decap CMS #7086 ↩

44. Netlify/Decap CMS #7142 ↩

45. Netlify/Decap CMS #1347, #4629, #6287, #6826 — 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. ↩

46. Netlify/Decap CMS #4480, #6353 ↩

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

48. Netlify/Decap CMS #1040 ↩

49. Netlify/Decap CMS #7192 ↩

50. Netlify/Decap CMS #5726 ↩

51. Netlify/Decap CMS #4255 ↩

52. Netlify/Decap CMS #1000 ↩

53. Netlify/Decap CMS #4783 ↩

54. Netlify/Decap CMS #7147 ↩

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

56. Netlify/Decap CMS #5630 ↩

57. Netlify/Decap CMS #7011 ↩

58. Netlify/Decap CMS #1466 ↩

59. Netlify/Decap CMS #6500 ↩

60. Netlify/Decap CMS #1654 ↩

61. Netlify/Decap CMS #4147 ↩

62. Netlify/Decap CMS #6759, #6901 ↩

63. Netlify/Decap CMS #1424 ↩ ↩²

64. Netlify/Decap CMS #4726 ↩ ↩²

65. Netlify/Decap CMS #2613 ↩ ↩²

66. Netlify/Decap CMS #1481 ↩

67. Netlify/Decap CMS #1382 ↩

68. Netlify/Decap CMS #6994 ↩

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

70. Netlify/Decap CMS #725 ↩

71. Netlify/Decap CMS #2294, #3046, #4363 ↩

72. Netlify/Decap CMS #1270 ↩

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

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

75. Netlify/Decap CMS #2307 ↩

76. Netlify/Decap CMS #512, #5673, #6707 ↩

77. Netlify/Decap CMS #6482 ↩

78. Netlify/Decap CMS #6999, #7000, #7001, #7152 ↩

79. Netlify/Decap CMS #7047 ↩

80. Netlify/Decap CMS #7123 ↩

81. Netlify/Decap CMS #5125 ↩

82. Netlify/Decap CMS #565 ↩

83. Netlify/Decap CMS #1267 ↩

84. Netlify/Decap CMS #2103 ↩

85. Netlify/Decap CMS #4738 ↩

86. Netlify/Decap CMS #4954 ↩

87. Netlify/Decap CMS #5487 ↩

88. Netlify/Decap CMS #6515 ↩

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

90. Netlify/Decap CMS #5910 ↩

91. Netlify/Decap CMS #4563 ↩

92. Netlify/Decap CMS #2579 ↩

93. Netlify/Decap CMS #6325 ↩

94. Netlify/Decap CMS #6508 ↩

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

96. Netlify/Decap CMS #6819 ↩

97. Netlify/Decap CMS #1975, #3712 ↩

98. Netlify/Decap CMS #962 ↩

99. Netlify/Decap CMS #3240 ↩

100. Netlify/Decap CMS #4209 ↩

101. Netlify/Decap CMS #5569 ↩

102. Netlify/Decap CMS #1984 ↩

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

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

105. Netlify/Decap CMS #4288 ↩

106. Netlify/Decap CMS #2 ↩

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

108. Netlify/Decap CMS #441 ↩

109. Netlify/Decap CMS #3671 ↩

sveltia-cms's Issues

File System Access API Chrome Android Not Work

OS : Android 13
Browser : Chrome 112.0.5615.135

When I use the local Git repository and open the admin page in Chrome it shows like the image below.

I found this page which shows that there is a "File System Access API" bug on Chrome Android

Thank You🙏

Support for toml-format not working

When "toml" is selected as format (/extension), the "Save" of a new Element, ...
... generates an empty toml-file, if working on the local repo.
... throws an Error in the CMS-UI, if working with github.

Show UI feedback when format / extension are incorrect

I encountered the following issue whereby the config did not show an error (which makes sense) and the UI shows This collection has no entries yet. My collection settings were:

collections:
  - label: "Widgets"
    name: "widgets"
    folder: "content/widgets/"
    extension: "md"
    format: "yaml"

The UX bug (as I would call it) is that Sveltia did not return content in the UI nor inform the user as to why there was no content.

I assumed this is because Sveltia tried to parse the entire file as yaml but since it was a .md + frontmatter file, Sveltia failed silently. Converting the files .yaml and updating extension: "yaml" worked, but incorrect for my SSG.

Changing the value to format: "frontmatter" makes all the data correctly show, as expected 😄

Suggestions

1. Show user friendly message in UI

## Oops

We found content, but were unable to display it.
Please make sure your settings and files are correct:

folder: "content/widgets/"
extension: "md"
format: yaml

2. Console log a parsing error (if there is?) such as this so there's a clue.

Relates to #17 but I think is discreet enough to warrant a separate issue and path to resolution.

Stuck on Login Page with no content on GitHub backend

See comments from @0x0m0t0 in #43. Should be an easy fix.

no line length for editing content with preview turned off...

When editing content with preview turned off (nobody wants or uses the preview pane that I know of, including myself)

there is no line length limit, so the editing experience is severely compromised:

for metadata:

for body copy (content, etc...)

a max line length of 60 to 80 characters would be good, or allowing the user to change it as well. Also, the generally typographic settings are not so hot, as line spacing is not good, font size, etc...

My team and the other teams and people I know who use a CMS NEVER use preview mode, as it is basically useless in every possible conceivable way. They all want an interface more like google docs, MS Word, even Notion style:

Add custom svelte components:

Writing without distractions:

Just want to put these ideas in your heads cuz this is something I really need...

Local repository not recognizing posts from remote

I have a Sveltekit static site with Sveltia in a Github repo deployed on Netlify. The deployed version of Sveltia correctly recognizes all posts. However when I run the site in development mode locally and select "Work with local repository", Sveltia only displays the posts that were created using the local version. The posts that were pulled from the Github repo are not shown.

If no matching files (md,json,...) are found, graphql request is wrong

When the folder provided in the config.yml doesn't exist/has no matching files inside, this returns empty filelists, which causes the graphql query to be incorrect.

It returns:

"query {\n    repository(owner: \"<OWNER>\", name: \"<NAME>\") {\n      \n    }\n  }"

(notice the curly brackets with only whitespace characters inside)

GitHub then returns:

{"errors":[{"message":"Parse error on \"}\" (RCURLY) at [4, 5]","locations":[{"line":4,"column":5}]}]}

Which then causes an Error (Chromium) in the javascript stopping the whole Load process:

caught (in promise) TypeError: Cannot destructure property 'repository' of '(intermediate value)' as it is undefined.

This should either:
- load the CMS with an empty list if folder is empty
- notify the User that folder doesn't exist

Custom Theme-ability...

I would absolutely love to be able to customize the look and feel of the CMS UI in the following ways:

• Typography
• Colors
• • Toolbar Color
• • Toolbar Font Color
• Logo
• Spacing
• • Input Field height and border-radius
• • List row height
• • Paragraph Height
• • Line Height
• • Metadata spacing
• • other things I cannot think of at the moment
• Font Size Everywhere

I would basically love the ability to customize the general look and feel for clients and configure all that in a css file or something...

Please consider this in the near future, thank you ( ありがとう :-)

Support multiple image selections with default media library

- { name: "img", label: "Image", widget: image, allow_multiple: true }

The allow_multiple-option of the image-widget seems to not be supported.
Or just the media-library does not support multiple-selection, which would make the option in line with the decap-cms-Doc

allow_multiple: (default: true) when set to false, multiple selection will be disabled even if the media library extension supports it

add error handling of github api errors

Time to time GitHub API can go down, and make responses with 5xx codes and body like that:

{
   "data": null,
   "errors":[
      {
         "message":"Something went wrong while executing your query. This may be the result of a timeout, or it could be a GitHub bug. Please include `DF4A:6E1B:1D670F9:1DAA64D:64E7DC75` when reporting this issue."
      }
   ]
}

It would be nice to show some error modal with "Retry" button to retry the request.
No errors silently ignored :(

if list `collapsed: true`, adding new element collapses it after every input

first noticed:

          - name: "subjects"
            label: "Subjects"
            widget: list
            collapsed: true
            field: { label: "Subject", name: "subject", widget: string }

but seems to happen for all widget-types

If `widget: object` is optional, it can't be saved empty if containing required fields

      - name: "audio"
        label: "Audio"
        widget: object
        required: false
        collapsed: true
        fields:
          - { name: "src", label: "Source-URL", widget: "string" }
          - { name: "url", label: "Webpage-URL", widget: "string" }
          - { name: "img", label: "Image", widget: image, required: false }
          - { name: "descr", label: "Description", widget: "string", required: false }

src & url have to be set.

You should be able to save, if an optional object is empty

Include branch in Git Repository link

My site is configured to use a branch other than main/master. The Git Repository link always takes me back to main/master. Can this be configured to go to the branch specified in config.yml instead?

`field:` of `widget: list` not working in newLine

if field: is placed in newLine as - { ... } its content

• vanishes when a new element is added by the button
• does not get saved correctly

I'm not sure if this is a sveltia-bug, wrong config (not catched) or a problem with YAML-definition

Any way to filter/group by date past or future?

I have events, that dependent on their date get displayed as upcoming events, or as "highlights" with additional videos, images, comments.
I would like to easily be able to filter/group for this, to easily edit only future or only past events.

Maybe the filter/group-option could provide "current time/date(day,month,year)"-"template tags", and to compare two/multiple values.

    view_filters:
      - label: 'upcoming Events'
        field: datetime
        greater: '{{currentDate}}'
      - label: 'Highlights'
        field: datetime
        lower: '{{currentDate}}'

    view_groups:
      - label: "upcoming?"
        field: datetime
        compare: '{{currentDate}}'

Cannot sign in locally if Netlify CMS proxy server has been previously used

Hello 👋🏻 I'm very excited about sveltia-cms 😄 I tested it a couple months ago with the local Git repository option and it is all looking wonderfully well done.

However, my deployment still required decap-cms and I reconfigured my dev environment. Since then I cannot get serving locally working again. I get this error:

My config.yml file works just fine with the decap npx netlify-cms-proxy-server so I am sure i'm just misunderstanding something.

Perhaps putting an example config or documenting where sveltia-cms differs from decap-cms would be helpful to me and others.

Anyway, thanks for your hard and really polished work here! Looking forward to future releases 😀

markdown editor

Would be nice to add some markdown editor for non tech writers.
For example https://github.com/BearToCode/carta-md or something else

Addition of new `widget: list`-element disables scrolling until clicked

If you add a new element in al list-widget, the page can't be scrolled until you click somewhere on the page.

Pre-existing images not displayed in gallery

First of all, thank you for making this. I much prefer using this to Decap CMS.

I have a gallery configured like so in config.yml:

collections: # A list of collections the CMS should be able to edit
  - name: 'myGallery' 
    label: 'My Gallery'
    folder: 'src/routes/myGallery'
    create: true
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Body', name: 'body', widget: 'markdown' }
      - { label: 'Thumbnail', name: 'thumbnail', widget: 'image' }
      - label: 'Gallery'
        name: 'galleryImages'
        widget: 'list'
        summary: '{{fields.image}}'
        field: { label: Image, name: image, widget: image }

When I go to the UI, pre-existing images don't appear in the gallery, even though they are in the Markdown metadata under galleryImages. If I re-add the images via Svelta CMS, the images appear in the UI. However, the resulting Markdown is unchanged, and if I reload the post in the UI, the images disappear again.

Offer UI feedback when config.yml incorrect, and other issue...?

I ran into another bug. After successfully doing the oauth dance, logging in, seeing request return 200

https://api.github.com/repos/user/my-repo/git/trees/a92c534exxx.......

Sveltia UI updates and says Loading Site Data... but errors with following:

Uncaught (in promise) TypeError: re(...).findLast is not a function
    ry https://example.org/admin/sveltia-cms.js:387
    ry https://example.org/admin/sveltia-cms.js:387
    xO https://example.org/admin/sveltia-cms.js:401
    update https://example.org/admin/sveltia-cms.js:439
    update https://example.org/admin/sveltia-cms.js:439
    hv https://example.org/admin/sveltia-cms.js:1
    He https://example.org/admin/sveltia-cms.js:1
    promise callback*db https://example.org/admin/sveltia-cms.js:1
    pv https://example.org/admin/sveltia-cms.js:1
    ctx https://example.org/admin/sveltia-cms.js:1
    fU https://example.org/admin/sveltia-cms.js:452
    s https://example.org/admin/sveltia-cms.js:1
    De https://example.org/admin/sveltia-cms.js:1
    h https://example.org/admin/sveltia-cms.js:439
    EA https://example.org/admin/sveltia-cms.js:439
    EA https://example.org/admin/sveltia-cms.js:439
    ab https://example.org/admin/sveltia-cms.js:1
    $/< https://example.org/admin/sveltia-cms.js:1
    He https://example.org/admin/sveltia-cms.js:1
    promise callback*db https://example.org/admin/sveltia-cms.js:1
    pv https://example.org/admin/sveltia-cms.js:1
    ctx https://example.org/admin/sveltia-cms.js:1
    jA https://example.org/admin/sveltia-cms.js:439
    s https://example.org/admin/sveltia-cms.js:1
    f4 https://example.org/admin/sveltia-cms.js:217
    jA https://example.org/admin/sveltia-cms.js:439
    ab https://example.org/admin/sveltia-cms.js:1
    $/< https://example.org/admin/sveltia-cms.js:1
    He https://example.org/admin/sveltia-cms.js:1
    W https://example.org/admin/sveltia-cms.js:1
    dU https://example.org/admin/sveltia-cms.js:452
    kU https://example.org/admin/sveltia-cms.js:452
    ev https://example.org/admin/sveltia-cms.js:1
    <anonymous> https://example.org/admin/sveltia-cms.js:452

When switching to decap-cms / netlify-cms.js I see the following error:

Error loading the CMS configuration
Config Errors:

'collections[1].fields[2].fields[0]' must have required property 'search_fields'
...

Check your config.yml file.

After fixing a few bugs in my config and properly loading the content in Decap, I still see above error in Sveltia.

What is also interesting is the config works fine when using localhost version.

Unwanted file-extension-change (`.svg` -> `.svg+xml`)

The filename generated by #9 for an 'svg'-file has the extension .svg+xml.
While the Mime-Type is image/svg+xml, this should probably be .svg
Registration of media type image/svg+xml
In any case, should the extension not change when uploading an `.svg´-file

[feature request] Preview customization

Being able to customize the previews is an amazing feature in Decap. I use it to import my global css so that the content in the preview looks just like the page the content is on!

Any plans to support this feature? Or perhaps I missed it?

Cannot read properties of undefined (reading 'i18n')

Due to my last bug finding success- after unsuccessfully fiddling with configs, I decided to open this issue. Hugo is my SSG.

The bug is present with the following configs:

# Path
content/en/collection/
content/english/collection/

# Config
i18n:
  structure: multiple_folders

# Path
content.en/my-collection/

# Config
i18n:
  structure: single_file

# Path
content/my-collection/file.en.md

# Config
i18n:
  structure: multiple_files

My i18n exists themes/my-theme/i18n/ but this should not matter as I understand it, but I did create a i18n/ directory in the root.

The following view works fine:

• http://localhost:1313/admin/#/collections/my-collection

The bug shows up in the log when clicking on an entry of New button, or loaded via URL.

I am only testing this with local repo file system access, not Github.

loading config returns 404 when site is non-root of domain

When loading Sveltia CMS v.0.3.5 from the following path:

https://example.org/my-actual-site/admin/

It returns 404 for the config.yml as it tries to load from:

https://example.org/admin/

Changes to `widget: string` with `multiple: true` can't be saved alone

Changes to widget: string with multiple: true can only be saved if another field was added before.
If another field is edited after, the change to the "string-multiple"-field is reverted.
Also while editing, the changes are not visualized in the preview.

Allow for local development in other browsers: Firefox

Hello, it seems like local development is only enabled in Chrome or Edge.

Not all chromium browsers are supported though, I cannot access the admin panel in Brave.

Would it be possible to include Firefox?

Files config results in an error

Here is the config:

media_folder: "static/uploads/images"
public_folder: "/uploads"
publish_mode: editorial_workflow

collections:
  - label: "Pages"
    name: "pages"
    files:
      - label: "Requests"
        name: "requests"
        file: "src/content/requests.json"
        fields:
          - { label: "Title", name: "title", widget: "string" }

Seems like the error is coming from here with otherNames receiving [undefined].

sveltia-cms/src/lib/services/utils/files.js

Line 191 in b0285df

const dupName = otherNames.sort().findLast((p) => p.match(regex));

The exact error message is:

Feature Request: Demo Deployment

Hey @kyoshino,

this looks like a wonderful project! Thank you for all this work!

To evaluate the tool it would be very helpful if there was a public demo instance/deployment (e.g. on GitHub Pages). It doesn't need to be full functional, but it would be awesome if we could look at the UI/see the Admin interface in an easy way, without cloning it locally.

Best of luck with this project. I will be following very closely and look forward to having a GitLab backend in the future!

"The backend is not defined in the configuration file"

On a fairly clean install, I see this:

Minimally reproducible example at https://storied-cassata-937890.netlify.app/admin/ with the config being loaded from https://storied-cassata-937890.netlify.app/admin/config.yml, which includes this:

backend:
  name: git-gateway
  branch: main

Am I forgetting a config step? It worked with DecapCMS.

if we have one article = one directory setup, then folder not deleted upon article removal.

If we make use of we use Folder Collections Path and Folder Collections Media and Public Folder for content structure setup we have issue with folder deletion.

We got structure like that:

content/article1/index.md
content/article1/image1.jpg
content/article2/index.md
content/article2/image2.jpg

If we are going to delete article1 from sveltia, then content/article1/index.md removed, but the folder with contents (content/article1/image1.jpg) still persists. We expect that folder deleted with an article and all related images.

Proposed solution: add flag to delete folder with all content.

Weird issue when using local Repo

For some reason, whenever I try to use my local repo, it doesn't work and I get the error: "sveltia-cms.js:442 Uncaught (in promise) DOMException: A requested file or directory could not be found at the time an operation was processed." in the console... It worked before, but now seemingly out of nowhere, it doesn't anymore.

if "widget: image" is direct child of "widget: list", the original filename isn't used

- name: "images"
  label: "Images"
  label_singular: "Image"
  widget: list
  fields:
    - { name: "img", label: "Image", widget: image}

In this case the uploaded images get saved as "image-1683526164572.png" for example.
In other cases the original file name get's used to save the uploaded file.
As far as I can tell the only relevant difference would be it being a direct descendant of a list.

slug configuration for svelte-kit

I have a few sites on a svelte kit, and they all mostly depend on https://github.com/pngwn/MDsveX
It means that content stored inside repo in files like that:

src/routes/letters/Ivan/+page.svelte.md
src/routes/letters/Piotr/+page.svelte.md
...
src/routes/letters/{slug}/+page.svelte.md

or

src/routes/blog/my-first-post/+page.svelte.md
src/routes/blog/my-second-post/+page.svelte.md
...
src/routes/blog/{slug}/+page.svelte.md

I can't find a way, how to explain which files should be edited in collections config.

Actually I tried

    folder: "/src/routes/letters/{{slug}}"
    slug: "+page.svelte.md"

but it ignores interpolation.
Or:

    folder: "/src/routes/letters/"
    slug: "{{slug}}/+page.svelte.md"

but it ignores folder creation...

It there a way to store each file in separate folder?

Also is there some option to store assets in the articles folder?

Display if changes are deployed

DecapCMS seems to have something like this for its editorial workflow.
Seeing if/when the made changes are deployed or if there was an error would be very beneficial for content editors (and developers).

Allow external image src

I have set the media_folder setting to a folder within the /src folder of my Sveltekit site, as I want to use vite-imagetools to transform and optimize all images. This means that the images would not be available through a direct path like they would in /static, and so their thumbnails don't show up in Sveltia's image library. Thus I would like to see external image urls being allowed for the public_folder setting. Maybe it would be even better to have a separate option for the path of Sveltia's image thumbnails vs the path written into the markdown files.

media-select-popup broken

clicking on replace-/add-button for image-widget opens an empty <form> and blocks the page until it's reloaded.
Of course you also can't add images like this.
I don't know since which version this happens, as I just noticed it.

Stuck on Login Page

When I login with github, I get stuck on login page and it just leaves the message "Loading Site Data".

Relation widget `value_field` with string templates gets saved with brackets

"{{route}}#{{sections.*.id}}" still not working.
gets saved with the {{}} ({{/}}#{{about-me}})

Originally posted by @frankbits in #19 (comment)

This also breaks how the current data is shown in the sveltia-UI after reopening the saved collection

Sort, Filter and Group by element in "list" widget

I have a widget that with multiple values inside, would it be possible to make "sortable_fields" accept something like "list[0].field" to sort by that field?

if `identifier_field` is set (not default to title), `slug` has to be also set

An entry can't be saved, if identifier_field is set, but not slug.
identifier_field should also change the default of slug

https://decapcms.org/docs/configuration-options/#slug:

a different field can be used via identifier_field

Also it can't anymore be saved, if no title-field exists when no identifier_field or slug is set.
I've had a collection set up this way, and it just saved the entries with a random id (chars and numbers).

`widget: number` can save `0` only if it was previously another number

When you set a number-widget to 0 while it was previously empty, the save-button des not get activated.
If you change something else too, to activate the save-button, the 0-field does get saved as if it as empty.

Also the field saves an empty string if left empty, even when required: false

DateTime-widget loads `pm`-time as `am`

If DateTime has for example 20:00 saved, opening the element in the CMS loads DateTime with 08:00.

The check if the element has been altered and can be saved, does check correctly.
-> opening + save = unwanted change to datetime

"String templates" don't work with nested fields (+ wildcard) in `display_fields` and `value_field`

In widget: relation string templates ({{field}}) only work in display_fields on not nested fields (+ wildcard).
If it is used with a nested field (e.g. {{sections.*.id}}) no content is visible in the editor-dropdown-selector

Unable to insert Unsplash API key

Unable to enter the unsplash API key.

After getting the key as instructed by the links, I'm unable to press the 'insert' button.

Ability to upload Videos to Media Gallery

I've noticed that it the media gallery is somewhat able to handle Videos. For example, it shows the video (without a thumbnail) in, but can't play it or provide full information about it in the Sidebar, for example the Length is listed as "-". Is this a partial implementation of Support for Videos that is still coming? Would appreciate it, if it fully worked sometime.

`widget: relation` with `multiple:true` wrong order of elements in UI

When you use the widget relation with the option multiple enabled, the selected elements get displayed in alphabetical order in the CMS-UI (Editor & Preview).
They get saved in the corresponding file correctly sorted by insert-order

Nothing can be right/control clicked...why?

Just noticed this, and it feels a bit odd, but nothing in the UI seems to be right/control clickable...not sure if that is intentional or not, but...I don't know...feels a bit off to me...

That's all :-)

relation to nested field not working

This field works in decapCMS:

- { name: "section", label: "Section", widget: relation, collection: "pages", value_field: "sections.*.id", display_fields: ["route", "sections.*.id"], search_fields: ["sections.*.id"] }

in sveltiaCMS nested fields can not be accessed.

DecapCMS-Doc:

value_field: (required) name of the field from the referenced collection whose value will be stored for the relation. For nested fields, separate each subfield with a . (e.g. name.first). For list fields use a wildcard * to target all list items (e.g. categories.*).

would be nice to have this feature a documented (also not listed as missing in README.md)

• accessing nested fields
• *-wildcard for lists (also if types)
• save multiple fields of related collection? (not in decapCMS)

GitLab backend

For self-hosted deployments of websites, it sometimes can be useful or required to choose to work with git repositories in GitLab instead of GitHub.

As a Sveltia CMS user, I need to use it with a custom GitLab instance, in order to deploy to our own GitLab Pages environment.

This could extend the availability of Sveltia CMS by large means to wide user groups.

The GitLab GraphQL API is documented in:

• GraphQL API | GitLab

If no custom instance is available, their hosted https://gitlab.com instance provides the same interfaces and allows GitHub login.

Rich Text Editor Thoughts XD

Hi!

So, the rich text editor is something that the teams I am working with will need before we can use Sveltia, and I have some thoughts...

What I ultimately want is a rich text editor where I can create custom svelte components that can be used as "blocks" that the content authors and editors are able to use in the composition of their writing. I want to be able to make custom components for them at their request, and/or offer a library for them to pick and choose from to add to their individual editing experience...

I believe Decep CMS uses Slate under the hood, but there are other more modern solutions like Prose Mirror that you might want to (or already are) considering...

I also recently found some interesting svelte based projects as well that might be useful:

tiptap, of course - https://github.com/ueberdosis/tiptap
svelte wrapper for tiptap - https://github.com/andheller/svelte-tiptap
Editable Website - https://github.com/michael/editable-website
Website for Editable Website to check it out - https://editable.website/
Svelte Prosemirror - https://github.com/TeemuKoivisto/svelte-prosemirror

all cool and interesting projects that I am learning more about to help my own understanding of these things.

Anyway, just wanted to share these resources as you work on rich text editing for Sveltia XD