Spicetify

https://spicetify.app/docs/
Admin
Spicetify is a multiplatform command-line tool designed to customize the official Spotify client...
Tokens:91,607
Snippets:699
Trust Score:9
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Spicetify on Windows using PowerShell

Source: https://spicetify.app/docs/getting-started

Installs Spicetify on Windows using PowerShell by downloading and executing an installation script from GitHub. This is the recommended method for Windows.

```powershell
iwr -useb https://raw.githubusercontent.com/spicetify/cli/main/install.ps1 | iex
```

--------------------------------

### Install Spicetify on Linux using Shell Script

Source: https://spicetify.app/docs/getting-started

Installs Spicetify on Linux using a shell script downloaded and executed from GitHub. This is the recommended method for Linux.

```bash
curl -fsSL https://raw.githubusercontent.com/spicetify/cli/main/install.sh | sh
```

--------------------------------

### Install Spicetify on Windows using Package Managers

Source: https://spicetify.app/docs/getting-started

Provides commands to install Spicetify on Windows using common package managers: Winget, Scoop, and Chocolatey. Each command installs the Spicetify CLI.

```bash
winget install Spicetify.Spicetify
```

```bash
scoop install spicetify-cli
```

```bash
choco install spicetify-cli
```

--------------------------------

### Configure Spicetify using nix-darwin Flake

Source: https://spicetify.app/docs/getting-started

Example configuration for integrating Spicetify with nix-darwin using a flake. This allows for declarative management of Spicetify within the Nix ecosystem.

```nix
{
  inputs.spicetify-nix.url = "github:Gerg-L/spicetify-nix";
}
```

--------------------------------

### Grant Permissions for Spotify installed via APT

Source: https://spicetify.app/docs/getting-started

Grants write permissions to Spotify's installation directories when installed via APT. This is necessary for Spicetify to modify Spotify's files.

```bash
sudo chmod a+wr /usr/share/spotify
sudo chmod a+wr /usr/share/spotify/Apps -R
```

--------------------------------

### Install Legacy Spicetify Version via Shell Script (Linux/macOS)

Source: https://spicetify.app/docs/getting-started

Installs a specific legacy version of Spicetify using shell commands. This method downloads the install script and executes it with a specified version.

```shell
curl -fsSL https://raw.githubusercontent.com/spicetify/cli/main/install.sh -o /tmp/install.sh
sh /tmp/install.sh 1.2.1
```

--------------------------------

### Install Legacy Spicetify Version via PowerShell (Windows)

Source: https://spicetify.app/docs/getting-started

Installs a specific legacy version of Spicetify using PowerShell. This is useful for compatibility with older Spotify versions.

```powershell
$v="1.2.1"; Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/cli/main/install.ps1" | Invoke-Expression
```

--------------------------------

### Spicetify Fresh Install Workflow Example

Source: https://spicetify.app/docs/cli/commands

Demonstrates the sequence of commands for a fresh installation of Spicetify, including generating the config, backing up, applying modifications, and enabling developer tools.

```bash
# Install Spicetify (see Installation page)  
# Generate config  
spicetify  

# First-time setup  
spicetify backup apply enable-devtools  

```

--------------------------------

### Reinstall Spotify using APT after removing Snap

Source: https://spicetify.app/docs/getting-started

Removes Spotify installed via Snap and then installs the official Spotify client using the APT package manager on Debian-based systems. This is required because Snap apps cannot be modified by Spicetify.

```bash
snap remove spotify
```

```bash
curl -sS https://download.spotify.com/debian/pubkey_C85668DF69375001.gpg | sudo gpg --dearmor --yes -o /etc/apt/trusted.gpg.d/spotify.gpg
echo "deb http://repository.spotify.com stable non-free" | sudo tee /etc/apt/sources.list.d/spotify.list
sudo apt-get update && sudo apt-get install spotify-client
```

--------------------------------

### Install Spicetify on Linux using Homebrew or AUR

Source: https://spicetify.app/docs/getting-started

