Spotify Manager is a static browser app for advanced Spotify playlist editing and analysis. It is designed to run on GitHub Pages or any other static host without an application server.
- No backend server is required.
- Spotify OAuth runs directly in the browser with Authorization Code + PKCE.
- Setup values, tokens, and granted scopes are stored in browser storage.
- The app can run from GitHub Pages, Netlify, Cloudflare Pages, or a local static server.
- First-run setup wizard walks through Spotify app creation and stores your Client ID locally in the browser.
- Sign in with Spotify using OAuth Authorization Code + PKCE.
- Browse your playlist library.
- Load playlist tracks with expanded metadata, including:
- Track details: title, artists, album, explicit, popularity, duration, added at.
- Audio feature details: tempo/BPM, key, mode, danceability, energy, valence, loudness, acousticness, instrumentalness, speechiness, liveness, time signature.
- Local workflow fields: custom order index and CSV-provided genre tags.
- Sort directly in-table by clicking column headers.
- Right-click headers for quick filters; active filters are shown as chips.
- Resize and reorder columns in the table.
- Select rows and remove songs from the working playlist view.
- Deduplicate exact duplicates and review near duplicates.
- Shuffle tracks one or more passes.
- Mix Assist ordering with configurable weights in
config/mix-weights.json. - Genre sequencing for CSV-backed workflows.
- Outlier detection with explainable scoring based on audio profile and genre rarity.
- Filter tracks by metadata and create a new playlist from filtered results.
- Undo and redo action history.
- Transition diagnostics for adjacent tracks in the current order.
The table view is the main workspace for playlist cleanup, sorting, filtering, and metadata inspection.
The mixing workflow helps sequence tracks with configurable weighting so transitions feel more intentional.
The analysis panel highlights outliers, genre rarity, and transition diagnostics so you can spot weak points in a playlist quickly.
- Spotify developer access is required to authenticate and create or export playlists.
- Spotify API responses may not include every metadata field for every track.
- For richer metadata workflows, export a playlist CSV from
https://exportify.net/and import it into the app.
The app uses these Spotify Web API scopes:
playlist-read-privateplaylist-read-collaborativeplaylist-modify-privateplaylist-modify-publicuser-read-private
Run a local static server:
npm startThis serves the repo at http://127.0.0.1:3000/.
This repo includes a GitHub Actions workflow that publishes the repository directly to GitHub Pages.
- Push the repository to GitHub.
- Open
Settings->Pagesin the GitHub repo. - Set
SourcetoGitHub Actions. - Push to
main, or run theDeploy GitHub Pagesworkflow manually. - Wait for the deployment to finish.
- Open the site at
https://<your-user>.github.io/<your-repo>/. - In Spotify Developer Dashboard, add this exact redirect URI:
https://<your-user>.github.io/<your-repo>/api/auth/spotify/callback
- Open the deployed site.
- Click
Setup Spotify Config. - Paste your Spotify Client ID and save.
If you want to deploy without GitHub Actions, publish the repository as a static site and keep these paths intact:
index.htmlsrc/renderer/api/auth/spotify/callback/config/
Run the test suite with Node:
npm test- GitHub Pages serves project sites under a path prefix like
/Spotify-Manager/; the app now resolves redirect and callback URLs relative to that prefix. - Tabulator is loaded from jsDelivr CDN so
node_modulesdoes not need to be deployed. - The callback route is a real static page at
api/auth/spotify/callback/index.html, so Spotify can redirect directly back into the app.
- Spotify may return null for some audio fields on certain tracks.
- Export creates a new playlist in Spotify using the current visible table order.