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:.

Stay in touch

Thanks for reading this article. I'd love to stay in touch and share articles like this one in your inbox. Sign up for my newsletter.