How to render html in svelte

Question

I have tried rendering the html by storing the html in a variable but it is not working , I also tried the triple curly braces

<script>
    let name = 'world';
    let val = ""
    let ans2 = ""
    let ans3;
    import showdown from 'showdown';
    import validity from 'validity-checker';
    function dataSubmit(e){
        e.preventDefault();
    //ans = validity.isEmoji("ggg");
    ans2 = new showdown.Converter();
    ans3 = ans2.makeHtml(val)
    }
</script>

<div>
    <textarea bind:value={val} on:change={dataSubmit}></textarea>
    <div>
    {{{ans3}}}  
    </div>
    
</div>

Return type of the ans3 variable is like "<h1>Hello</h1>"

CD.. · Accepted Answer · 2022-10-29T16:00:26.653

43

You can use {@html expression}

Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.

edited Oct 29 '22 at 16:00

answered Aug 20 '19 at 19:01

CD..

72,281
25
154
163

This doesn't work for me. I get entity encoded html – chovy Nov 25 '19 at 05:25
1

@chovy see a [working example](https://svelte.dev/repl/39970ea4444d4ac6a3cbc39783bbe3f4?version=3.15.0) – CD.. Nov 25 '19 at 05:28
Is this only static? Updating expression seems fruitless. – Dirk Bester Feb 17 '23 at 23:42

score 2 · Answer 2 · edited Jul 26 '23 at 11:36

Ordinarily, strings are inserted as plain text, meaning that characters like < and > have no special meaning.

But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML.

In Svelte, you do this with the special {@html ...} tag:

<p>{@html string}</p>

Svelte doesn't perform any sanitization of the expression inside {@html ...} before it gets inserted into the DOM. In other words, if you use this feature it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks.

From https://svelte.dev/tutorial/html-tags

score 1 · Answer 3 · edited Jul 28 '23 at 10:56

Like Sateesh and CD.. answered, {@html expression : string} renders your html string as html. But it won't work if you pass in a HTML object.

If you want svelte to display a HTML object you instantiated in JavaScript, just need to specify a target and either set or append the element as its child like this:

let myComponent = document.createElement('div');

document.getElementById('parent').appendChild(myComponent);

Reactivity is still preserved.

How to render html in svelte

3 Answers3