Skip to main content

The Basics

Introduction​

Spicetify Creator is a tool to compile modern Typescript/Javascript code to Spicetify extensions and custom apps.

Its built-in features include:

Getting Started​

The easiest way to start using Spicetify Creator is with Create Spicetify App.
Create Spicetify App allows you to effortlessly create new Spicetify Creator projects through the terminal.

Install Node.js and either npm or Yarn.
Open the terminal in your desired directory and enter the following command

  npx create-spicetify-app

The command will ask you 3-4 simple questions about the app you plan to create and generate a Spicetify Creator project accordingly.
After creation, read one of the following pages depending on what type of app you chose to create.

CSS​

To apply a CSS/SCSS file to your app you have to import it like this:

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

There is also support for CSS Modules and you import them like this:

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

Node packages​

You can use node packages in your app by installing them with your package manager.

  npm install <package-name>

then simply import the package in the code and you're good to go.

import packageName from '<package-name>';

Plugins​

Plugins are node packages designed for Spicetify Creator projects, and they support either extensions, custom apps, or both.
The convention is to name every plugin like so: spcr-<name>.

For a list of plugins: https://github.com/FlafyDev/spicetify-creator-plugins

To install and import a plugin:

  npm install spcr-<name>
import plugin from 'spcr-<name>';

Example of 2 plugins you can already use in your own apps:​

Update Spicetify Creator​

  npm update spicetify-creator