Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
June 21, 2022 22:50
June 9, 2022 10:50
June 21, 2022 20:37
February 9, 2021 02:32
June 21, 2022 22:49
June 21, 2022 23:36
June 21, 2022 20:37
June 21, 2022 22:50
June 21, 2022 23:29
June 9, 2022 10:10

Spotify is playing now in your

If you want to share your love of music with the world you are in right place. You can share your currently playing track from your Spotify with just an image.


🎸 playing now - current state of track with real-time progress bar
🎬 ended state – when track is ended badge transitions to this state
⏸ paused state - when current track is paused in player
πŸ“­ idle state – not playing

Deploy with Vercel

How to use

Create an Spotify application for authentication

  • Go to Spotify Developer Dashboard and log in with your Spotify account
  • Click Create An App
  • Fill in the name and description of new app and click Create.
  • Click Show Client Secret.
  • Copy Client ID and Client Secret we will need it a bit later.

Deploy an application to Vercel

  • Open this link for deploy app to Vercel
  • Click Continue on Clone Git Repository screen
  • Choose where you want to save code on Create Git Repository and Vercel will fork this repo automatically
  • Click Continue on Import Project screen
  • Put Client ID to SPOTIFY_CLIENT_ID and Client Secret to SPOTIFY_CLIENT_SECRET and put just - to SPOTIFY_REFRESH_TOKEN.
  • If you plan to use API specify API_CORS_HOST as host from which you plan to call the API endpoint. Read more
  • Click Deploy

Get Refresh Token

  • When application is deployed go to Dashboard
  • Copy your domain with prod label of your application
  • Go back to Spotify Developer Dashboard
  • Open application
  • Click to Edit Settings
  • Add path /api/auth to deployment domain. It should looks like this Screenshot
  • Put the url Redirect URI and click Add
  • Save changes with click to Save in end of the form
  • Open new tab on the browser and go to url which you put in Redirect URI. The url should looks like this
  • Copy Refresh token and put to the application settings on Vercel
  • Go to Deployments page and redeploy the last deployment of your application on Vercel
  • Everything is done!

You can copy this snippet and change domain in the url to domain of your application and post it wherever you would like



To make API available you need to specify API_CORS_HOST after you deployed the app.

  • Open created project on Vercel and go to Settings.
  • Open tab Environment Variables
  • Create variable with name API_CORS_HOST and put site address from which you plan make requests for example (the variable will be set to Access-Control-Allow-Origin header. More about the header)

GET /api/now-playing


When something is playing

type Response = 
/** When a track is playing */
	progress: number | null;
	duration: number;
	track: string;
	artist: string;
	isPlaying: boolean;
	coverUrl: string;
	url: string;

/** When nothing is playing */
| {
	isPlaying: false;


  • Copy .env.example to .env and add values to env variables
  • Run yarn for dependencies installation
  • Run yarn dev for starting development server