How do I inject raw HTML in a template?

Elixir Framework Forums Hologram Forum
,
1

How do I tell Hologram not to escape HTML when substituting into templates?

{Textile.render(@product.long_description)}

escapes the HTML, and

{Textile.render(@product.long_description) |> Phoenix.HTML.raw()}

errors out.

Cheers

Dave

6 Likes
2

Hi Dave,

Great to see you using Hologram! (Big fan of your books, by the way.)

Hologram has its own template system separate from Phoenix, so Phoenix.HTML.raw/1 won’t work here - Hologram doesn’t know how to handle the {:safe, ...} tuple that raw/1 returns.

Currently there’s no built-in equivalent for rendering unescaped HTML - all text interpolation is automatically escaped for security.

The good news is this would be a relatively straightforward feature to add. I’ve opened an issue to track it: Add support for unescaped HTML in templates · Issue #584 · bartblast/hologram · GitHub

How urgent is this for you?

5 Likes
3

Thanks for the quick response. It isn’t urgent: to be honest I’m experimenting right now: I’m seeing what it would take to convert our store from the hideous static site it is now into an Elixir app, and to make it interesting I thought I’d try Hologram. It really is an amazing piece of work. I can ignore the markup for now and move on to search :slight_smile:

Only downside: Claude doesn’t know Hologram from a hole in the ground. It says “of course” and then produces some kind of Frankencode that’s half LiveView, half I don’t know what…

But, in the meantime, I’m having a lot of fun, so thank yopu.

Dave

4 Likes
4

Thanks, Dave - means a lot coming from you! :slight_smile:

The Claude/AI situation is a known challenge initially. AI training data hasn’t fully caught up with Hologram yet, and Hologram recently changed its template sigil from ~H (same as LiveView) to the distinct ~HOLO, so older examples can confuse AI into thinking it’s LiveView. The good news is that once you’ve got a few working pages and components in your project, AI assistance dramatically improves - it picks up the patterns from your own code and becomes genuinely useful.

In the meantime, adding a CLAUDE.md to your project that points to deps/hologram and notes “this is Hologram, not LiveView” helps Claude Code learn the patterns from the actual source rather than its training data. deps/hologram/test/features is also worth pointing AI to - it exercises all Hologram-specific syntax, components, pages, events, etc. I’m also thinking about providing official AI context files that Hologram projects could include out of the box - your feedback is a good nudge to prioritize that!

Feel free to ping me here if you hit walls - happy to help directly :slight_smile:

2 Likes
5

Agree! I would love to see a Hologram book from PragProg one day Dave! :icon_biggrin:

Hologram has gained a lot of interest in the community and Bart has been an excellent ambassador and leader of the project:

7 Likes
6

Aston: I agree 100%. In my short time playing with it, I’ve been really impressed.

And congratulations on getting the full-time gig, Bart.

3 Likes
7

Thank you, Dave! :slight_smile:

1 Like