Skip to content
This repository was archived by the owner on May 4, 2021. It is now read-only.
khanhas edited this page May 15, 2018 · 1 revision

If you're experienced with Javascript, React, Redux and want to make an app, here some tips:

  • App folder name in Spicetify\Apps folder has to be in lowercase alphabet only. No space, or any symbol.
  • To organize apps in skin easily, put a metadata section at top of index.html file with this template:
<!-- 
// START METADATA
// NAME: Your app name
// AUTHOR: Your name
// DESCRIPTION: A little information about what it does
// END METADATA
 -->
  • Make a app from scratch might be really trivial, I suggest you take a look at available apps, pick one that has nearest set of features to your desired app. Then alternate part of its code to your purpose. By doing that, you can quickly make a app with native looks and behaviours.
  • All Spotify apps are compiled to bundle structure:
    Module is an array with first item is executable function and second item is module's dependencies.
Module1Number:[function(require,module,exports){
    //Do stuff
},{"Dependency1":Dependency1Number, "Dependency2":Dependency2Number}], Module2Number:[function(require,module,exports){
    //Do stuff
},{"Dependency1":Dependency1Number, "Dependency2":Dependency2Number}]
  • A module could be a dependency of another module. When you need to use one module, specify a dependency name along with its module number to dependency object in your module array. For example, your custom module 500 needs module 124 to set up profile:
...,
500:[function(require,module,exports){
    const profileSetup = require("profile");
    profileSetup.init();
},{"profile":124}]
  • Use bridge module to request detail metadata of a lot of thing like artists, album, tracks.
  • libURI might be useful to convert URI/URL to an uri object that easier to categorize.
  • live module can be used to communicate arcross modules through specified URI. URI can be anything but try keep it to unique.
  • spotify-element is Spotify's customized jQuery.

I will add more when I find anything interesting in the future. If you are stuck somewhere, feel free to drop a Issuse post or create a thread in Spicetify Spectrum. Although my Javascript knowledge is really limited, I will try my best to answer.

Clone this wiki locally