---
url: /en/docs/customization.md
description: >-
  Customize Sveltia CMS with custom branding, mounting options, JavaScript API,
  and source modifications.
---

# 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`](/en/docs/collections/entries/previews) 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`](#display-url) option.

::: code-group

```yaml [YAML]
site_url: https://example.com
```

```toml [TOML]
site_url = "https://example.com"
```

```json [JSON]
{
  "site_url": "https://example.com"
}
```

```js [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.

::: code-group

```yaml [YAML]
site_url: https://example.com
display_url: https://www.example.com/blog/
```

```toml [TOML]
site_url = "https://example.com"
display_url = "https://www.example.com/blog/"
```

```json [JSON]
{
  "site_url": "https://example.com",
  "display_url": "https://www.example.com/blog/"
}
```

```js [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.

::: code-group

```yaml [YAML]
logout_redirect_url: https://example.com/logged-out
```

```toml [TOML]
logout_redirect_url = "https://example.com/logged-out"
```

```json [JSON]
{
  "logout_redirect_url": "https://example.com/logged-out"
}
```

```js [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:

::: code-group

```yaml [YAML]
logo:
  src: /path/to/your/logo.png
  show_in_header: true
```

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

```json [JSON]
{
  "logo": {
    "src": "/path/to/your/logo.png",
    "show_in_header": true
  }
}
```

```js [JavaScript]
{
  logo: {
    src: '/path/to/your/logo.png',
    show_in_header: true,
  },
}
```

:::

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

::: code-group

```yaml [YAML]
logo_url: /path/to/your/logo.png
```

```toml [TOML]
logo_url = "/path/to/your/logo.png"
```

```json [JSON]
{
  "logo_url": "/path/to/your/logo.png"
}
```

```js [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](/en/docs/ui#installing-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.

::: code-group

```yaml [YAML]
app_title: Acme Inc. Site Admin
```

```toml [TOML]
app_title = "Acme Inc. Site Admin"
```

```json [JSON]
{
  "app_title": "Acme Inc. Site Admin"
}
```

```js [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`.

```html
<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:

```html
<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](/en/docs/api/preview-styles#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](/en/docs/api).

## Modifying Source Code

Sveltia CMS is an open source project licensed under the [MIT License](https://choosealicense.com/licenses/mit/), and its source code is available on [GitHub](https://github.com/sveltia/sveltia-cms). 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](https://svelte.dev/), at some point. Direct modifications to the source code may lead to compatibility issues with future updates.