Alternative Roon display layouts

Would it be possible to add some alternative Roon display layout options? For me personally I would love to be able to have the actual album art take up most of the screen rather than an artist picture as these are quite often not great and for me less important than the art.

Thanks for all the great work so far, Roon is awesome!

Do you mean on the now playing screen or the web display?

Sorry I mean the display that is used on a chrome cast which I assume is the same as the web display?


I doubt Roon will offer any alternatives, at least not in the short term, but it is possible to change the display. Take a look at this thread for further details.

1 Like

Just wanted to say thanks for the link. Turns out it’s very easy to locate the display files on the server and hack together some css to better suit what I’m after. Very pleased with my massive album art now! Cheers


Chris… Please tell me how you did this? Are you using Windows or a MAC. I looked at the link you mentioned, but it just looks like it is windows. This is exactly what I have been wanting to do as well…

If you want to edit the Roon display on a Mac the file you need to modify is …


Thank you! I have gotten into this folder and page source, however I do not know anything about html. Can you or somebody share the script? There are like 504 lines…

I’d be happy to share the code I’ve used, but mine is optimised for display on a Google Hub so wouldn’t work too well if you displayed it on a TV. Mine looks like this …

If I were you, I’d go through the thread I linked previously, see if you can find an alternative layout you like, then ask the author if s/he would mind sharing.

You are more than welcome to use the bit of css I added to get that layout. As DaveN mentioned you will need to update that display_ui.html file. I’ve uploaded my changes to GitHub here:

You said you weren’t familiar with HTML stuff so I’ve uploaded the entire html file and it should just be a case of copying all the code in that link and replacing the contents of your display_ui.html file on your server. Obviously make a copy of the original file before overriding just in case you run into any issues. Might need to give the server a reboot after saving and then hopefully you should be good to go with the Chromecast display!

I also updated the web display file to use the same styles in the index.html file. My changes for this are also in that GitHub repo if you are interested.


Make sure you copy the code from GitHub and not the preview here! You will need all 567 lines

Thank you so much Chris! I will give it a shot sometime tomorrow…

1 Like

Thank you Dave!

1 Like

Everyone feel free to download my versions for use with a 16:9 display in portrait or landscape view.
Have fun…


This is all well and good, but I would love to be able to edit the Roon layout itself (either the now playing screen or the album page), not just the web display. If I could do that I’d make a few changes, including getting it to show front and rear album art side by side.

1 Like

Thank you.

Great! Thanks!

That would be so awesome if we could edit certain things in the software. I would love to make the waveform the full width of the GUI like it used to be. When you’re listening to long suites/mixtapes/DJ mixes/audiobooks it’s impossible to find the exact part or spot you sometimes need.

Yeah, Foobar2000 allows that - the interface is super customisable. Now image the customisability of Foobar2000 and the beauty of Roon…would be a match made in heaven!

1 Like

I LOVE the new options for the display that people developed. And I absolutely agree that album art should be front and center, rather than some random artist pictures.

I have followed the instructions to do this myself but ran into some problems. Any help is much appreciated.

I have located the display_ui.html file on my Mac. I have opened the file, replaced the code with the code provided here and restarted both my Roon core and the display (both web display and google chromecast). Unfortunately, I do not see any changes whatsoever. It just keeps showing the same old display.

So, either Roon does not notice that the file has been changed OR I am editing the wrong file. Possibly, the reason is that the Mac is not my core, but I am using ROCK on a RPi for that. However, on the ROCK itself, I can’t find the webroot directory, nor the display_ui.html file anywhere.

Can anyone help? Thanks a lot in advance!!