1Overview

2Usage

3Goals

4Logic

5Setup

6Conclusion

Overview

1Overview

2Usage

3Goals

4Logic

5Setup

6Conclusion

Overview

Change Theme

Go Back

How to Show Your Spotify Recently Played Songs in Framer

Published on

7th July, 2025

Topic

Spotify API, Framer

Overview

I’m always listening to music while I design and I wanted my portfolio to show this side of me. I tried using Framer’s built-in Spotify component but it negatively affected my site's performance and didn’t let me customize much. Currently it only allows you to add a single song or album, which isn't enough for me.

I had previously iterated on bringing the Spotify's Friend Activity from Desktop to Mobile, so naturally my next step should be to bring this feature to my site (and yours too!). And while I am at it, why not make it animated.

So, I built a Spotify widget that fetches my recently played tracks and displays them in a slick, animated carousel, all inside Framer. Here's a preview.

sign up

Join my app

Click the button below and fill out my contact form. I’ll add you as an authorized user to the app.

Once you get a confirmation mail from me that you're in, come back to this form and click on Authorize.

After authorizing, just copy the Framer code snippet I provide, paste it into a code file in Framer, and drag the component onto your canvas. And that’s it, your music, live on your site. You can customize the layout using the property panel.

Join My App

If you want to deploy your own instance, read my setup guide below.

sign up

My goal

I wanted to:

Pull in user's Recently Played Spotify tracks.

Extract and show the album art, track name, artist and how long ago it was played.

Animate this data in a smooth scroll carousel in Framer.

Make this component customizable so that others can use it easily.

And I wanted it without relying on embeds. Everything should feel native and lightweight.

logic

How it actually works

Instead of making users authenticate every time, I built a flow where:

Users authorize once.

Their access + refresh tokens are securely stored on Firebase.

My component fetches your recent tracks anytime using this stored token.

Backend - Token Handling + Track API

Frontend - Framer Component

This way, it's convenient and lightweight. All the heavy-work is done by Vercel and stored on Firebase. This component will just render that data into a presentable format. And you can revoke it's access anytime.

The setup

What you will need

A Spotify Account

A Github Account

A Vercel Account

A Firebase Account

A Framer Website

A Spotify Account

CALIFORNIA

A Spotify Account

CALIFORNIA

A Spotify Account

CALIFORNIA

A Github Account

CALIFORNIA

A Github Account

CALIFORNIA

A Github Account

CALIFORNIA

A Vercel Account

CALIFORNIA

A Vercel Account

CALIFORNIA

A Vercel Account

CALIFORNIA

A Firebase Account

CALIFORNIA

A Firebase Account

CALIFORNIA

A Firebase Account

CALIFORNIA

A Framer Website

CALIFORNIA

A Framer Website

CALIFORNIA

A Framer Website

CALIFORNIA

step 1

Set up Spotify

Go to Spotify Developer Dashboard.
Log in with your Spotify account.
Click "Create an App".
Name it anything you like (eg. Spotify Recently Played)
For now, set your Redirect URI to:

https://localhost:3000/callback

Copy

Copied

Copy

Copied

Save your Client ID and Client Secret for later.

step 2

Set up Firebase

Go to Firebase Console and create a new project.
In the left menu, go to Build → Realtime Database and click Create Database.
Choose Start in test mode (you can update rules later).
In the left menu, go to Project Settings → Service Accounts tab.
Click Generate new private key and download the JSON file.
From the JSON, note down the following values for your environment variables:

FIREBASE_CLIENT_EMAIL
FIREBASE_PRIVATE_KEY_B64 (you’ll need to base64 encode the private key string)
FIREBASE_DATABASE_URL
FIREBASE_PROJECT_ID

To base64 encode the private key (on macOS or Linux terminal):

cat your-firebase-key.json | jq -r '.private_key' | base64

Copy

Copied

Copy

Copied

Or just copy the key from the JSON and encode it here: https://www.base64encode.org/

step 3

Set up Vercel

Clone my repo → Deploy.
Name your project to your liking (e.g. Spotify Recently Played Vercel.)
Set the following environment variables:

SPOTIFY_CLIENT_ID = Spotify app Client ID we got in Step 1
SPOTIFY_CLIENT_SECRET = Spotify App Secret ID we got in Step 1
FIREBASE_CLIENT_EMAIL = Firebase client email from Step 2
FIREBASE_PRIVATE_KEY_B64 = Base64-encoded string of Firebase private key from Step 2
FIREBASE_DATABASE_URL = Firebase database URL from Step 2
FIREBASE_PROJECT_ID = Firebase project ID from Step 2
NEXT_PUBLIC_BASE_URL = https://localhost:3000
NEXT_PUBLIC_REDIRECT_URI = https://localhost:3000/callback

step 4

Update Redirect URL

Once deployed, Vercel will give you a live URL like:

https://your-app-name.vercel.app

Copy

Copied

Copy

Copied

Go to your Vercel dashboard → Your Project → Settings → Environment Variables.
Update the following environment variables.

NEXT_PUBLIC_BASE_URL = https://your-app-name.vercel.app
NEXT_PUBLIC_REDIRECT_URI = https://your-app-name.vercel.app/api/callback

Go back to Spotify Developer Dashboard.
Open your App → Edit Settings.
Under Redirect URIs, replace 'http://localhost:3000/callback' with:

https://your-app-name.vercel.app/api/callback

Copy

Copied

Copy

Copied

Finally in User Management, add your Name and Email ID used to register with Spotify.

And Done! Now just go to your deployed Vercel site, click on Authorize, and copy my Code component to your Framer.

Reflection

Why I did this

I love building things that make my portfolio feel more personal. I have a few self-coded components like my 'Scroll Menu' in the bottom right and since music is such a big part of my workflow, it just made sense to make this too.

By coding it myself, I could also ease the burden on my website by keeping my code lightweight.

It’s a small component, but it says something about who I am beyond just projects.

Feel free to ask any questions and I’ll be in touch. Happy Building.