Spotify Playing Now SVG Generator 🎵

A serverless Edge Function that generates a dynamic SVG showing what you're currently listening to on Spotify. Embed it in your GitHub README or any markdown file.

<img src="<YOUR_VERCEL_APP_URL>/api" width="460" height="60">

<!-- dark theme -->
<img src="<YOUR_VERCEL_APP_URL>/api?theme=dark" width="460" height="60">

Demo

Light theme:

Dark theme:

Live

Built with

• TypeScript (strict mode)
• Preact — renders JSX components to SVG strings
• SVG with <foreignObject> for rich HTML/CSS inside SVG
• Vercel Edge Functions (zero cold start)
• Spotify Web API

Architecture

Prerequisites

Important: As of late 2024, the Spotify Web API requires the app owner to have an active Spotify Premium subscription. If your subscription lapses, the now-playing endpoint will return 403. It can take a few hours to propagate after re-subscribing.

Setup

The required environment variables are listed in .env.example:

• SPOTIFY_CLIENT_ID
• SPOTIFY_CLIENT_SECRET
• SPOTIFY_REFRESH_TOKEN

Getting your Spotify credentials

1. Go to the Spotify Developer Dashboard and create a new app

2. Copy your Client ID and Client Secret

3. In the app settings, add http://localhost/callback/ as a Redirect URI

4. Authorize your app by navigating to:

   https://accounts.spotify.com/authorize?client_id={SPOTIFY_CLIENT_ID}&response_type=code&scope=user-read-currently-playing&redirect_uri=http://localhost/callback/
   

   After logging in, you'll be redirected to http://localhost/callback/?code={CODE}. Copy the CODE from the URL.

5. Exchange the code for a refresh token:

   curl -X POST https://accounts.spotify.com/api/token \
     -H "Content-Type: application/x-www-form-urlencoded" \
     -H "Authorization: Basic $(echo -n 'SPOTIFY_CLIENT_ID:SPOTIFY_CLIENT_SECRET' | base64)" \
     -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code={CODE}"

   The response JSON contains your refresh_token. This token is valid indefinitely unless you revoke access.

Deployment

Install the Vercel CLI:

npm install -g vercel

Link and set up the project:

vercel

Add your environment variables in Vercel Project Settings, or via CLI:

vercel env add SPOTIFY_CLIENT_ID
vercel env add SPOTIFY_CLIENT_SECRET
vercel env add SPOTIFY_REFRESH_TOKEN

Local development

Pull env vars and start the dev server:

vercel env pull .env.local
npm start

Production

npm run deploy

Query parameters

Parameter	Values	Default	Description
theme	light, dark	light	Card color theme
demo	true	—	Show sample data (no Spotify API call)