By default, if we try to input some HTML value in a text input or a textarea input and display it directly, it won’t parse it as HTML. That is, it’ll show the input text as is.

This is actually good for the user. This helps prevent cross-site scripting where someone might enter some malicious code with bad intentions. However, if we still want to be able to parse input text as HTML, we can do that.

Here’s an example to demonstrate the idea:

<script>
  let customHTML = `<h2>Some heading</h2><p>Some text</p>`
</script>

<div>
  <textarea bind:value={customHTML} rows="5" />
  {@html customHTML}
</div>
Code language: HTML, XML (xml)

In the above file, we have some custom HTML markup stored in the state customHTML on line 2.

Then on line 6, we have an input textarea that allows us to edit its value.

Finally, on line 7, we’re outputting the HTML with the @html tag. Now, whatever we type in the input text area, it’d pe parsed as HTML.

Here’s a quick demo of that: