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 more tips on programming and side projects with you. Sign up and I'll send you my articles straight to your email, you'll also get a free copy of the light themed version of my Git cheat sheet.
Git cheat sheet preview image