Provides commands for installing Spicetify on Linux using the Homebrew package manager or the AUR (Arch User Repository) via yay.

```bash
brew install spicetify-cli
```

```bash
yay -S spicetify-cli
```

--------------------------------

### Configure Spotify Path for Flatpak Installation

Source: https://spicetify.app/docs/getting-started

Sets the Spotify installation path in Spicetify configuration when Spotify was installed via Flatpak. It requires finding the correct installation path and then setting it using the 'spicetify config' command.

```bash
flatpak --installations
```

```bash
spicetify config spotify_path "/var/lib/flatpak/app/com.spotify.Client/x86_64/stable/active/files/extra/share/spotify"
```

--------------------------------

### Grant Permissions for Spotify installed via Flatpak

Source: https://spicetify.app/docs/getting-started

Grants write permissions to Spotify's installation and Apps directories when installed via Flatpak. This allows Spicetify to modify Spotify's files.

```bash
sudo chmod a+wr /var/lib/flatpak/app/com.spotify.Client/x86_64/stable/active/files/extra/share/spotify
sudo chmod a+wr -R /var/lib/flatpak/app/com.spotify.Client/x86_64/stable/active/files/extra/share/spotify/Apps
```

--------------------------------

### Configure Spicetify using Nix Flake

Source: https://spicetify.app/docs/getting-started

Demonstrates how to configure Spicetify declaratively on NixOS or with Home Manager using the spicetify-nix flake. It includes adding the flake input and importing the module with specific theme and extension settings.

```nix
{
  inputs.spicetify-nix.url = "github:Gerg-L/spicetify-nix";
}
```

```nix
# For NixOS: spicetify-nix.nixosModules.spicetify
# For Home Manager: spicetify-nix.homeManagerModules.spicetify

{
  pkgs, inputs, ... }:
let
  spicePkgs = inputs.spicetify-nix.legacyPackages.${pkgs.system};
in {
  programs.spicetify = {
    enable = true;
    enabledExtensions = with spicePkgs.extensions;
      [
        adblockify
        hidePodcasts
        shuffle
      ];
    theme = spicePkgs.themes.catppuccin;
    colorScheme = "mocha";
  };
}
```

--------------------------------

### Configure Spotify Prefs Path for Flatpak

Source: https://spicetify.app/docs/getting-started

Finds and sets the Spotify preferences file path for Spicetify when Spotify is installed via Flatpak. It involves checking common locations and using the full absolute path in the configuration.

```bash
# Check which exists:
ls ~/.config/spotify/prefs
ls ~/.var/app/com.spotify.Client/config/spotify/prefs

# Set whichever exists (use the full absolute path):
spicetify config prefs_path /home/username/.var/app/com.spotify.Client/config/spotify/prefs
```

--------------------------------

### Configure Spotify Path for Spicetify (macOS)

Source: https://spicetify.app/docs/getting-started

Sets the path to the Spotify application's resources, which is necessary for Spicetify to function correctly after installation via Homebrew.

```shell
spicetify config spotify_path "/Applications/Spotify.app/Contents/Resources"
```

--------------------------------

### Apply and Update Spicetify Configurations

Source: https://spicetify.app/docs/getting-started

Commands to manage Spicetify configurations. 'spicetify backup apply' reapplies Spicetify after a Spotify update, 'spicetify update' updates Spicetify itself, and 'spicetify restore backup apply' can be used if updates fail.

```shell
spicetify backup apply
```

```shell
spicetify update
```

```shell
spicetify restore backup apply
```

--------------------------------

### Enable a Spicetify Extension Example

Source: https://spicetify.app/docs/cli/commands

Shows the commands to enable a specific extension, such as `fullAppDisplay.js`, by configuring it and then applying the changes.

```bash
spicetify config extensions fullAppDisplay.js  
spicetify apply  

```

--------------------------------

### GraphQL Document Structure Example

Source: https://spicetify.app/docs/development/api-wrapper/methods/graphql

