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
- npm
- Yarn
- pnpm
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.
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
- Yarn
- pnpm
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
- Yarn
- pnpm
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
- Yarn
- pnpm
npm update spicetify-creator
yarn upgrade spicetify-creator
pnpm update spicetify-creator