Display your currently playing Spotify track with a customizable widget for GitHub README profiles and websites.
- Introduction
- Features
- Quick Start
- Prerequisites
- Setup Guide
- GitHub README Integration
- Theme Showcase
- Customization Options
- Troubleshooting
- License
- Credits
Spotify Widgetify is a web widget that displays your currently playing Spotify track, designed to be embedded in GitHub profile READMEs and websites. It automatically updates to reflect your currently playing or recently played tracks on Spotify.
- Real-time display of your current or recently played Spotify tracks
- Multiple theme options: Default, Vinyl, iPod, Retro, Windows XP
- Light and dark mode support for most themes
- Customizable colors for select themes
- Responsive design that works in GitHub READMEs and websites
- Automatic updates when your music changes
- Set up your Spotify application credentials
- Deploy the application or use the hosted version
- Add the widget to your GitHub README using the embed code
- Customize the appearance with theme, style, and color parameters
- Spotify account
- Spotify Developer application with API credentials
- GitHub account (for README embedding)
- Vercel account (optional, for deployment)
- Go to the Spotify Developer Dashboard
- Log in with your Spotify account
- Click "Create App"
- Fill in the required information:
- App name: "Spotify Widgetify" (or your preferred name)
- App description: Brief description of your widget
- Redirect URI: The URL where your application will be hosted (e.g.,
https://your-app-name.vercel.app/callback)
- Save your
Client IDandClient Secretfor the next steps
Create a .env file with the following variables:
CLIENT_ID=your_spotify_client_id
CLIENT_SECRET=your_spotify_client_secret
REFRESH_TOKEN=your_spotify_refresh_token
To obtain a REFRESH_TOKEN:
- Create an authorization URL with your client ID:
https://accounts.spotify.com/authorize?client_id=YOUR_CLIENT_ID&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=YOUR_REDIRECT_URI
- Visit the URL and authorize the application
- You'll be redirected to your redirect URI with a code parameter
- Exchange this code for a refresh token using the Spotify API's token endpoint
- Fork this repository
- Connect your fork to Vercel
- Configure the environment variables in the Vercel dashboard
- Deploy the application
- Clone the repository
- Install dependencies:
pip install -r requirements.txt - Run the application:
uvicorn app.main:app --reload
Add the widget to your GitHub profile README using the following Markdown:
<div align="center">
<a href="https://your-app-url.vercel.app/link">
<img src="https://your-app-url.vercel.app/github?theme=default&style=dark" alt="Spotify Now Playing" width="400" />
</a>
</div>Replace your-app-url.vercel.app with your actual deployed application URL.
Below are all available themes with their corresponding embed codes:
| Theme | Preview |
|---|---|
| Default (Light) | |
| Default (Dark) | |
| Vinyl | |
| iPod | |
| Retro | |
| Windows XP |
The following themes are planned for future implementation:
- Windows 98
- Frutiger Aero
- Macintosh
The widget can be customized using URL parameters:
| Parameter | Description | Default | Options |
|---|---|---|---|
theme |
Widget theme | default |
default, vinyl, ipod, retro, windowsxp |
style |
Color scheme | light |
light, dark (Note: not all themes support both styles) |
color |
Custom color | Theme default | Any hex color code without # (e.g., 1DB954) |
- Default: Supports light/dark modes and custom colors
- Vinyl: Spinning record player with album art as the vinyl
- iPod: Classic iPod-inspired design with click wheel
- Retro: Pixelated retro music player with scan lines
- Windows XP: Windows Media Player 11 inspired look
<div align="center">
<a href="https://your-app-url.vercel.app/link">
<img src="https://your-app-url.vercel.app/github?theme=ipod&style=light&color=609dbd" alt="Spotify Now Playing" width="400" />
</a>
</div>- Ensure you're actively playing music on Spotify
- Check that your Spotify API credentials are correct
- Verify that your refresh token is valid and has the correct scopes
- The widget may cache for a short period
- Refresh your GitHub profile page
- Add a query parameter to force a refresh:
?cache_bust=123
- Double-check your CLIENT_ID, CLIENT_SECRET, and REFRESH_TOKEN
- Ensure your Spotify Developer App has the correct redirect URI
- Verify that you've granted the necessary permissions during authorization
- Spotify API for providing track data
- FastAPI for the web framework
- Vercel for hosting capabilities