Illustrates the overall structure of a GraphQL document, highlighting the 'definitions' array which contains operation or fragment definitions. This example focuses on a query operation.

```json
{
    "kind": "Document",
    "definitions": [
        {
            "kind": "OperationDefinition",
            "operation": "query",
            "name": {
                "kind": "Name",
                "value": "fetchExtractedColors"
            },
            "variableDefinitions": [
                {
                    "kind": "VariableDefinition",
                    "variable": {
                        "kind": "Variable",
                        "name": {
                            "kind": "Name",
                            "value": "uris"
                        }
                    },
                    "type": {
                        "kind": "NonNullType",
                        "type": {
                            "kind": "ListType",
                            "type": {
                                "kind": "NonNullType",
                                "type": {
                                    "kind": "NamedType",
                                    "name": {
                                        "kind": "Name",
                                        "value": "ID"
                                    }
                                }
                            }
                        }
                    }
                }
            ],
            "selectionSet": {
                "kind": "SelectionSet",
                "selections": [
                    {
                        // ...
                    }
                ]
            }
        }
    ]
}
```

--------------------------------

### Configure Spotify Path for Scoop Installation

Source: https://spicetify.app/docs/getting-started

Sets the Spotify installation path in Spicetify configuration when Spotify itself was installed via Scoop. It first retrieves the path using 'scoop prefix spotify' and then applies it.

```bash
$ scoop prefix spotify
C:\Users\<username>\scoop\apps\spotify\current
```

```bash
spicetify config spotify_path "C:\Users\<username>\scoop\apps\spotify\current"
```

--------------------------------

### Configure Spotify Path for Spotify-Launcher

Source: https://spicetify.app/docs/getting-started

Sets the Spotify installation path in Spicetify configuration when Spotify was installed using the 'spotify-launcher' package on Arch Linux. It uses a specific user directory path.

```bash
spicetify config spotify_path "$HOME/.local/share/spotify-launcher/install/usr/share/spotify"
```

--------------------------------

### Install Spicetify CLI via Homebrew (macOS)

Source: https://spicetify.app/docs/getting-started

Installs the Spicetify CLI using the Homebrew package manager. This is a convenient method for macOS users who already use Homebrew.

```shell
brew install spicetify-cli
```

--------------------------------

### Grant Permissions for Spotify from AUR

Source: https://spicetify.app/docs/getting-started

Grants write permissions to Spotify's installation directories when installed via AUR. This is necessary for Spicetify to modify Spotify's files.

```bash
sudo chmod a+wr /opt/spotify
sudo chmod a+wr /opt/spotify/Apps -R
```

--------------------------------

### Spicetify Extension Startup Notification (TypeScript/JavaScript)

Source: https://spicetify.app/docs/development/spicetify-creator/create-custom-apps

An example 'extension.tsx' file that demonstrates how to display a notification when Spicetify starts. It includes a loop to wait for the Spicetify API to be available before showing the message.

```typescript
(async () => {
  while (!Spicetify?.showNotification) {
    await new Promise((resolve) => setTimeout(resolve, 100));
  }
  
  // Show message on start.
  Spicetify.showNotification('Welcome!');
})();

```

--------------------------------

### CosmosAsync GET Request Example

Source: https://spicetify.app/docs/development/api-wrapper/methods/cosmos-async

Demonstrates how to make a GET request using CosmosAsync to retrieve playlists from the user's library. It shows how to process the response to filter for playlist items.

```javascript
// Get all playlists in user's library
const res = await Spicetify.CosmosAsync.get("sp://core-playlist/v1/rootlist");
const playlists = res.rows.filter((row) => row.type === "playlist");
```

--------------------------------

### Clone Spicetify Repo and Download Dependencies (Shell)

Source: https://spicetify.app/docs/development/compiling

This snippet demonstrates how to clone the Spicetify CLI repository from GitHub and navigate into the project directory. It assumes Go is installed and configured as a prerequisite.

```shell
cd $HOME
mkdir spicetify
cd spicetify
git clone https://github.com/spicetify/cli
```

