Phoenix LiveView — Change the URL without refreshing the page

Alvise Susmel
Jun 19 · 7 min read

It’s now possible to try the pushState support available in Phoenix LiveView (which, remember, is still in beta)

Add live_link and live_redirect for push state support
Add live_link and live_redirect for push state support
Add live_link and live_redirect for push state support

What is pushState and why can be useful?

With Phoenix LiveView we can easily update parts of the page without having to change the location, refreshing the page or directly use JavaScript.

But when the page’s content changes, the URL remains the same, making it difficult for a user to bookmark or share the current page state.

The Phoenix LiveView pushstate support (with and solves exactly this problem. While changing the page content we can now dynamically update the URL without a page refresh.

The reason why it’s called is because it refers to the function in the HTML5 History API, which gives us the ability to change the URL and push a new page in the browser's history.

HTML5 history API - pushState
HTML5 history API - pushState
HTML5 history API — pushState

In this article we are going to test this functionality in Phoenix LiveView, with two different examples:

The first is a LiveView which shows picture thumbnails taken from unsplash.com. When we click on a thumbnail, the full picture is shown in the same page. We’ll see how to use the LiveView pushState support to update the URL, making easy to share one specific picture.

Phoenix LiveView Pictures example with pushstate
Phoenix LiveView Pictures example with pushstate
Phoenix LiveView Pictures example with pushstate

In the second example we’ll see something different, an animated URL with emojis. Maybe something we’re not going to use in a real app, but something fun to build.

LiveView animated URL
LiveView animated URL
LiveView animated URL

You can find these examples in the poeticoding/phoenix_live_view_example GitHub repo, which is a fork of the original chrismccord/phoenix_live_view_example.

If you haven’t tried Phoenix LiveView yet, subscribe to the newsletter to receive new Elixir and Phoenix content. New LiveView introductory articles and screencasts are coming soon!

LiveView Pictures page

In this example we build a simple LiveView page where we show a list of pictures thumbnails taken from Unsplash. When we click on the thumbnail, the full picture is shown in the page and the URL is updated to something that uniquely refers to that specific picture.

First, we add the live route in lib/demo_web/router.ex

and then we create the file lib/demo_web/live/pictures_live.ex file, where we define the new LiveView module.

For simplicity we use a Map , where the keys are the picture IDs and the values are maps with URL and name.

At the bottom we find a multi-clause function , which we use to get the thumbnail and large image URL by appending , and parameters to the URL string.

In the function we loop through the map, showing the thumbnails and making them clickable.

Since is a map, in the generator we pattern match both the key and value .

For each picture we show its thumbnail using the function, which returns the thumbnail URL.

With we make the with author name and image clickable. It means that when the user clicks the element, a event is sent to the LiveView process, along with the value.

This event is handled by the function.

The argument is the value passes with HTML attribute. In this function we use the to get the picture map and it to .

After clicking the picture thumbnail, LiveView re-renders the view. This time the is bound to a picture map (which initially is set to in the function), so LiveView renders the HTML with the image.

Pictures without pushState
Pictures without pushState
Pictures without pushState

It works, but as we said before, it doesn’t change the URL, making it difficult to share the page state.

to change the URL using pushState

Let’s see now how to change the URL without refreshing the page.
We start by adding a new route in lib/demo_web/router.ex

The new route with is triggered by passing the picture id in the URL - the case where a picture is selected.

Back to our PictureLive module, we now have to add the function.

In this function we do exactly what we were doing when handling the show event. The is invoked just after , when the user loads the page, and when changing the URL with and .

To handle the route, we add below another clause, where we set the to .

We now update the function

Instead of assigning the picture (like we did before), we use which changes the URL to (using pushState).
is then called, using the to assign the .

Pictures - LiveView pushstate
Pictures - LiveView pushstate
Pictures — LiveView pushstate

Animated URL 🌝

Let’s see now how to create an animation in the address bar, with LiveView and emoji.

As we did for the previous example, we add the two routes lib/demo_web/router.ex

And we define the module in lib/demo_web/live/moon_live.ex

is a list with 8 frames we are going to use in the animation, each one is an emoji.

render/1
The is pretty simple: we just have two buttons, start and stop. Each one sends and event to the LiveView process.

handle_event(“start”, _, socket)
Clicking the start button, we send a start event to the LiveView process. This event is handled by which sets to and initialize the to . We will use this to know at which frame of the list we are.

With we send a delayed message (100ms) to the current LiveView process (), starting the animation.

handle_info(“next_moon”, socket)
The next_moon message is processed by .

In this function we get the right moon frame

We increase the

We check if is still and we continue the animation sending another delayed message, which will be handled by the same function

And like we did in the previous example, we use to update the URL. We pass which is the string with the emoji we want to show on the address bar

With the option we change the current url without polluting the browser's history.

handle_event(“stop”, _, socket)
Clicking the Stop button, we send a stop event and the function sets to , stopping the animation.

Animated URL with moon emoji

Originally published at Poeticoding.

Alvise Susmel

Written by

Passionate Software Engineer, CTO in a London-based Hedge Fund. Eager to learn new things. Fell in love with Elixir.