Insert html in a handlebar template without escaping

Question

Is there a way to insert a string with html tags into a handlebars template without getting the tags escaped in the outcoming string?

template.js:

<p>{{content}}</p>

use the template

HBS.template({content: "<i>test</i> 123"})

actual outcome:

<p>&lt;i&gt;test&lt;/i&gt; 123</p>

expected result:

<p><i>test</i> 123</p>

Possible duplicate of [Handlebars Template rendering template as text](https://stackoverflow.com/questions/7168469/handlebars-template-rendering-template-as-text) — MathKimRobin, Jul 03 '19 at 14:17

Praveen · Accepted Answer · 2020-09-29T05:19:50.323

492

Try like

<p>{{{content}}}</p>

Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{.

edited Sep 29 '20 at 05:19

answered Nov 29 '13 at 07:41

Praveen

13

Honestly seems like the worst thing they could've chosen since it's hard to notice. Why not just something simple but visible like `{{ rawHtml expression }}`. – danneu Jan 29 '17 at 14:03
2

Agree with @danneu. No magic or cute shorthand, please. Explicit is better in the long run. – Matt Jan 08 '20 at 20:03
5

It is worth noticing that spaces also matters, so `{{{content}}}` != `{{{ content }}}`, second will not work. Be sure you do not include any spaces. – bladekp Dec 19 '21 at 16:24

score 40 · Answer 2 · edited Jan 27 '22 at 18:35

40

In your template you must add triple mustaches like this. <p>{{{content}}}</p>

See Official Reference for more information on that.

edited Jan 27 '22 at 18:35

Float07

answered Nov 29 '13 at 07:41

Jernej Novak

score 30 · Answer 3 · edited Oct 06 '22 at 16:55

30

If you don't want Handlebars to escape a value, use the "triple-stash", {{{

Pass the raw HTML to Handlebars template and get the raw HTML output by using triple brackets.

{{{foo}}}

edited Oct 06 '22 at 16:55

Boris Verkhovskiy

answered Feb 20 '17 at 07:19

XY L

3 Answers3