spicetify / spicetify-creator

Easily make Spicetify extensions and custom apps.

Spicetify Creator

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

Features

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

Docs

Check out Spicetify's docs!

Made with Spicetify Creator

• https://github.com/spicetify/spicetify-creator

spicetify-creator's Issues

Error: Command failed: spicetify -c when running local build

I'm trying to set up a github action that automatically builds and pushes a new version to the dist branch on new pushes to master, but the action fails because spicetify-creator uses spicetify -c to get the path of the config dir. As far as I know that path isn't needed when running npm run build-local.

Currently the action fails, because the environment doesn't have spicetify installed. See the github action log here.

Better Playlist Editor/Organizer

📝 Provide a description of the new feature

I have over 900 songs in my Liked Songs playlist. The currently available online tools for organizing my music don't really allow me to sort by genre, then use that sort to add to a new playlist named for that genre.

I am envisioning a nice GUI, the ability to sort by genre, checkboxes or just drag and select, then drag/drop to a new playlist. Maybe auto create a playlist from the genre selected.

I have a huge varied collection, rap/hip-hip/R&B/Slow jams. Bass heavy stuff to show off the system in my car, rock and blues for playing on my motorcycle, funk, pfunk, 50/60s, country, classical, etc. All in my Liked Songs and all songs I have loved over my 57 years of life. Songs that mean a lot to me or set a certain mood for me etc.

We really need a much better way to edit, create and delete playlists, to organize our music lives in Spotify.

Oh, and did I mention for desktop PC? Windows and Linux? I organize everything on PC then just plug my phone in and go.

I have asked for something like this for years. I have even contributed to folks who said they were making it, but never did.

Thanks in advance to all you galaxy brains from a truck driving Navy Vet.

➕ Additional Information

I think everything relevant is above. It can be a plugin, extension, or separate software, as long as it works. <3

React Query types

📝 Provide a description of the new feature

Could I get react-query types implemented automatically like react and reactdom? I would do it myself but I don't know much about this sort of thing.

➕ Additional Information

No response

full screen

🔍 Have you checked Spicetify.app page for your issue?

• I have checked the FAQ

🔍 Is there already an issue for your problem?

• I have checked older issues, open and closed

ℹ Environment / Computer Info

- Spotify version: 1.2.30.1135.g02fef27a
- Spicetify version: v2.30.0 (2023-01-11)

📝 Description

mistake

📸 Screenshots

Kayit.2024-02-01.182037.mp4

Duplicate full screen icon

📝 Provide a description of the new feature

After installing, I saw two Full-Screen buttons at the bottom right, can you write a snippet or sth to hide the default one? I tried sth like this .main-miniPlayer { display: none;} but did not work.

➕ Additional Information

No response

Change from "esbuild-plugin-postcss2"

https://github.com/g45t345rt/esbuild-style-plugin seems like a good alternative

[spcr-settings] ValueError while using onChange with addInput

🔍 Have you checked Spicetify.app page for your issue?

• I have checked the FAQ

🔍 Is there already an issue for your problem?

• I have checked older issues, open and closed

ℹ Environment / Computer Info

Spotify for Windows (64 bit)
1.2.37.701.ge66eb7bc
Spicetify v2.36.11
xpui_2024-05-03_1714757530304_e66eb7b
cef_122.1.13+gde5b724+chromium-122.0.6261.130
Runtime: Chrome
Build System: CMake

📝 Description

When trying to create an input settings element using the spcr-settings and adding a onChange event on it this happens

vendor~xpui.js:1 Uncaught TypeError: onChange is not a function
    at onChange (deej-spicetify.js:216:15)
    at Object.Me (vendor~xpui.js:1:1881880)
    at He (vendor~xpui.js:1:1882034)
    at vendor~xpui.js:1:1901916
    at Vo (vendor~xpui.js:1:1902010)
    at Bo (vendor~xpui.js:1:1902424)
    at vendor~xpui.js:1:1907862
    at ul (vendor~xpui.js:1:1971233)
    at Pe (vendor~xpui.js:1:1881013)
    at jo (vendor~xpui.js:1:1903716)

