Trying to implement Spotify Playlist Card no go...Custom element doesn't exist....?


  1. Install the Spotify Playlist sensor and confirm your playlists and their URI and image URLs are loaded in the sensor.
  2. Download the spotify-playlist-card
  3. Place the file in your config/www folder
  4. Include the card code in your ui-lovelace-card.yaml

resources: - url: /local/spotify-playlist-card.js type: js

  1. Write configuration for the card in your ui-lovelace.yaml and add your sensor and Spotify media player.
  • type: “custom:spotify-playlist” entity: sensor.playlists media_player: media_player.spotify columns: 3 size: ‘140px’ show_name: false show_title: false title: ‘My Playlists’

Im good al the way up to step 4, when it says ui-lovelace.yaml, what is ui-lovelace-card.yaml ?. i am only familiar with the frontend ui-lovelace, which i edit from chrome, not a notepad or editor on my local pc

Hi, I’m the author of the card and stumbled upon your post. The instructions assume you are using the manual YAML mode (where you make changes via Notepad in ui-lovelace.yaml) or the raw UI editor. I’m not familiar with editing the Lovelace UI within Chrome, but if you know how to add other custom cards, then maybe you know about the resources: section where you list the .js files of custom cards. It should look like:

  - url: /local/spotify-playlist-card.js
    type: js

It may also be possible to add as a custom repository to HACS and follow the usual instructions.

Anyways, since it’s Hacktober month and I have some spare time, I plan to make some small improvements to the card. Look out for that, eventually.

Hey dwinn

I’ve successfully set this up and now have your playlist card thingy all set up and showing in my lovelace front-end… However, it’s just an image? As in, it’s not clickable or anything…

Could you possibly tell me if I’ve missed a step? I did get an authorisation request in my notifications however this just tried to download something from spotify.

Many thanks