# Splash screen customization
The ManiVault Studio splash screen is implemented as **HTML**, which makes it easy to change the look and feel of your application without recompiling.
By default, most applications use a standard splash screen template provided by the core:
```text
ManiVault/res/html/SplashScreenTemplate.html
```
You can use this file as a reference when designing your own splash screen.
```{note}
The **customization directory** location can differ per platform or application bundle layout.
If you are unsure where it is, query it from C++ using From C++ code, you can query this location via [mv::util::StandardPaths::getCustomizationDirectory()](https://github.com/ManiVaultStudio/core/blob/master/ManiVault/src/util/StandardPaths.h).
```
---
## Predefined variables
Inside the splash screen HTML, you can use special placeholders in **double curly braces**. These are predefined by the core and substituted at runtime:
- `{{BACKGROUND_IMAGE}}`
Replaced by a Qt resource URL for the background image.
- `{{LOGO}}`
Replaced by the application logo image.
- `{{TITLE}}`
The application title.
- `{{VERSION}}`
The application version.
- `{{SUBTITLE}}`
The application subtitle.
- `{{DESCRIPTION}}`
The application description.
- `{{ALERTS}}`
Replaced with loading/system errors and warnings.
- `{{COPYRIGHT}}`
The copyright notice.
You can place these variables anywhere in your HTML where text or images would normally go (e.g., titles, subtitles, hero area, footer).
In addition, you can load **images and other static resources** (such as background images, icons, or custom CSS/JS files) from the application’s `assets` folder inside the customization directory.
---
## Base HTML template
A minimal splash screen template that works with ManiVault looks like this:
```html
Splash Screen
```
You are free to change the HTML and CSS inside `` (and add your own styles), as long as:
- The **Content-Security-Policy** remains compatible with what you want to load.
- The `qwebchannel.js` script and the progress bar wiring are kept if you still want to show loading progress.
---
## Creating a custom splash screen
To create your own splash screen:
1. **Enable custom splash screen in the app**
- In the customization UI (opened with `Ctrl + F8`), go to **Branding**.
- Enable the **custom splash screen** toggle.
2. **Locate the customization directory**
- By default, many apps use:
```text
/Customization
```
- The exact location, however, may differ between platforms and application bundles.
- If you are unsure, query the path in C++ using:
```cpp
mv::util::StandardPaths::getCustomizationDirectory()
```
3. **Create the HTML file**
- Inside the customization directory, create (or open) the `assets` folder:
```text
/assets
```
- Create a file named:
```text
SplashScreen.html
```
4. **Copy the base template**
- Copy the base HTML shown above into `SplashScreen.html`.
- Or, copy the built-in template from
`ManiVault/res/html/SplashScreenTemplate.html`
and adapt it to your needs.
5. **Add images and other resources**
- Place any custom images, icons, or other static resources in:
```text
/assets
```
- From your `SplashScreen.html`, you can reference these resources using the mechanisms supported by your application (for example, via the `custom-assets:` URL scheme, or other paths configured by the core).
6. **Customize the content**
- Add your own layout, branding, and styling.
- Insert the predefined variables wherever needed, for example:
```html
{{TITLE}}
{{SUBTITLE}}
{{VERSION}}
{{ALERTS}}
```
- Use `{{BACKGROUND_IMAGE}}` and `{{LOGO}}` for images supplied by the application.
- Combine those with additional images from the `assets` directory for fully customized branding.
7. **Save and restart**
- Save `SplashScreen.html`.
- Restart the application.
- The app will now load your custom splash screen from the customization directory instead of the built-in one.
---
With this setup, you can fully control the splash screen’s layout and styling, while still benefiting from dynamic information (title, version, alerts, etc.) supplied by the ManiVault core, and from custom images and other resources stored in your `assets` folder.