--------------------------------

### Add Spicetify to PATH for Zsh and Bash

Source: https://spicetify.app/docs/getting-started

Adds the Spicetify installation directory (~/.spicetify) to the system's PATH environment variable for Zsh and Bash shells. It includes sourcing the configuration file to apply changes immediately.

```bash
echo 'export PATH=$PATH:~/.spicetify' >> ~/.zshrc
source ~/.zshrc
```

```bash
echo 'export PATH=$PATH:~/.spicetify' >> ~/.bashrc
source ~/.bashrc
```

--------------------------------

### Install and Import Node Packages

Source: https://spicetify.app/docs/development/spicetify-creator/the-basics

Shows how to install external Node.js packages using npm, Yarn, or pnpm, and then import them into your Spicetify Creator project. This enables the use of third-party libraries.

```bash
npm install <package-name>
```

```bash
yarn add <package-name>
```

```bash
pnpm add <package-name>
```

```javascript
import packageName from '<package-name>'
```

--------------------------------

### Add Spicetify to PATH for Fish Shell

Source: https://spicetify.app/docs/getting-started

Adds the Spicetify installation directory (~/.spicetify) to the system's PATH environment variable for the Fish shell using the 'fish_add_path' command.

```fish
fish_add_path ~/.spicetify
```

--------------------------------

### Install Spicetify Marketplace on Linux/macOS

Source: https://spicetify.app/docs/customization/marketplace

This shell command downloads and executes the Spicetify Marketplace installation script for Linux and macOS. It uses `curl` to fetch the script and pipes it to `sh` for execution.

```bash
curl -fsSL https://raw.githubusercontent.com/spicetify/marketplace/main/resources/install.sh | sh
```

--------------------------------

### Change Spicetify Theme Example

Source: https://spicetify.app/docs/cli/commands

Illustrates how to change the current theme and color scheme in Spicetify, followed by applying the changes to Spotify.

```bash
spicetify config current_theme Sleek color_scheme Dark  
spicetify apply  

```

--------------------------------

### Install Spicetify Marketplace on Windows

Source: https://spicetify.app/docs/customization/marketplace

This PowerShell script downloads and executes the Spicetify Marketplace installation script for Windows. It uses `Invoke-WebRequest` to fetch the script and `Invoke-Expression` to run it.

```powershell
iwr -useb https://raw.githubusercontent.com/spicetify/marketplace/main/resources/install.ps1 | iex
```

--------------------------------

### Install and Import Spicetify Creator Plugins

Source: https://spicetify.app/docs/development/spicetify-creator/the-basics

Details the process of installing and importing Spicetify Creator plugins, which are Node packages designed to extend its functionality. Plugins follow a naming convention `spcr-<name>`.

```bash
npm install spcr-<name>
```

```bash
yarn add spcr-<name>
```

```bash
pnpm add spcr-<name>
```

```javascript
import plugin from 'spcr-<name>'
```

--------------------------------

### Build Spicetify Executable for Windows (Shell)

Source: https://spicetify.app/docs/development/compiling

This command builds the Spicetify executable specifically for Windows. It requires the Go compiler to be installed and the user to be in the cloned repository's directory. The output is an executable file named 'spicetify.exe'.

```shell
cd $HOME\spicetify\cli
go build -o spicetify.exe
```

--------------------------------

### Build Spicetify Executable for Linux and MacOS (Shell)

Source: https://spicetify.app/docs/development/compiling

This command builds the Spicetify executable for Linux and macOS systems. It requires the Go compiler to be installed and the user to be in the cloned repository's directory. The output is a binary file named 'spicetify'.

```shell
cd ~/spicetify/cli
go build -o spicetify
```

--------------------------------

### Example Usage of Keyboard KEYS

Source: https://spicetify.app/docs/development/api-wrapper/methods/keyboard

Provides an example of using the KEYS object to look up the valid name for a given key, such as 'CAPS'. This helps in constructing valid shortcut definitions.

