All posts

Rendering a LiveView template outside of router

This post assumes you have already developed your LiveView code and need a way to render the markup from your template in a different view. In this example that functionality ended up being for a modal that I wanted to render on different pages.

In your applications Web module, in my case DevDecksWeb you need to include an import for LiveView helpers, to get access to the function we will need, live_render:

import Phoenix.LiveView.Helpers

If you’re using the Phoenix application development framework this will be imported when you generate your application.

Once this is imported you can call live_render in your template like so and pass it the @socket and your LiveView module DevDecksWeb.EmailModalLive:

<%= live_render(@socket, DevDecksWeb.EmailModalLive) %>

And if you need to conditionally render the template based off of some state you can do so with a single line conditional:

<%= if @show_modal do live_render(@socket, DevDecksWeb.EmailModalLive) end %>

Postscript:

I built two products to help fund continued efforts for this website, it would mean a lot if you would check them out:
1. 2500+ Words for the Undermotivated Software Engineer - A short essay I wrote on the titled topic ($3).
2. Build 3 Chrome Extensions in Under 2 Hours - A course I built to teach chrome extension development ($9-20).