Set innerHTML of an element in Svelte

When working on a Svelte application, I wanted to replace newline characters in a string with <br> elements and render the result as HTML. If you do the replace in your component markup, then the rendered output has escaped angle brackets:

<!-- Component.svelte -->
<p>{notes.replace(/\n/g, '<br />')}</p>

<!-- Output markup -->
<p>Line one&lt;br&gt;Line two</p>

From previous experience, I know that we’re not rendering the replaced string as HTML, so I tried searching online for a solution involving innerHTML.

In the Svelte API docs, there are only three mentions of innerHTML, two of which refer to bindings with contenteditable elements. But I wanted to set the innerHTML of an element that would never change.

While searching through the Svelte Discord for innerHTML, I came across an unrelated post that mentioned {@html}. I had never encountered this before, so I looked it up in the Svelte docs^[https://svelte.dev/docs#html]:

In a text expression, characters like < and > are escaped; however, with HTML expressions, they’re not.

Not the longest explanation, but that sounds like my problem. Back in my code, I tried wrapping the replaced text with {@html}:

<!-- Component.svelte -->
<p>{@html notes.replace(/\n/g, '<br />')}</p>

<p></p>

With that, everything rendered as expected:

<!-- Output markup -->
<p>
  Line one<br />
  Line two
</p>

So next time you want to set the innerHTML of an element in Svelte, use an HTML express with {@html}.

Happy escaping!