Sveltia CMS

Appearance

User Interface Overview ​

This section provides an overview of the application user interface (UI) of Sveltia CMS. It covers the main features and components of the UI, including navigation, content editing, asset management, and customization options.

Accessing the Admin UI ​

You can access the Sveltia CMS admin user interface by navigating to the URL where you deployed the index.html file in your static files folder. For example, if you deployed your site to https://example.com and placed Sveltia CMS in the admin folder, you can access it at https://example.com/admin/.

Main Components ​

Login Screen ​

The login screen allows users to authenticate with the configured backend using the regular OAuth flow or an access token. See each backend documentation for more details on authentication methods.

When working locally, the local workflow option is also available, allowing you to select a local folder for storing content.

Users can sign in using the OAuth flow even locally. The OAuth client should allow http://localhost as a valid redirect URI for this to work.

The Sveltia CMS UI features a global navigation bar at the top of the screen, providing easy access to key sections of the application listed below. It also includes a user menu for account settings and preferences.

There is also the Quick Add button (+ icon) in the navigation bar, which allows users to quickly create a new entry or upload new assets from anywhere in the CMS.

Main Pages ​

The Sveltia CMS UI consists of several main pages:

Account Menu ​

Help Menu ​

Settings Dialog ​

Users can personalize the application with various settings, including appearance and language. Developer Mode can also be enabled, which enables certain features and displays the CMS version number.

General Features ​

Content editing in Sveltia CMS is designed to be intuitive and efficient. Key features include:

Themes ​

You can switch between light and dark themes in the CMS interface. The theme can be changed from the user menu. By default, it follows your system preference.

More appearance options will be added in future releases. Stay tuned!

Localization ​

The CMS interface is available in multiple languages. By default, it uses the language set in your browser. You can change the language at any time from the user menu.

The UI supports RTL (right-to-left) languages as well, and the layout will adjust accordingly when an RTL language is selected.

Note for Netlify/Decap CMS users

Unlike Netlify CMS and Decap CMS, Sveltia CMS does not require you to configure the app UI locale. The CMS automatically detects and applies your preferred language based on your browser settings. The CMS.registerLocale API method is a noop and the locale configuration option is ignored in Sveltia CMS.

More Languages Coming Soon

Currently, only English and Japanese are supported. More languages will be added before the 1.0 release. Interested in contributing a translation? Check out the localization guide.

Keyboard Shortcuts ​

The following keyboard shortcuts are available in the Sveltia CMS UI:

  • 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)

Mobile Support ​

The Sveltia CMS UI is fully responsive and optimized for mobile devices, providing a seamless experience across different screen sizes, including smartphones and tablets.

When you use the CMS for the first time on desktop, it will show a notification suggesting you to try it on mobile for the best experience. It will show a QR code for passwordless sign-in. Your settings will be automatically copied when you sign via the QR code.

If you dismiss the notification, the mobile login option will still be available in the user menu.

Developer Mode ​

Developer Mode can be enabled from the Settings panel. When enabled, it provides additional features useful for developers, such as:

  • Displays the Help menu in the navigation bar, including a link to the release notes with the current CMS version number.
  • Additional debugging information in the browser console.
  • The browser’s native context menu.

Accessibility ​

Sveltia CMS is built with accessibility as a core principle, ensuring all users can effectively navigate and use the application.

WCAG Compliance

We’ll conduct an accessibility self-audit and address any issues before the 1.0 release to make sure Sveltia CMS meets the WCAG 2.2 standard. If you encounter any accessibility issues, please report them by creating an issue on our GitHub repository.

Keyboard Navigation ​

  • Navigate through UI elements using the Tab, Space, Enter, and arrow keys.
  • Other keyboard shortcuts are also available for common actions.
  • Our custom UI component library is designed for optimal keyboard usability without compromising accessibility.

Screen Reader Support ​

  • Full WAI-ARIA support for screen readers like NVDA and VoiceOver.
  • Announcements are read out when you navigate to another page.
  • The rich text editor is built with Lexical, which follows accessibility best practices and includes Dragon NaturallySpeaking support.

Visual Design ​

  • Sufficient contrast between foreground text and background colors.
  • Links are underlined by default for easy recognition (configurable in Accessibility Settings).

System Preferences ​

Supported Browsers ​

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

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

Released under the MIT License.

Copyright © 2026 Kohei Yoshino