```javascript
const { KEYS } = Spicetify.Keyboard;
console.log(KEYS["CAPS"]); // "Capslock"
```

--------------------------------

### Get Spicetify Config Help

Source: https://spicetify.app/docs/faq

Display help information for Spicetify configuration options. This command provides details on available settings within the `config-xpui.ini` file.

```bash
spicetify --help config
```

--------------------------------

### GraphQL Variable Definitions Example

Source: https://spicetify.app/docs/development/api-wrapper/methods/graphql

Details the structure of the 'variableDefinitions' array within a GraphQL OperationDefinition. It shows how variables, their types, and constraints are defined for an operation.

```json
"variableDefinitions": [
    {
        "kind": "VariableDefinition",
        "variable": {
            "kind": "Variable",
            "name": {
                "kind": "Name",
                "value": "uris"
            }
        },
        "type": {
            "kind": "NonNullType",
            "type": {
                "kind": "ListType",
                "type": {
                    "kind": "NonNullType",
                    "type": {
                        "kind": "NamedType",
                        "name": {
                            "kind": "Name",
                            "value": "ID"
                        }
                    }
                }
            }
        }
    }
]
```

--------------------------------

### CosmosAsync POST Request Example

Source: https://spicetify.app/docs/development/api-wrapper/methods/cosmos-async

Illustrates how to use CosmosAsync to send a POST request, specifically for skipping to the next track in the player queue.

```javascript
// Skip to the next track in queue
const res = await Spicetify.CosmosAsync.post("sp://player/v2/main/skip_next");
```

--------------------------------

### Spicetify Custom App Manifest Example

Source: https://spicetify.app/docs/development/custom-apps

An example of a manifest.json file for a Spicetify custom app. This file contains essential metadata such as the app's name, icons for different states, and references to additional JavaScript files.

```json
{
  "name": "My Custom App",
  "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path fill=\"currentColor\" d=\"M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM403.029 192H360v-60c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v60h-43.029c-10.691 0-16.045 12.926-8.485 20.485l67.029 67.029c4.686 4.686 12.284 4.686 16.971 0l67.029-67.029c7.559-7.559 2.205-20.485-8.486-20.485z"></path></svg>",
  "active-icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path fill=\"currentColor\" d=\"M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM403.029 192H360v-60c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v60h-43.029c-10.691 0-16.045 12.926-8.485 20.485l67.029 67.029c4.686 4.686 12.284 4.686 16.971 0l67.029-67.029c7.559-7.559 2.205-20.485-8.486-20.485z"></path></svg>",
  "subfiles": ["src/Subfile.js", "src/Subfile2.js"],
  "subfiles_extension": ["my_extension.js"]
}

```

--------------------------------

### Settings Configuration for Spicetify App

Source: https://spicetify.app/docs/development/spicetify-creator/create-extensions

Provides an example of the `settings.json` file used in Spicetify extensions. This file typically contains a unique identifier for the application.

```json
{
  "nameId": "my-app" // The id of your app
}
```

--------------------------------

### Spicetify Theme Development Workflow Example

Source: https://spicetify.app/docs/cli/commands

Outlines a typical workflow for theme development, including an initial application of the theme and then using the `watch` command to automatically apply changes during development.

```bash
# One-time: apply your theme  
spicetify config current_theme MyTheme  
spicetify apply  

# During development: watch for changes  
spicetify watch  

```

--------------------------------

### Initializing a Spicetify Project with Spicetify Creator

Source: https://spicetify.app/docs/development/extensions

Command to bootstrap a new Spicetify extension project using Spicetify Creator. This tool provides a development environment with TypeScript, JSX, and hot reloading.

```bash
npx spicetify-creator

```

--------------------------------

### Make a GraphQL Request with Spicetify

Source: https://spicetify.app/docs/development/api-wrapper/methods/graphql

Demonstrates how to make a GraphQL request using Spicetify.GraphQL.Request. It shows how to pass the query definition and variables, and includes an example of fetching album data.

