Learn Docker With My Newest Course

Dive into Docker takes you from "What is Docker?" to confidently applying Docker to your own projects. It's packed with best practices and examples. Start Learning Docker →

Using String Interpolation Inside of Phoenix HEEx Template Tags


This came up recently while updating an application to use Phoenix 1.6 and wanting to add a variable to a list of HTML classes.

Quick Jump: Demo Video

My open source Docker / Phoenix example app was updated a few hours after the 1.6 release but I wasn’t sure how to do string interpolation with HEEx templates. Turns out it was pretty easy. You can do {"hey #{name}"} and you’re done! This wasn’t mentioned in the docs or 1.6 guide at the point of recording this video.

The example below is in the context of wanting to set a dynamic Tailwind class based on a flash message being an error, info, warning, etc..

Demo Video


  • 0:42 – The TL;DR version of using HEEx templates
  • 1:52 – How would you combine a few hard coded string classes and a variable?
  • 2:18 – Shout-out to Jose Valim for patching Live View within minutes
  • 3:14 – Showing how to do string interpolation in HEEx
  • 5:32 – Using your prior knowledge to help learn new things by breaking it down
  • 6:56 – Setting up a flash message to see how it looks

What do you think about HEEx templates overall? Let me know below.

Never Miss a Tip, Trick or Tutorial

Like you, I'm super protective of my inbox, so don't worry about getting spammed. You can expect a few emails per month (at most), and you can 1-click unsubscribe at any time. See what else you'll get too.