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 ​

The account menu is accessible from the user avatar in the navigation bar. It provides access to:

  • A link to the user’s profile page (if supported by the backend).
  • A link to the live site. It’s customizable with the site_url configuration option.
  • User Settings, including appearance, language, Content Editor preferences, and Developer Mode.
  • Keyboard shortcuts reference.
  • Sign In with Mobile option, which shows a QR code for passwordless sign-in on mobile devices.
  • Sign Out option to log out of the CMS.

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 in the application settings. 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 various languages. By default, it uses the language set in your browser, if supported. You can change the language at any time in the application settings. The CMS will remember your preference for future sessions.

Currently, the following languages are supported:

  • Arabic
  • Bulgarian
  • Catalan
  • Chinese (China)
  • Croatian
  • Czech
  • Danish
  • Dutch
  • English (Canada)
  • English (UK)
  • English (US)
  • Finnish
  • French
  • Greek
  • Japanese
  • Korean
  • Polish
  • Portuguese (Brazil)
  • Portuguese (Portugal)
  • Russian
  • Spanish (Colombia)
  • Swedish
  • Turkish
  • Ukrainian
  • Vietnamese

When the user’s language becomes available, the CMS will prompt them to switch to it. If the user dismisses the prompt, they can still change the language in the application settings.

Compatibility Note

The following languages are supported in Decap CMS but not yet available in Sveltia CMS:

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.

CSP Consideration

If you’re using a strict Content Security Policy (CSP), you may need to add the connect-src directive with the value https://unpkg.com to your CSP header to allow the CMS to retrieve locale files for the admin interface other than English (US). See the Setting up Content Security Policy section for more details.

Localizers Wanted

Interested in contributing to Sveltia CMS localization? We welcome contributions from the community! You can help translate the CMS interface into your preferred language. Check out the localization guide for instructions on how to get started.

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.

Installing as an App ​

Sveltia CMS is a progressive web app (PWA), which means you can install it on your device and use it like a native application. Offline support is not available yet, but it will be added in a future release.

The application logo and title can be customized with the logo and app_title configuration options. The default title is “Sveltia CMS”.

CSP Consideration

If you’re using a strict Content Security Policy (CSP), you may need to add the manifest-src directive with the value blob: to your CSP header to allow the CMS to be installed as an app. See the Setting up Content Security Policy section for more details.

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.
  • Features that require mouse interaction, such as drag-and-drop, have alternative keyboard-accessible methods.
  • 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 requires version 26 or later; 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.

Make sure to use the latest version of your browser for the best experience.

Copyright © 2026 Kohei Yoshino