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-29 16:00:26Z

66

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, 2022 at 16:00

answered Aug 20, 2019 at 19:01

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

chovy Over a year ago

This doesn't work for me. I get entity encoded html

CD.. Over a year ago

@chovy see a working example

Dirk Bester Over a year ago

Is this only static? Updating expression seems fruitless.

Paolo · Accepted Answer · 2023-07-26 11:36:50Z

9

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

edited Jul 26, 2023 at 11:36

Paolo

21.4k21 gold badges78 silver badges124 bronze badges

answered Nov 11, 2021 at 11:44

Sateesh

3614 silver badges12 bronze badges

Comments

Psionman · Accepted Answer · 2023-07-28 10:56:49Z

2

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.

edited Jul 28, 2023 at 10:56

Psionman

3,8411 gold badge42 silver badges95 bronze badges

answered Apr 5, 2023 at 4:37

MohaElder

534 bronze badges

Collectives™ on Stack Overflow

How to render html in svelte

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related