Picture of Michael Lee
:wave: Hey hey, I'm Michael Lee and this is my site about being a developer, being a dad and making side projects.

Rendering unescaped HTML in Ember.js with Handlebars

Written on March 23, 2017

Over the past couple of weeks I’ve been working on a local, tech job board for the Triangle (which encompasses Raleigh, Durham, RTP and everywhere in between). As part of the forms to create a new job posting, I’ve implemented using Basecamp’s excellent rich text editor, Trix.

The great thing about Trix is that it returns a string of HTML. By default, Ember (or more specific handlebars) HTML escapes properties. Which means if you had a property greetString set to a string like <div>Hello <strong>world!</strong></div>, when you reference the property in a template, it’ll render the raw string and now the HTML.

{{greetString}}
// Renders
<div>Hello <strong>world!</strong></div>

To have handlebars render unescaped HTML, you’ll want to wrap your property around three pairs of curly brackets instead of the regular two. So this {{{greetString}}} renders ‘Hello world!’. This is great because I don’t have to do any additional styling since having users use the Trix editor provides the styling for me :raised_hands:.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design and side projects. Sign up and I'll send you my articles straight to your email.
Previous post: Ember.js log helper
Next post: Hello again