the code that's causing this is this

settings.addInput("deej-retry-count", "Retry count", "5", "number", () => {
    retryMaxCount = parseInt(settings.getFieldValue("deej-retry-count"));
    console.log("Deej retry count changed to  ", retryMaxCount);
});

Using this method for a toggle works just fine

📸 Screenshots

No response

npm package not found

🔍 Have you checked Spicetify.app page for your issue?

• I have checked the FAQ

🔍 Is there already an issue for your problem?

• I have checked older issues, open and closed

ℹ Environment / Computer Info

- Spotify version: Spotify for macOS (Intel) 1.1.95.893.g6cf4d40c
- Spicetify version: 2.14.0

📝 Description

running npx create-spictify-app gives the following error.

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/create-spictify-app - Not found
npm ERR! 404
npm ERR! 404  'create-spictify-app@latest' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

📸 Screenshots

No response

Is it possible to launch custom app with preset state?

📝 Provide a description of the new feature

I would like to pass a series of URIs to my app, and launch it via the context menu.

➕ Additional Information

The process for doing this is outlined here, but I'm not sure how or if it's possible with Spicetify Creator, as I don't see the main render function itself.

Dependencies using vulnerable postcss version

spicetify-creator is using typescript-plugin-css-modules, which has dependencies using on a vulnerable version of postcss. For example postcss-filter-plugins depends on version 6 of postcss, while the current is version 8.

There is an open issue on typescript-plugin-css-modules about this issue located here. But doesn't look like anything is being done about it.
The issue has been created the 7th of january this year, while the last release was the 5th of june 2021.

Is there anything to be done to resolve this, or do we wait for the dependencies to update (which will take a while, or may not happen at all).

React import from Spicetify doesn't work

🔍 Have you checked Spicetify.app page for your issue?

• I have checked the FAQ

🔍 Is there already an issue for your problem?

• I have checked older issues, open and closed

ℹ Environment / Computer Info

- Spotify version: 1.2.16.947.gcfbaa410
- Spicetify version: 2.22.1

📝 Description

Spicetify.React and ReactDOM aren't available immediately after the app start because React is binded with the wrapper since Spicetify 2.22.0, not in xpui itself

📸 Screenshots

spicetify-creator fails on local build; sources mismatch npm

hello. i'm trying to build spicetify-creator locally, but without much luck.

git clone https://github.com/spicetify/spicetify-creator
cd spicetify-creator
yarn
cd packages/spicetify-creator
yarn
yarn build
ls dist
# => buildCustomApp.js       buildExtension.js       helpers                 index.js                scripts.js

diff -r dist dist-npm
# => Only in dist-npm: temp

1. this mismatches what's published on npm (on npm, there's a dist/temp folder for some reason)
2. when i try to run the built CLI, it doesn't work:

node dist/index.js

node:fs:453
    return binding.readFileUtf8(path, stringToFlags(options.flag));
                   ^

Error: ENOENT: no such file or directory, open './src/settings.json'
    at Object.readFileSync (node:fs:453:20)
    at build (/Users/kipras/infra/local/spicetify/spicetify-creator/packages/spicetify-creator/dist/scripts.js:19:46)
    at Object.<anonymous> (/Users/kipras/infra/local/spicetify/spicetify-creator/packages/spicetify-creator/dist/index.js:6:21)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
    at node:internal/main/run_main_module:28:49 {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: './src/settings.json'
}

Node.js v20.11.1

seems like an issue with the inDirectory thing

miniplayer is too large

📝 Provide a description of the new feature

make it so that the length and height are not locked, and when we resize we can make it into a rectangle instead f just a square. and make the minimum length and width smaller.of

➕ Additional Information

No response

"spicetify-creator-scripts" instead of a "./creator" folder.

I think it's bad that every project that uses spicetify creator has a ./creator folder.
My idea is to import all of the stuff from a spicetify-creator-scripts package instead of the ./creator folder. (Like react-scripts I think)