https://github.com/therepanic/spotilyrics
Spotify + VS Code + lyrics = spotilyrics ❤️
https://github.com/therepanic/spotilyrics
lyrics mp3 music song song-lyrics spotify spotilyrics vscode vscode-extension
Last synced: 3 months ago
JSON representation
Spotify + VS Code + lyrics = spotilyrics ❤️
- Host: GitHub
- URL: https://github.com/therepanic/spotilyrics
- Owner: therepanic
- License: unlicense
- Created: 2025-08-01T16:47:51.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2026-03-22T12:12:18.000Z (3 months ago)
- Last Synced: 2026-03-23T03:39:43.203Z (3 months ago)
- Topics: lyrics, mp3, music, song, song-lyrics, spotify, spotilyrics, vscode, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 2.72 MB
- Stars: 65
- Watchers: 1
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
See synchronized Spotify lyrics inside VS Code while coding.
---
## 
---
> [!WARNING]
> Due to [Spotify API changes in February 2026](https://developer.spotify.com/documentation/web-api/tutorials/february-2026-migration-guide), **Spotify Premium is now required** to use this extension. Starting from February 11, 2026, Spotify requires Premium for app owners using Development Mode. Sorry for the inconvenience.
## ✨ Features
- 📌 **Live lyrics sync** with your Spotify playback.
- 🎨 Lyrics colors auto-themed from album cover (via `colorthief`).
- 🖥️ Smooth **side panel view** – code on the left, lyrics on the right.
- 🖱️ **Click-to-seek** – click on any lyric line to jump to that moment in the track (like Spotify app).
- 📱 **Mobile mode** – black unplayed lines, white played lines (like Spotify mobile app).
- 🔑 Simple **one-time login** using your own Spotify Client ID.
- 🚪 Quick logout command to reset session.
- ⚡ Set a **maximum tracks cache size** for lyrics syncing.
---
## ⚡️ Installation
1. Open **VS Code** → Extensions → search `spotilyrics` or [install from VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=therepanic.spotilyrics).
2. Run the command:
```
Show Spotify Lyrics via Spotilyrics
```
---
## 🔑 Authentication (one-time setup)
1. Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard).
2. Create an app → copy **Client ID**.
3. **Important:** set the **Redirect URI** for your app to: `http://127.0.0.1:/callback` (default: `8000`).
You can change the port in settings (`spotilyrics.port`) or via the command `Set Spotify OAuth Callback Port`.
4. Run the `Show Spotify Lyrics via Spotilyrics` command.
5. Paste your **Client ID** in the panel and log in.
6. Enjoy synced lyrics while coding! 🎶
> ℹ️ Why? – To respect Spotify API rate limits, you need your own ID.
---
## ⌨️ Commands
- `Show Spotify Lyrics via Spotilyrics` (`spotilyrics.lyrics`) – open synced lyrics panel.
- `Logout from Spotilyrics` (`spotilyrics.logout`) – clear session and re-auth when needed.
- `Set Tracks Cache Max Size` (`spotilyrics.tracksCacheMaxSize`) – configure the maximum number of tracks cached for lyrics.
- `Set Spotify OAuth Callback Port` (`spotilyrics.port`) – set the local callback port used for Spotify OAuth.
- `Toggle Mobile Mode` (`spotilyrics.mobileMode`) – switch between normal and mobile mode.
- `Toggle Song Title` (`spotilyrics.songTitle`) – toggle the song title in the lyrics panel.
- `Toggle Song Icon` (`spotilyrics.songIcon`) – toggle the song icon in the lyrics panel.
- `Toggle Song Artists` (`spotilyrics.songArtists`) – toggle the song artists in the lyrics panel.
---
## ⚙️ Tech stack
- [Spotify Web API](https://developer.spotify.com/documentation/web-api/)
- [LRClib](https://lrclib.net/) for lyrics with timing
- [colorthief](https://lokeshdhakar.com/projects/color-thief/) for cover-based theme
- TypeScript + VS Code WebView
---
## 📜 License
This project is licensed as **Unlicensed**.
Feel free to use, hack, and remix it.
---
Made with ❤️ by therepanic. Your code has a soundtrack now.