Svelte – Convert string into HTML

Table of Contents Hide
  1. Code Example
  2. Live Demo

It is one of the requirements of the development to convert string into html. Different frameworks have different methods to do this. In Svelte, we use @html tag to let it know that the string has to be parsed as html.

If you display a string with html tags in it, the svelte will not parse it. It will simply show the content as string. But there is a way to get the required results.

Note: You should always filter the html in string to keep it safe. If you do not trust the source, you should not use this functionality. Because there is always a chance of XSS attacks using scripts. But if you are using static html or data from your server, then you may trust it.

Code Example

 let string = `Tony Stark is <strong>Ironman</strong>`;

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

In this code example we are using a text string which has a <strong> tag. If you print it directly, it will show the tags as they are. But using @html, the tag is parsed.

    Tweet this to help others

Live Demo

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like

Svelte – Creating a CRUD application

Table of Contents Hide Read OperationCreate OperationUpdate OperationDelete OperationComplete CRUD codeLive DemoRelated Posts: In this article we will learn how to do operations like create, read, update and delete by…
View Post