Customization

Sveltia CMS offers various customization options to tailor the admin interface and functionality to your specific needs. This guide provides an overview of the available customization features in Sveltia CMS.

Site URL

The site_url configuration option allows you to specify the URL of the published site. It’s used for the link to the live site in the admin interface, entry preview links generated with the preview_path option, and public asset URLs. If omitted, it defaults to the origin of the CMS page (location.origin). It must be an absolute URL.

To link the admin interface to a different URL than the one used for previews and assets, use the display_url option.

YAML

site_url: https://example.com

TOML

site_url = "https://example.com"

JSON

{
  "site_url": "https://example.com"
}

JavaScript

{
  site_url: 'https://example.com',
}

Display URL

The display_url configuration option allows you to specify the URL opened by the link to the live site in the admin interface, which is available in the account menu and on the custom logo in the application header. Unlike site_url, it doesn’t affect preview links or asset URLs. If omitted, it defaults to the site_url option value.

The value can be an absolute URL or a path relative to the CMS origin.

YAML

site_url: https://example.com
display_url: https://www.example.com/blog/

TOML

site_url = "https://example.com"
display_url = "https://www.example.com/blog/"

JSON

{
  "site_url": "https://example.com",
  "display_url": "https://www.example.com/blog/"
}

JavaScript

{
  site_url: 'https://example.com',
  display_url: 'https://www.example.com/blog/',
}

Logout Redirect URL

The logout_redirect_url configuration option allows you to specify a custom URL to which users will be redirected after they log out of the Sveltia CMS admin interface. This can be useful for directing users back to the main website or a specific landing page. If omitted, users stay on the CMS sign-in page after logging out.

YAML

logout_redirect_url: https://example.com/logged-out

TOML

logout_redirect_url = "https://example.com/logged-out"

JSON

{
  "logout_redirect_url": "https://example.com/logged-out"
}

JavaScript

{
  logout_redirect_url: 'https://example.com/logged-out',
}

Custom Logo

You can customize the logo displayed in the Sveltia CMS admin interface by specifying a custom logo URL in the configuration file. This allows you to replace the default Sveltia CMS logo with your own branding.

The logo configuration option, defined at the root level of the configuration file, accepts an object with the following properties:

• src: The URL or path to the custom logo image. If omitted, the deprecated logo_url option is used, if defined, and the Sveltia CMS logo otherwise. (Optional)
• show_in_header: A boolean indicating whether to display the logo in the header. It has no effect without a custom logo. (Optional, default: true)

Configuration example:

YAML

logo:
  src: /path/to/your/logo.png
  show_in_header: true

TOML

[logo]
src = "/path/to/your/logo.png"
show_in_header = true

JSON

{
  "logo": {
    "src": "/path/to/your/logo.png",
    "show_in_header": true
  }
}

JavaScript

{
  logo: {
    src: '/path/to/your/logo.png',
    show_in_header: true,
  },
}

Breaking change from Netlify/Decap CMS

In Sveltia CMS, the show_in_header option defaults to true, so your logo appears in the header without extra configuration. In Decap CMS, the logo is shown in the header only when the option is explicitly set to true. To hide the logo from the header, set show_in_header to false.

For backward compatibility, the logo_url configuration option is still supported but deprecated. It is recommended to use the logo object for better flexibility and future-proofing.

YAML

logo_url: /path/to/your/logo.png

TOML

logo_url = "/path/to/your/logo.png"

JSON

{
  "logo_url": "/path/to/your/logo.png"
}

JavaScript

{
  logo_url: '/path/to/your/logo.png',
}

Where the Logo Appears

• Login page
• Header of the admin interface (when show_in_header is set to true)
• Browser tab (favicon)
• Application icon when installed as an app on desktop and mobile devices

Logo Image Requirements

• Both raster (PNG, WebP, JPEG) and vector (SVG) formats are supported
• A square image works best
• The recommended size is 512 × 512 pixels, but the logo will be scaled down to fit the interface
• It is recommended to use a transparent background for better visual integration with the interface, especially for dark mode users

Custom Application Title

With the app_title configuration option, you can set a custom title for the Sveltia CMS admin interface. This title will be displayed on the login page and in the browser tab. You may want to replace the default “Sveltia CMS” title with your company name or a specific title that reflects the purpose of the admin interface.

YAML

app_title: Acme Inc. Site Admin

TOML

app_title = "Acme Inc. Site Admin"

JSON

{
  "app_title": "Acme Inc. Site Admin"
}

JavaScript

{
  app_title: 'Acme Inc. Site Admin',
}

Note that this is not a white-label solution, so the name of Sveltia CMS will remain visible in some places. When a custom title is set, a small ”Powered by Sveltia CMS” label will appear in the footer of the login page.

Custom Mount Element

Sveltia CMS mounts the admin interface to the <body> element by default. However, you can specify a custom mount element by adding a <div> with a specific ID in your HTML. This way, you can embed the CMS admin interface within a specific section of your webpage, allowing to have a navigation bar or other content alongside the CMS.

The ID of the custom mount element is nc-root.

<div id="nc-root"></div>

Make sure to properly style the custom mount element to ensure the CMS interface displays correctly within your layout. You may need to set dimensions, overflow properties, or other CSS styles depending on your design requirements. Otherwise, the admin interface may not render as expected.

Sveltia CMS will automatically detect the presence of the nc-root element and mount the admin interface there instead of the default <body> element.

TIP

nc-root is short for “Netlify CMS Root,” a naming convention carried over from Netlify/Decap CMS to maintain familiarity for users transitioning between the two systems.

Styling Fields

Every field in the Edit Pane has the data-field-type, data-key-path and data-typed-key-path attributes, so you can style specific fields with CSS on your admin page:

<style>
  [data-key-path='title'] input {
    font-size: 1.5em;
  }
</style>

The default Preview Pane marks each field with the same attributes. See Styling Specific Fields for what the attributes contain and how to style the preview.

JavaScript API

Sveltia CMS offers a comprehensive API that enables developers to extend and customize its features. You can register custom field types, preview templates, editor components, and more to enhance the content management experience.

For detailed information on how to use the API, please refer to the JavaScript API guide.

Modifying Source Code

Sveltia CMS is an open source project licensed under the MIT License, and its source code is available on GitHub. Advanced users and developers can fork the repository and modify the source code to implement custom features or changes that are not available through the standard customization options.

However, please note that our source code is under active development with significant refactoring and improvements happening regularly. We also plan to reevaluate the UI framework, currently Svelte, at some point. Direct modifications to the source code may lead to compatibility issues with future updates.