Search code examples
javascripthandlebars.js

Js Handlebars - use and apply CSS inside a template

I use handlebars like this somewhere inside the body of the HTML

{{template.header}}

Everything works as expected till I want to add css styles/or HTML tags as the "header" content (styling is not as part of the parent item, because I dynamically get the styling from outside) . Eg: "header" -> <p style="font-size:14px"> My header </p>

If I try to use that I get them in the outputted result, probably as expected because I don't specify somehow that the template owner wants control over the styling inside the passed template data

Is there a way for the user to specify styling from outside and handlebars just to output the passed input styling ?

Solution

  • You can use triple brackets to render html. Just be careful because this opens you up to XSS attacks if its user input viewable by other users.

    {{{template.header}}}

    https://handlebarsjs.com/guide/expressions.html#html-escaping