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:

TypeScript and React syntax
Import node packages
CSS/SCSS with PostCSS support
Extremely fast compile time with esbuild.
Plugins

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

  yarn create spicetify-app

  pnpm 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.

Create ExtensionsCreate Custom Apps

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>

  yarn add <package-name>

  pnpm add <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>

  yarn add spcr-<name>

  pnpm add 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

  yarn upgrade spicetify-creator

  pnpm update spicetify-creator

Edit this page