Rendering unescaped HTML in Ember.js with Handlebars

Written by Michael Lee 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, side projects and working remotely. Sign up and I'll send you my articles straight to your email.

:wave: Hey hey, I'm Michael Lee! I really appreciate you taking the time to read this article.

Be sure to check out my other articles.

Previous post: Ember.js log helper
Next post: Hello again