I’m struggling with creating proper navigation between different HTML pages in my Spotify application. When I search for examples online, most apps seem to use just a single HTML file.
My current setup includes:
- main.html (landing page)
- profile.html (user details page)
Right now I’m using a basic <a href="profile.html">Go to Profile</a> link in my main.html file. This technically works for switching pages, but it doesn’t properly update the browser history stack.
I’ve been reading through the Spotify developer docs and it mentions using URI patterns like spotify:app:$APPNAME:parameter for navigation. However, I can’t figure out the correct syntax to make this work for moving between my HTML files.
I’m starting to wonder if most Spotify apps actually just use one HTML file and show/hide different sections with JavaScript instead of having separate pages. Is that the recommended approach, or is there a way to properly link between multiple HTML files while maintaining history state?
Multiple HTML files work in Spotify apps, but you’ve got to handle routing properly. That browser history issue you’re seeing? Super common when you use regular anchor tags. Don’t rely on basic HTML linking - use the Spotify Apps API navigation methods instead. You’ll want the sp:// protocol with your app’s navigation handlers. Most devs I know go hybrid - one main HTML file that loads content sections dynamically. But separate HTML files work fine if you handle routing through JavaScript correctly. The trick is intercepting navigation events and updating app state yourself instead of letting the browser do page transitions.
Had this exact problem building my first Spotify app last year. The docs for multi-page navigation are pretty terrible, honestly. I fixed it by creating a custom router that catches link clicks and uses Spotify’s API navigation system. You’ve got to preventDefault() on anchor clicks, then handle page transitions manually with sp.core.navigate(). Here’s the thing - Spotify apps run sandboxed, so normal browser navigation doesn’t work like you’d expect. Your href links completely bypass Spotify’s internal routing, which breaks history. I kept separate HTML files but loaded them via AJAX with custom navigation handlers. More work upfront, but you get proper history management and it feels native in Spotify.
totally get it, that URI stuff can be tricky. instead of a whole page, maybe just use that URI scheme like spotify:app:yourappname:profile. makes history stuff easier too. lots of folks stick to single page setups for better control in spotify apps.
honestly, just ditch the multiple html files approach entirely. been there, done that - it’s a nightmare with spotify’s sandboxing. single page app with javascript showing/hiding divs is way simpler and you won’t fight the platform. save yourself the headache mate.