```javascript
Spicetify.GraphQL.Request(
  Spicetify.GraphQL.Definitions.fetchExtractedColors,
  { uris: ['spotify:image:ab67616d00001e02f16ab998eea7e598a0928ad7'] },
);

// Get all data displayed in an album page
const { getAlbum } = Spicetify.GraphQL.Definitions;
await Spicetify.GraphQL.Request(
  getAlbum,
  { uri: "spotify:album:3lvY0ag1k3qiPCsEM3Wnku", locale: "en", limit: 50, offset: 0 },
  { persistCache: true },
);
```

--------------------------------

### Example: Get Colors from Current Track (JavaScript)

Source: https://spicetify.app/docs/development/api-wrapper/functions/color-extractor

This example demonstrates how to use the colorExtractor function to get colors from the currently playing track. It first retrieves the current track's data and then calls colorExtractor with the track's URI. The extracted colors are then available for use.

```javascript
// Get color from current track  
const currentTrack = Spicetify.Player.data.item;  
const colors = await Spicetify.colorExtractor(currentTrack.uri);
```

--------------------------------

### Automate Backup, Apply, and Launch Spotify

Source: https://spicetify.app/docs/cli/commands

Automatically performs a backup (if necessary), applies Spicetify modifications, and then launches Spotify. This command serves as a convenient shortcut for the initial setup or post-update process.

```bash
spicetify auto  

```

--------------------------------

### Remove Spicetify Binary (Windows)

Source: https://spicetify.app/docs/uninstallation

Finds and removes the Spicetify executable on Windows. This is an optional step if you installed via the script.

```powershell
where spicetify
# Remove the file shown
```

--------------------------------

### Remove Spicetify Binary (Linux/macOS)

Source: https://spicetify.app/docs/uninstallation

Finds and removes the Spicetify executable on Linux and macOS. This is an optional step if you installed via the script.

```bash
which spicetify
# Remove the file shown, e.g.:
rm $(which spicetify)
```

--------------------------------

### Basic Spicetify Theme Color Configuration

Source: https://spicetify.app/docs/customization/themes

An example of a `color.ini` file used for Spicetify themes. It defines color values that are converted into CSS variables for styling.

```ini
[Base]
main           = 121212
sidebar        = 000000
player         = 181818
card           = 282828
shadow         = 000000
selected-row   = 797979
button         = 1db954
button-active  = 1ed760
text           = ffffff
subtext        = b3b3b3

```

--------------------------------

### Manually Edit Custom Apps Configuration

Source: https://spicetify.app/docs/customization/custom-apps

Example of directly editing the Spicetify configuration file to manage custom apps. Apps are listed under the '[AdditionalOptions]' section, separated by '|'.

```ini
[AdditionalOptions]
custom_apps = reddit|lyrics-plus|new-releases
```

--------------------------------

### Create New Spicetify App Project

Source: https://spicetify.app/docs/development/spicetify-creator/the-basics

Initiates a new Spicetify Creator project using various package managers. This command prompts for project details and generates the necessary file structure.

```bash
npx create-spicetify-app
```

```bash
yarn create spicetify-app
```

```bash
pnpm create spicetify-app
```

--------------------------------

### Listening to Spicetify Player Events

Source: https://spicetify.app/docs/development/extensions

An example of how to listen for player events, specifically the 'songchange' event, to get information about the currently playing track. It accesses the track's name via `Spicetify.Player.data.item`.

```javascript
Spicetify.Player.addEventListener("songchange", (event) => {
    const track = Spicetify.Player.data?.item;
    console.log("Now playing:", track?.name);
});

```

--------------------------------

### CosmosAsync Namespace Definition and Usage

Source: https://spicetify.app/docs/development/api-wrapper/methods/cosmos-async

Defines the CosmosAsync namespace with methods for HTTP requests (GET, POST, PUT, DELETE, etc.) and provides examples of its usage for fetching client versions and interacting with Spotify's internal and web APIs.

