A web app for multi-select drag-and-drop playlist editing
Features • Live Demo • Setup • Tech Stack
Spotify's built-in playlist editor only lets you drag one song at a time. Reordering a large playlist is tedious and time-consuming.
This app lets you select multiple songs and drag them all at once to their new position. What takes 50 drags in Spotify takes just 1 here.
- Multi-Select — Click to select multiple songs
- Multi-Drag — Drag any selected song to move ALL selected songs together
- Move to Top/Bottom — Quick actions for bulk positioning
- Batch Save — Make multiple changes, then save once
- Discard Changes — Undo all changes before saving
- Spotify-Inspired UI — Dark theme with familiar green accents
- Responsive Design — Works on desktop and mobile
- Exit Protection — Warns before leaving with unsaved changes
https://imstillblue.github.io/Spotify-playlist-editor
Due to Spotify's API restrictions, each user needs to create their own Spotify Developer app. This is a one-time setup (~2 minutes).
- Go to developer.spotify.com/dashboard
- Log in with your Spotify account
- Create App — Fill in any name/description
- Set Redirect URI to:
https://imstillblue.github.io/Spotify-playlist-editor/callback - Check "Web API" under APIs used
- Save and copy your Client ID
- Open the app and paste your Client ID
That's it! Your credentials stay in your browser — nothing is sent to any server.
| Category | Technology |
|---|---|
| Framework | React 18 + Vite |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Drag & Drop | dnd-kit |
| Hosting | GitHub Pages |
# Install dependencies
npm install
# Run dev server
npm run dev
# Build for production
npm run build- OAuth 2.0 PKCE authentication
- BYOK (Bring Your Own Key) setup
- View editable playlists
- Multi-select songs
- Multi-drag reordering
- Move to top/bottom
- Remove tracks
- Save/discard changes
- Undo/redo history
- Search within playlist
- Sort by artist/album/date
- Duplicate detection
- Keyboard shortcuts
Spotify limits apps in "Development Mode" to 25 users, and getting Extended Quota requires being an organization. By using your own API credentials:
- No user limits — Your app, your quota
- Privacy — Your credentials never leave your browser
- No server costs — Runs entirely client-side
MIT License — see LICENSE
Not affiliated with Spotify. All Spotify trademarks are property of Spotify AB.
Made with React and caffeine