### Install Spotify via APT Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Installs the Spotify client using the official Spotify APT repository. This involves adding the GPG key and repository source, then updating and installing. ```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 Marketplace on Linux/macOS Source: https://github.com/spicetify/docs/blob/main/docs/customization/marketplace.md Use this bash command to install the Spicetify Marketplace on Linux or macOS. This script downloads and executes the installation. ```bash curl -fsSL https://raw.githubusercontent.com/spicetify/marketplace/main/resources/install.sh | sh ``` -------------------------------- ### Usage Example Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/properties/config.md Example demonstrating how to check for enabled custom apps using the Config object. ```APIDOC ## Usage Example ```ts const { Config } = Spicetify; if (Config.custom_apps.includes("lyrics-plus")) { // Do something } ``` This can ensure that your extension doesn't break if the user doesn't have the required app or theme installed. ``` -------------------------------- ### Create Spicetify App with pnpm Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/the-basics.md Use this command to initiate a new Spicetify Creator project using pnpm. It will guide you through the setup process. ```shell pnpm create spicetify-app ``` -------------------------------- ### Install NPM Packages Source: https://github.com/spicetify/docs/blob/main/docs/development/js-modules.md Install the necessary kuroshiro and kuroshiro-analyzer-kuromoji packages using npm. ```bash npm install kuroshiro kuroshiro-analyzer-kuromoji ``` -------------------------------- ### Create Spicetify App with npm Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/the-basics.md Use this command to initiate a new Spicetify Creator project using npm. It will guide you through the setup process. ```shell npx create-spicetify-app ``` -------------------------------- ### Example extension.tsx for Spicetify Startup Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/create-custom-apps.md This TypeScript code demonstrates how to display a notification when Spotify starts. It includes a loop to ensure Spicetify's API is available before showing the message. ```typescript (async () => { while (!Spicetify?.showNotification) { await new Promise((resolve) => setTimeout(resolve, 100)); } // Show message on start. Spicetify.showNotification('Welcome!'); })(); ``` -------------------------------- ### Create Spicetify App with Yarn Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/the-basics.md Use this command to initiate a new Spicetify Creator project using Yarn. It will guide you through the setup process. ```shell yarn create spicetify-app ``` -------------------------------- ### Backup Spotify Installation Source: https://github.com/spicetify/docs/blob/main/docs/customization/config-file.md Creates a backup of the original Spotify installation, allowing for later restoration. ```bash spicetify backup ``` -------------------------------- ### Spicetify Extension App Entry Point Source: https://github.com/spicetify/docs/blob/main/src/content/docs/development/spicetify-creator/create-extensions.md The `app.tsx` file exports a function that runs when Spotify starts. It includes an example that displays a 'Hello!' message to the user. ```typescript export function App() { return ( <>