```typescript
namespace CosmosAsync {
    function head(url: string, headers?: Headers): Promise<Headers>;
    function get(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
    function post(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
    function put(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
    function del(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
    function patch(url: string, body?: Body, headers?: Headers): Promise<Response["body"]>;
    function sub(url: string, callback: ((b: Response["body"]) => void), onError?: ((e: Error) => void), body?: Body, headers?: Headers): Promise<Response["body"]>;
    function postSub(url: string, body: Body | null, callback: ((b: Response["body"]) => void), onError?: ((e: Error) => void)): Promise<Response["body"]>;
    function request(method: Method, url: string, body?: Body, headers?: Headers): Promise<Response>;
    function resolve(method: Method, url: string, body?: Body, headers?: Headers): Promise<Response>;
}

// Example: Fetch current client version
await Spicetify.CosmosAsync.get("sp://desktop/v1/version");

// Example: Using request method
await Spicetify.CosmosAsync.request("GET", "sp://desktop/v1/version");

// Example: Internal Spotify API endpoint
await Spicetify.CosmosAsync.get("sp://desktop/v1/version");

// Example: Spotify Web API endpoint
await Spicetify.CosmosAsync.get("https://api.spotify.com/v1/me");

// Example: Using fetch for external URLs (caution advised)
await fetch("https://example.com");
```

--------------------------------

### Spicetify Basic Workflow Commands (Shell)

Source: https://spicetify.app/docs/cli

This snippet shows the fundamental commands for initializing Spicetify, backing up Spotify, applying Spicetify, and reapplying changes after modifications. It assumes a shell environment.

```shell
spicetify
spicetify backup apply
spicetify apply
```

--------------------------------

### Run Spotify in Watch Mode for Spicetify App

Source: https://spicetify.app/docs/development/spicetify-creator/building-and-testing

Starts Spotify in watch mode, which works in conjunction with the application's watch mode to provide a seamless development experience. Use the appropriate flag for extensions (-e) or apps (-a).

```bash
spicetify watch -le
```

```bash
spicetify watch -la
```

--------------------------------

### Perform Local Build of Spicetify App with npm, Yarn, or pnpm

Source: https://spicetify.app/docs/development/spicetify-creator/building-and-testing

Creates a local build of the Spicetify application, placing the compiled files in a 'dist' folder. This is useful for uploading build files with your repository or for inspection. This command should be run after initial setup.

```bash
npm run build-local
```

```bash
yarn run build-local
```

```bash
pnpm build-local
```

--------------------------------

### Apply Spicetify Tippy.js Props to an Element (JavaScript)

Source: https://spicetify.app/docs/development/api-wrapper/properties/tippy-props

This example demonstrates how to apply the predefined Spicetify.TippyProps to a new Tippy.js tooltip instance. It shows how to create a target element and initialize Tippy.js, spreading the Spicetify.TippyProps and overriding specific properties like 'content' and 'delay' if needed. This allows for consistent styling and behavior across multiple tooltips.

```javascript
const element = document.createElement("div");

const tooltip = tippy(element, {
    ...Spicetify.TippyProps,
    content: "Tooltip content",
    // For example, if you want to override the delay
    delay: [100, 0],
});

```

--------------------------------

### TypeScript Metadata Object Example

Source: https://spicetify.app/docs/development/api-wrapper/types/metadata

Provides an example of a Metadata object, illustrating various potential properties and their expected string or bigint/number string formats. This is not a strict type definition but a representative example.

