Music Assistant: How to create a clean, lyrics-only TV dashboard (Karaoke style)?

Hi everyone,

Apologies if this has been asked before, but I couldn’t find a solution in previous topics.

I am trying to build a clean, karaoke-style dashboard for my TV that displays only the synced lyrics of the music currently playing through Music Assistant (using Spotify as the source).

My setup:

  • Home Assistant OS: 2026.9.3

  • Music Assistant: 2.10.4

  • Source: Spotify

What I’ve tried so far:

  1. synced-lyrics-card: I tried using this Lovelace card, but I couldn’t get it to look neat, and the lyrics timing was often out of sync.

  2. Music Assistant Full Player: When I open the full player view inside Music Assistant, the lyrics button in the top-right corner works brilliantly! The sync and layout are great. However, I want to hide all the media controls (play/pause, timeline, volume sliders, track details, etc.) so that only the lyrics are visible on the TV screen.

Since Music Assistant already handles lyrics natively so well, I’d love to leverage its built-in engine rather than relying on external cards.

Does anyone have tips, CSS workarounds (like card-mod), or ideas on how to extract/display just the lyrics view on a dashboard?

Thanks in advance for any ideas or direction!

UIX now supports styling spps and ingress panels hosted as frames. This is available as an experiental option you need to turn on in 8.4.0-beta.1.

I have tested the theme variable below. This uses the fact that when the lyrics button is set, it gets class bg-primary. Then the main-media-details and player-bottom are only hidden when the lyrics button is set.

  uix-music_assistant: |
    .fullscreen-player-card:has(
      .fullscreen-header-controls button[aria-label="Lyrics"].bg-primary
    ) :is(.player-bottom, .main-media-details) {
      display: none;
    }

Sep-28-2026 11-43-19

Note sure how you may be displaying on TV. I have not tested with casting - will do so when I get a chance. Looks like cast is just cover art and control so I assume you are using a device connected to your TV. Anyhow, let me know how you go and if you need more assistance.

This looks promising; I’ll give it a try when I have some free time over the next few days. I’ll let you know how it goes.

I love the open-source community and everyone who contributes to it.
To be continued.

Hi,
To test this, I installed:

  • Home Assistant: 2026.10.0b0

  • Music Assistant: 2.10.4

  • UiX Version: 8.4.0‑beta.3

In the Experimental Settings I enabled:

  • Always patch ha-card

  • Style frame panels loaded as iframe

I refreshed my browser cache (Ctrl + F5).

Added a foundry with the name “music_assistant_show_only_lyrics”

forge:
  uix-music_assistant: |
    .fullscreen-player-card:has(
      .fullscreen-header-controls button[aria-label="Lyrics"].bg-primary
    ) :is(.player-bottom, .main-media-details) {
      display: none;
    }

Now it seems I need to install some kind of frontend to create a UiX frame for the Music Assistant full player.

I can’t find any documentation about this anywhere, and it’s getting late so maybe I’m overlooking something.
Am I missing something?

This goes in your theme using UIX theming. Nothing to do with Forge. Sorry for omission of this detail.

So a theme just for this… but you likely have a theme in use so add uix-theme: <theme name and uix-music_assistant: ...

My Theme:
  uix-theme: My Theme

  uix-music_assistant: |
    .fullscreen-player-card:has(
      .fullscreen-header-controls button[aria-label="Lyrics"].bg-primary
    ) :is(.player-bottom, .main-media-details) {
      display: none;
    }

My experience with themes is limited, and this test environment doesn’t have any themes installed.

This is what I have so far:

test_uix-theme:
  uix-theme: test_uix-theme
  
  uix-music_assistant: |
    .fullscreen-player-card:has(
      .fullscreen-header-controls button[aria-label="Lyrics"].bg-primary
    ) :is(.player-bottom, .main-media-details) {
      display: none;
    }

Yes, the only way to get styles to areas like this is via theme as there is no card/element config as such to set uix styles in.

I restarted everything, and the theme now appears in my Home Assistant profile where I can select it.
However, when I go to Music Assistant (MA), I don’t see the style changes applied.

Are you on a desktop? Can you check that you see UIX get loaded for music-assistant panel? You will see something like the below in Browser developer console.

💡 UIX 8.4.0-beta.3 IS INSTALLED 💡 for d5369777_music_assistant

I see several references to UIX, but the closest thing I can find is

Not in the code, but in the console where info/warnings/errors are logged.

Specifically when you go to Music Assistant, UIX will be loaded into the frame and what I showed gets logged as info.

I found the message.

So that is oke

That is general load. You will get similar when you go to Music Assistant.

Also, when you say you don’t see styles applied are you testing lyrics or looking in DOM. If looking for the styles they are added to document as a adoptedStyleSheet

It’s the middle of the night here in the Netherlands, and I really need to get some sleep.
Thanks for all your help so far Darryn — I’ll continue working on this later.

If you have any tips or ideas in the meantime, they’re always welcome

All good. As you are new to UIX that has been a learning curve for you first up.

Absolutely :+1:

Loved the idea, had a go at it with Claude support and got it working. Not sure ofcourse if you are looking to run it in a similar setup but maybe it helps, thanks for the inspiration!

Great solution.
I will look more into UIX and your approach, simply because it’s interesting.

For now, I found the plugin “Party” for Music Assistant that solves my immediate need.

I learned a lot from Darryn, and I got a bit of inspiration from Remco as well.
Thanks for your help — I learned a lot.