Hello!

); } ``` -------------------------------- ### Install Marketplace on Windows Source: https://github.com/spicetify/docs/blob/main/docs/customization/marketplace.md Use this PowerShell command to install the Spicetify Marketplace on Windows. Ensure you have PowerShell 5.1 or later. ```powershell iwr -useb https://raw.githubusercontent.com/spicetify/marketplace/main/resources/install.ps1 | iex ``` -------------------------------- ### Manifest File Example Source: https://github.com/spicetify/docs/blob/main/docs/development/custom-apps.md Example of a manifest.json file for a custom app. It includes essential metadata like name, icons, and optional subfiles for organization. ```json { "name": "My Custom App", "icon": "", "active-icon": "", "subfiles": ["src/Subfile.js", "src/Subfile2.js"], "subfiles_extension": ["my_extension.js"] } ``` -------------------------------- ### Combined Spicetify Commands for Setup Source: https://github.com/spicetify/docs/blob/main/docs/cli/commands.md Combine multiple commands for initial setup, including backup, apply, and enabling developer tools. ```bash spicetify backup apply enable-devtools ``` -------------------------------- ### Install Spicetify via Homebrew (Linux/macOS) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Install Spicetify using the Homebrew package manager. ```bash brew install spicetify-cli ``` -------------------------------- ### Get User Playlists Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/methods/cosmos-async.md This example demonstrates how to retrieve all playlists from a user's library by making a GET request to the core playlist endpoint and filtering the results. ```typescript // 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"); ``` -------------------------------- ### Remove Snap Spotify and Install via APT Source: https://github.com/spicetify/docs/blob/main/src/content/docs/getting-started.mdx Instructions to remove Spotify installed via Snap and subsequently install it using the APT package manager, including adding the Spotify repository and GPG key. ```bash snap remove spotify 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 ``` -------------------------------- ### Play Track Example Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/methods/platform.md Provides an example of playing a specific track using its URI, an empty context, and default options. ```typescript // 505 - Arctic Monkeys const track = { uri: "spotify:track:0BxE4FqsDD1Ot4YuBXwAPp" }; // Play the track // Spicetify.Player.playUri(track.uri); await Spicetify.Platform.PlayerAPI.play(track, {}, {}); ``` -------------------------------- ### Install WebNowPlaying Extension Source: https://github.com/spicetify/docs/blob/main/docs/customization/extensions.md Install the webnowplaying extension to send track metadata to Rainmeter's WebNowPlaying plugin. This command enables the extension and applies the changes. ```bash spicetify config extensions webnowplaying.js spicetify apply ``` -------------------------------- ### Spicetify Fresh Install Workflow Source: https://github.com/spicetify/docs/blob/main/docs/cli/commands.md Commands for a fresh Spicetify installation, including generating config, backing up, applying, and enabling developer tools. ```bash # Install Spicetify (see Installation page) # Generate config spicetify # First-time setup spicetify backup apply enable-devtools ``` -------------------------------- ### Configure Spotify Path (Homebrew macOS) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Sets the Spotify installation path for Spicetify when installed via Homebrew on macOS. ```bash spicetify config spotify_path "/Applications/Spotify.app/Contents/Resources" ``` -------------------------------- ### Install Spicetify via Shell Script (Linux) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Use this command to download and execute the Spicetify installation script on Linux. ```bash curl -fsSL https://raw.githubusercontent.com/spicetify/cli/main/install.sh | sh ``` -------------------------------- ### Find Flatpak Spotify Installations Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Lists all installations for Flatpak apps, useful for locating the Spotify client's directory. ```bash flatpak --installations ``` -------------------------------- ### Install Spicetify via PowerShell (Windows) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Use this command to download and execute the Spicetify installation script on Windows using PowerShell. ```powershell iwr -useb https://raw.githubusercontent.com/spicetify/cli/main/install.ps1 | iex ``` -------------------------------- ### Install Spicetify via Scoop (Windows) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Install Spicetify using the Scoop package manager on Windows. ```powershell scoop install spicetify-cli ``` -------------------------------- ### Install Spicetify via AUR (Arch Linux) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Install Spicetify from the Arch User Repository (AUR) using yay. ```bash yay -S spicetify-cli ``` -------------------------------- ### Install Spicetify Creator Plugin with pnpm Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/the-basics.md Install a Spicetify Creator plugin using pnpm. Plugins extend the functionality of Spicetify Creator projects. ```shell pnpm add spcr- ``` -------------------------------- ### Install Spicetify Creator Source: https://github.com/spicetify/docs/blob/main/docs/development/extensions.md Use this command to install and run Spicetify Creator for an improved development experience with TypeScript, JSX, and hot reloading. ```bash npx spicetify-creator ``` -------------------------------- ### Install Spicetify Creator Plugin with npm Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/the-basics.md Install a Spicetify Creator plugin using npm. Plugins extend the functionality of Spicetify Creator projects. ```shell npm install spcr- ``` -------------------------------- ### Install Spicetify Creator Plugin with Yarn Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/the-basics.md Install a Spicetify Creator plugin using Yarn. Plugins extend the functionality of Spicetify Creator projects. ```shell yarn add spcr- ``` -------------------------------- ### URI Format Example Source: https://github.com/spicetify/docs/blob/main/src/content/docs/development/api-wrapper/methods/uri.md Illustrates the standard format for Spotify URIs. ```plaintext spotify:: ``` -------------------------------- ### Minimal Setup for WebNowPlaying Extension Source: https://github.com/spicetify/docs/blob/main/docs/customization/extensions.md Configure Spicetify for a minimal setup of the webnowplaying extension, disabling UI changes and color replacements before enabling the extension and applying changes. ```bash spicetify config inject_css 0 replace_colors 0 spicetify config extensions webnowplaying.js spicetify apply ``` -------------------------------- ### Get All Spicetify Commands Help Source: https://github.com/spicetify/docs/blob/main/docs/customization/config-file.md Displays a list of all available Spicetify commands and their usage. ```bash spicetify --help ``` -------------------------------- ### Install New Releases Custom App Source: https://github.com/spicetify/docs/blob/main/docs/customization/custom-apps.md Install the built-in New Releases custom app by specifying its folder name. This app aggregates new releases from followed artists and podcasts. ```bash spicetify config custom_apps new-releases spicetify apply ``` -------------------------------- ### Get Colors from Current Track Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/functions/color-extractor.md Example of how to get color information from the currently playing track's URI. ```typescript // Get color from current track const currentTrack = Spicetify.Player.data.item; const colors = await Spicetify.colorExtractor(currentTrack.uri); ``` -------------------------------- ### GraphQL Request Example with getAlbum Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/methods/graphql.md An example of making a GraphQL request to fetch album data. It includes variables for the album URI, locale, limit, and offset, as well as context for caching. ```typescript // Get all data displayed in an album page const { getAlbum } = Spicetify.GraphQL.Definitions; await Spicetify.GraphQL.Request( getAlbum, { uri: "spotify:album:3lvYv0ag1k3qiPCsEM3Wnku", locale: "en", limit: 50, offset: 0 }, { persistCache: true }, ); ``` -------------------------------- ### GET Request Example Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/methods/cosmos-async.md This snippet defines the signature for making a GET request using CosmosAsync, including optional body and headers parameters. ```typescript function get(url: string, body?: Body, headers?: Headers): Promise; ``` -------------------------------- ### Theme Color Configuration Examples Source: https://github.com/spicetify/docs/blob/main/docs/development/themes.md Shows how to define color values in color.ini, including hex, decimal, environment variables, and XResources. ```ini [Base] text = ${xrdb:color14} subtext = ${xrdb:foreground:#FFF} player = ${xrdb:background} ... ``` -------------------------------- ### Add to Queue Example Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/methods/platform.md Demonstrates how to add a single track to the playback queue using its URI. ```typescript // Add a track to the queue // 505 - Arctic Monkeys const track = { uri: "spotify:track:0BxE4FqsDD1Ot4YuBXwAPp" }; await Spicetify.Platform.PlayerAPI.addToQueue([track]); ``` -------------------------------- ### Initialize Extension with Hello World Source: https://github.com/spicetify/docs/blob/main/blog/2022-01-02-your-first-extension.md This code initializes the extension and logs 'Hello world!' to the console after the Spicetify platform is ready. Use the async modifier if you plan to use await. ```javascript // The async modifier allows for the user of await, which converts a promise into an object, when not using await, async is not necessary. (async function extension() { // The following code segment waits for platform to load before running the code, this is important to avoid errors. When using things such as Player or URI, it is necessary to add those as well. const { Platform } = Spicetify; if (!Platform) { setTimeout(extension, 300); return; } console.log('Hello world!'); })(); ``` -------------------------------- ### Set Multiple Configuration Values Source: https://github.com/spicetify/docs/blob/main/docs/customization/config-file.md Demonstrates how to set multiple configuration options simultaneously. ```bash # Set multiple values at once spicetify config current_theme Sleek color_scheme Dark ``` -------------------------------- ### Example settings.json for a Custom App Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/create-custom-apps.md Configure your app's display name, ID, and sidebar icons using this JSON file. ```json { "displayName": "My App", "nameId": "my-app", "icon": "css/icon.svg", "activeIcon": "css/icon.svg" } ``` -------------------------------- ### Generate Config and Apply Spicetify Source: https://github.com/spicetify/docs/blob/main/docs/cli/index.md Use these commands for the initial setup and application of Spicetify. The first command generates the configuration file, and the subsequent commands back up Spotify, apply Spicetify, and re-apply changes. ```bash spicetify ``` ```bash spicetify backup apply ``` ```bash spicetify apply ``` -------------------------------- ### Create a Custom App Component with React Source: https://github.com/spicetify/docs/blob/main/docs/development/custom-apps.md This example demonstrates setting up a basic React component for a custom Spicetify app. It shows how to import necessary Spicetify modules and define a render function that returns a React component. Note that JSX is not supported, so `React.createElement` must be used. ```javascript // Grab any variables you need const react = Spicetify.React; const reactDOM = Spicetify.ReactDOM; const { URI, React: { useState, useEffect, useCallback }, Platform: { History }, } = Spicetify; // The main custom app render function. The component returned is what is rendered in Spotify. function render() { return react.createElement(Grid, { title: "My Custom App" }); } // Our main component class Grid extends react.Component { constructor(props) { super(props); Object.assign(this, props); this.state = { foo: "bar", data: "etc" }; } render() { return react.createElement("section", { className: "contentSpacing", }, react.createElement("div", { className: "marketplace-header", }, react.createElement("h1", null, this.props.title), ), ), react.createElement("div", { id: "marketplace-grid", className: "main-gridContainer-gridContainer", "data-tab": CONFIG.activeTab, style: { "--minimumColumnWidth": "180px", }, }, [...cardList]), react.createElement("footer", { style: { margin: "auto", textAlign: "center", }, }, !this.state.endOfList && (this.state.rest ? react.createElement(LoadMoreIcon, { onClick: this.loadMore.bind(this) }) : react.createElement(LoadingIcon)), ), react.createElement(TopBarContent, { switchCallback: this.switchTo.bind(this), links: CONFIG.tabs, activeLink: CONFIG.activeTab, })); } } ``` -------------------------------- ### Slider Component Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/properties/react-components.md Example usage of the Slider React component. This component allows for creating interactive sliders with customizable properties like max value, step, and event handlers for drag start, move, and end. ```APIDOC ## Slider ### Description A React component for creating sliders. ### Props - **max** (number) - The maximum value of the slider. - **step** (number) - The step increment for the slider. - **value** (number) - The current value of the slider. - **onDragStart** (function) - Callback function when drag starts. - **onDragMove** (function) - Callback function when the slider value changes during drag. Receives the new value as an argument. - **onDragEnd** (function) - Callback function when drag ends. Receives the final value as an argument. ### Example Usage ```tsx const Slider = () => { const [value, setValue] = useState(0); return ( {}} onDragMove={setValue} onDragEnd={(value) => {console.log(`final value is ${value}`)}} > ); } ``` ``` -------------------------------- ### Automate Backup, Apply, and Launch Spotify Source: https://github.com/spicetify/docs/blob/main/docs/cli/commands.md Automatically backup (if needed), apply modifications, and then launch Spotify. Useful as a shortcut target. ```bash spicetify auto ``` -------------------------------- ### Configure Spotify Path for Scoop Installation Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md If Spotify was installed via Scoop, use these commands to find its installation path and configure Spicetify to use it. ```console $ scoop prefix spotify C:\Users\\scoop\apps\spotify\current ``` ```powershell spicetify config spotify_path "C:\Users\\scoop\apps\spotify\current" ``` -------------------------------- ### Install Legacy Spicetify on Linux/macOS Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Installs a specific legacy version of Spicetify on Linux or macOS using bash. The version number is passed as an argument to the install script. ```bash curl -fsSL https://raw.githubusercontent.com/spicetify/cli/main/install.sh -o /tmp/install.sh sh /tmp/install.sh 1.2.1 ``` -------------------------------- ### Configure Spotify Path (Flatpak) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Sets the Spotify installation path for Spicetify when using Flatpak. Use the full absolute path. ```bash spicetify config spotify_path "/var/lib/flatpak/app/com.spotify.Client/x86_64/stable/active/files/extra/share/spotify" ``` -------------------------------- ### Creating and Initializing a Playbar Button Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/classes/playbar.md Provides an example of creating a new `Button` instance for the playbar. It covers setting initial properties like label, icon, click handler, and registration behavior. ```typescript // By default, the button will be registered to the player on creation. // You can disable this by setting registerOnCreate to false. // Each button comes with a preconfigured Tippy instance that aims to mimic the original Spotify tooltip. const button = new Spicetify.Playbar.Button( "My Button", "play", (self) => { // Do something when the button is clicked. }, false, // Whether the button is disabled. false, // Whether the button is active. ); ``` -------------------------------- ### Seek Backward Example Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/methods/platform.md Example of seeking backward in the current playback by 10 seconds. ```typescript // Seek backward 10 seconds await Spicetify.Platform.PlayerAPI.seekBackward(10000); ``` -------------------------------- ### Configure Spotify Path (spotify-launcher) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Sets the Spotify installation path for Spicetify when using the spotify-launcher on Arch Linux. Use the full absolute path. ```bash spicetify config spotify_path "$HOME/.local/share/spotify-launcher/install/usr/share/spotify" ``` -------------------------------- ### Install Spicetify via Chocolatey (Windows) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Install Spicetify using the Chocolatey package manager on Windows. ```powershell choco install spicetify-cli ``` -------------------------------- ### Get Help for Config Command Source: https://github.com/spicetify/docs/blob/main/docs/customization/config-file.md Provides detailed help information specifically for the 'config' command. ```bash spicetify --help config ``` -------------------------------- ### Install Spicetify via Winget (Windows) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Install Spicetify using the Windows Package Manager (winget). ```powershell winget install Spicetify.Spicetify ``` -------------------------------- ### fetchExtractedColors Example Source: https://github.com/spicetify/docs/blob/main/src/content/docs/development/api-wrapper/methods/graphql.md Example of how to use the `Spicetify.GraphQL.Request` method with the `fetchExtractedColors` definition, including the required `uris` parameter. ```APIDOC ```ts Spicetify.GraphQL.Request( Spicetify.GraphQL.Definitions.fetchExtractedColors, { uris: ['spotify:image:ab67616d00001e02f16ab998eea7e598a0928ad7'] }, ); ``` ``` -------------------------------- ### Install Node Package with pnpm Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/the-basics.md Install any Node.js package for use in your Spicetify Creator project using pnpm. ```shell pnpm add ``` -------------------------------- ### Install Node Package with Yarn Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/the-basics.md Install any Node.js package for use in your Spicetify Creator project using Yarn. ```shell yarn add ``` -------------------------------- ### Install Node Package with npm Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/the-basics.md Install any Node.js package for use in your Spicetify Creator project using npm. ```shell npm install ``` -------------------------------- ### Set Theme via CLI Source: https://github.com/spicetify/docs/blob/main/docs/customization/config-file.md Example of setting the current theme using the 'spicetify config' command. ```bash # Set a theme spicetify config current_theme Sleek ``` -------------------------------- ### Fetching Client Version with GET Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/methods/cosmos-async.md Demonstrates how to fetch the current client version using the `get` method of CosmosAsync. ```typescript await Spicetify.CosmosAsync.get("sp://desktop/v1/version"); ``` -------------------------------- ### Grant Write Permissions (Spotify from APT) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Provides write permissions to Spotify's directory and its Apps subdirectory when installed via APT. ```bash sudo chmod a+wr /usr/share/spotify sudo chmod a+wr /usr/share/spotify/Apps -R ``` -------------------------------- ### Creating and Managing Context Menu Items Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/classes/context-menu.md Demonstrates how to create a new context menu item, define its behavior, and add it to a sub-menu. It also shows how to register and deregister sub-menus, and dynamically update them. ```APIDOC ## Spicetify.ContextMenu.Item ### Description Represents a single item within a context menu. ### Constructor `new Spicetify.ContextMenu.Item(name: string, callback: function, condition: function, icon: string, isDestructive: boolean)` - **name** (string) - The text to display for the menu item. - **callback** (function) - The function to execute when the item is clicked. - **condition** (function) - A function that returns `true` if the item should be visible, `false` otherwise. - **icon** (string) - The SVG icon to display next to the menu item (e.g., `Spicetify.SVGIcons["play"]`). - **isDestructive** (boolean) - Whether this item represents a destructive action. ### Example ```ts const menuItem = new Spicetify.ContextMenu.Item( "My Menu Item", () => { Spicetify.showNotification("My Menu Item clicked!"); }, () => true, Spicetify.SVGIcons["play"], false ); ``` ## Spicetify.ContextMenu.SubMenu ### Description Represents a sub-menu within the context menu. ### Constructor `new Spicetify.ContextMenu.SubMenu(name: string, items: Spicetify.ContextMenu.Item[], condition: function, isDestructive: boolean)` - **name** (string) - The text to display for the sub-menu. - **items** (Array) - An array of menu items to include in this sub-menu. - **condition** (function) - A function that returns `true` if the sub-menu should be visible, `false` otherwise. - **isDestructive** (boolean) - Whether this sub-menu represents a destructive action. ### Methods #### `register()` Registers the sub-menu to be displayed in the context menu. #### `deregister()` Deregisters the sub-menu, removing it from the context menu. #### `addItem(item: Spicetify.ContextMenu.Item)` Adds a new menu item to the sub-menu. ### Properties #### `name` (string) Gets or sets the name of the sub-menu. ### Example ```ts // Create a new sub menu const subMenu = new Spicetify.ContextMenu.SubMenu( "My Sub Menu", [menuItem], // Assuming menuItem is defined as above () => true, false ); // Register the sub menu subMenu.register(); // Deregister the sub menu subMenu.deregister(); // Change the sub menu's name subMenu.name = "My New Sub Menu"; // Add a new menu item to the sub menu subMenu.addItem(new Spicetify.ContextMenu.Item( "My New Menu Item", () => { Spicetify.showNotification("My New Menu Item clicked!"); }, () => true, Spicetify.SVGIcons["play"], false )); ``` ``` -------------------------------- ### Run Spicetify with No Arguments Source: https://github.com/spicetify/docs/blob/main/docs/cli/commands.md Run with no arguments to generate the config file on first run, or verify your setup. ```bash spicetify ``` -------------------------------- ### Run Spotify in Watch Mode for Extensions Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/building-and-testing.md Starts Spotify with live reloading for your JavaScript extensions. Requires a prior build. ```shell spicetify watch -le ``` -------------------------------- ### Detailed Metadata Object Example Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/types/metadata.md Illustrates a comprehensive example of a `Metadata` object, showcasing a wide range of properties related to track actions, album details, artist information, canvas elements, collection status, and more. Note that this is an example and may not include all possible properties. ```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; } ``` -------------------------------- ### Configure Prefs Path for Flatpak Spotify Source: https://github.com/spicetify/docs/blob/main/src/content/docs/getting-started.mdx Locate and set the path to the Spotify preferences file for Flatpak installations. ```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 ``` -------------------------------- ### Apply Theme and Color Scheme (Troubleshooting) Source: https://github.com/spicetify/docs/blob/main/docs/customization/themes.md When colors are not changing, ensure both the theme and a specific color scheme are correctly configured and applied. ```bash spicetify config current_theme MyTheme color_scheme Dark spicetify apply ``` -------------------------------- ### GraphQL Query Example Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/methods/graphql.md This is an example of a GraphQL query used for fetching extracted colors. It demonstrates the structure and fields involved in such a request. ```graphql query fetchExtractedColors($uris: [ID!]!) { extractedColors(uris: $uris) { __typename ... on ExtractedColors { colorRaw { hex isFallback } colorDark { hex isFallback } colorLight { hex isFallback } } ... on Error { message } } } ``` -------------------------------- ### Configure Spicetify with spicetify-nix (Nix/NixOS) Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Declarative configuration for Spicetify using the spicetify-nix flake. This example shows how to enable Spicetify, include extensions, and set a theme and color scheme. ```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"; }; } ``` -------------------------------- ### Install Legacy Spicetify on Windows Source: https://github.com/spicetify/docs/blob/main/docs/getting-started.md Installs a specific legacy version of Spicetify on Windows using PowerShell. Ensure you specify the desired version. ```powershell $v="1.2.1"; Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/cli/main/install.ps1" | Invoke-Expression ``` -------------------------------- ### Making a GraphQL Request Source: https://github.com/spicetify/docs/blob/main/src/content/docs/development/api-wrapper/methods/graphql.md This example demonstrates how to make a GraphQL request using the `Spicetify.GraphQL.Request` method. It shows how to pass the operation definition and the required variables. ```APIDOC ## Making a GraphQL Request ### Description This example demonstrates how to make a GraphQL request using the `Spicetify.GraphQL.Request` method. It shows how to pass the operation definition and the required variables. ### Method `Spicetify.GraphQL.Request(definition, variables)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript Spicetify.GraphQL.Request( Spicetify.GraphQL.Definitions.fetchExtractedColors, { uris: /* array of IDs */ }, ); ``` ### Response #### Success Response (200) Depends on the GraphQL query executed. #### Response Example ```json { "data": { "fetchExtractedColors": [ { "color": "#abcdef" } ] } } ``` ``` -------------------------------- ### Enable Full App Display Extension Source: https://github.com/spicetify/docs/blob/main/src/content/docs/customization/extensions.md This command enables the 'Full App Display' extension, which provides a full-screen album art view. Ensure you run `spicetify apply` after executing this command. ```bash spicetيف config extensions fullAppDisplay.js spicetify apply ``` -------------------------------- ### Example Usage of DragHandler Hook Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/properties/react-hook.md This example demonstrates how to use the `DragHandler` hook to make a `div` element draggable with a specific URI and label. ```tsx const DraggableComponent = () => { // Do I Wanna Know? by Arctic Monkeys const uri = "spotify:track:5FVd6KXrgO9B3JPmC8OPst"; const label = "Do I Wanna Know? - Arctic Monkeys"; const handleDragStart = Spicetify.ReactHook.DragHandler([uri], label); return (
{label}
); } ``` -------------------------------- ### Run Spotify in Watch Mode for Custom Apps Source: https://github.com/spicetify/docs/blob/main/docs/development/spicetify-creator/building-and-testing.md Starts Spotify with live reloading for your custom apps. Requires a prior build. ```shell spicetify watch -la ``` -------------------------------- ### Create and Manage Context Menu Source: https://github.com/spicetify/docs/blob/main/docs/development/api-wrapper/classes/context-menu.md Demonstrates creating a context menu item, a sub-menu, registering it, and then modifying it by changing its name and adding another item. Use this to build custom menu options. ```typescript // Create a new menu item const menuItem = new Spicetify.ContextMenu.Item( "My Menu Item", () => { Spicetify.showNotification("My Menu Item clicked!"); }, () => true, Spicetify.SVGIcons["play"], false, ); // Create a new sub menu const subMenu = new Spicetify.ContextMenu.SubMenu( "My Sub Menu", [menuItem], () => true, false, ); // Register the sub menu subMenu.register(); // Deregister the sub menu subMenu.deregister(); // Change the sub menu's name subMenu.name = "My New Sub Menu"; // Add a new menu item to the sub menu subMenu.addItem(new Spicetify.ContextMenu.Item( "My New Menu Item", () => { Spicetify.showNotification("My New Menu Item clicked!"); }, () => true, Spicetify.SVGIcons["play"], false, )); ``` -------------------------------- ### Get Font Style for a Variant Source: https://github.com/spicetify/docs/blob/main/src/content/docs/development/api-wrapper/functions/get-font-style.md Use this function to get the CSS style for a valid font variant. It returns 'viola' for any invalid variant provided. ```typescript function getFontStyle(font: Variant): string; ``` ```typescript const style = getFontStyle("forte"); ``` ```typescript // Returns "viola" if given an invalid variant // Equivalent to `getFontStyle("viola");` const style = getFontStyle("invalid-variant"); ```