```typescript
type Metadata = {
    actions.skipping_next_past_track: string;
    actions.skipping_prev_past_track: string;
    added_at: `${bigint}`;
    album_artist_name: string;
    album_disc_count: `${number}`;
    album_disc_number: `${number}`;
    album_title: string;
    album_track_count: `${number}`;
    album_track_number: `${number}`;
    album_uri: string;
    artist_name: string;
    artist_uri: string;
    // URL
    canvas.artist.avatar: string;
    canvas.artist.name: string;
    canvas.artist.uri: string;
    canvas.canvasUri: string;
    canvas.entityUri: string;
    canvas.explicit: "true" | "false";
    canvas.fileId: string;
    canvas.id: string;
    canvas.type: string;
    canvas.uploadedBy: string;
    // URL
    canvas.url: string;
    collection.can_add: "true" | "false";
    collection.can_ban: "true" | "false";
    collection.in_collection: "true" | "false";
    collection.is_banned: "true" | "false";
    context_uri: string;
    duration: `${bigint}`;
    entity_uri: string;
    has_lyrics: "true" | "false";
    // Internal URL paths, not URLs
    image_large_url: string;
    image_small_url: string;
    image_url: string;
    image_xlarge_url: string;
    interaction_id: string;
    iteration: `${number}`;
    marked_for_download:  "true" | "false";
    page_instance_id: string;
    popularity: `${number}`;
    title: string;
    track_player: string;
}
```

--------------------------------

### Upgrade Spicetify Version

Source: https://spicetify.app/docs/cli/commands

Upgrades the Spicetify installation to the latest available version. This command is only functional for installations performed via the script.

```bash
spicetify upgrade  

```

--------------------------------

### CosmosAsync PUT Request Example

Source: https://spicetify.app/docs/development/api-wrapper/methods/cosmos-async

Shows an example of making a PUT request with CosmosAsync to toggle incognito mode by sending a boolean value in the request body.

```javascript
// Enable/disable incognito mode
const res = await Spicetify.CosmosAsync.put("sp://scrobble/v1/incognito", { enabled: boolean });
```

--------------------------------

### Get Value from LocalStorage

Source: https://spicetify.app/docs/development/api-wrapper/methods/local-storage

The `get` method retrieves a value from localStorage using a specified key. It returns the string value associated with the key, or null if the key is not found.

```typescript
get(key: string): string | null
```

```javascript
const value = Spicetify.LocalStorage.get("foo");
```

--------------------------------

### Import CSS and SCSS Files

Source: https://spicetify.app/docs/development/spicetify-creator/the-basics

Demonstrates how to import CSS and SCSS files, including support for CSS Modules, into a Spicetify Creator project. This allows for styling of custom apps and extensions.

```javascript
import './my-css-file.css'; // For CSS
import './my-scss-file.scss'; // For SCSS
```

```javascript
import styles from './item-list.module.css'; // For CSS
import styles from './item-list.module.scss'; // For SCSS
```

--------------------------------

### Create and Register a Custom Menu Item in Spicetify

Source: https://spicetify.app/docs/development/api-wrapper/classes/menu

Demonstrates how to create a new menu item with a name, initial state, and click handler, then register it to the Spicetify profile menu. It also shows how to update the item's name, state, and icon after registration.

```javascript
const item = new Spicetify.Menu.Item("My Item", true, () => {
  console.log("My Item is clicked");
});

item.register();

// item.name = "My Item (Updated)";
item.setName("My Item (Updated)");

// item.isEnabled = false;
item.setState(false);

// item.icon = "heart";
item.setIcon("heart");
```

--------------------------------

### Find Spotify Prefs File on Linux

Source: https://spicetify.app/docs/faq

Search for the Spotify 'prefs' file within your home directory on Linux. This is part of troubleshooting the 'Cannot find `pref_file`' issue.

```bash
cd ~ && find | grep "spotify/prefs$"
```

--------------------------------

### Show Toast Notification Examples (JavaScript)

Source: https://spicetify.app/docs/development/api-wrapper/functions/show-notification

Provides examples of how to use the showNotification function in Spicetify. Demonstrates displaying a basic notification, one with a custom timeout, an error notification, and a styled error notification using inline HTML.

```javascript
// Display a notification
Spicetify.showNotification("My Menu Item clicked!");

// Display a notification with a custom timeout
Spicetify.showNotification("My Menu Item clicked!", false, 1000);

// Display an error notification
Spicetify.showNotification("Something wrong happened", true);

// Display a bolded error notification
Spicetify.showNotification("<b>Something wrong happened</b>", true);
```
Tokens:
Raw