Its built-in features include:
- Typescript and React syntax
- Import node packages
- CSS/SCSS with PostCSS support
- Extremely fast compile time with esbuild.
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
yarn 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.
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
You can use node packages in your app by installing them with your package manager.
npm install <package-name>
yarn add <package-name>
then simply import the package in the code and you're good to go.
import packageName from '<package-name>';
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:
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>
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