Backward navigation persistent state

Hi there !
I’m currently building a music player with Liveview, but I’m facing a problem.
On the app, I have a player as a footer which have an audio tag. While navigating forward, Liveview will only patch the changed part of the DOM, so the player still play the current song.

But while navigating backward with the back button, the browser call the previous url and the server return the full page HTML which stop the current song from playing since the whole DOM is replaced. Does Liveview offers a solution that I have not found until now for that kind of use case ?

For example, Astro is able to do it with there “transition:persistent” directive that you can see in action here. Simply play a song and go back. But I can’t figure out how they are achieving this black magic and I’m really hoping for the same result in Liveview.

Hey there and welcome!

This article should help you out. TL;DR, use the sticky option :slight_smile:


This is exactly what I was looking for !
I don’t know how I didn’t saw it earlier. Thanks a lot :pray:

1 Like