HTML rendering with {@html} in Svelte - Step-by-Step Execution

Concept Flow - HTML rendering with {@html}

Start Component

↓

Define HTML string

↓

Use {@html} to insert HTML

↓

Svelte parses HTML string

↓

Render parsed HTML in DOM

↓

User sees rendered HTML content

The component defines a string with HTML code, then uses {@html} to tell Svelte to parse and render it as real HTML inside the page.

Execution Sample

Svelte

let htmlContent = '<p><strong>Hello</strong> world!</p>';

<div>{@html htmlContent}</div>

This code shows how Svelte renders the HTML string inside the div as actual HTML elements.

Execution Table

Step	Action	Input/State	Result/Output
1	Component starts	htmlContent = '<p><strong>Hello</strong> world!</p>'	htmlContent variable holds HTML string
2	Svelte encounters {@html}	htmlContent string	Svelte parses string as HTML nodes
3	Render parsed HTML	Parsed nodes: <p>, <strong>, text	DOM contains <div><p><strong>Hello</strong> world!</p></div>
4	User views page	Rendered DOM	User sees bold 'Hello' and normal 'world!' inside paragraph
5	Component updates htmlContent	htmlContent = '<em>Updated</em> content'	Svelte re-parses and updates DOM accordingly
6	Render updated HTML	Parsed nodes: <em>, text	DOM updates to <div><em>Updated</em> content</div>
7	User views updated page	Updated DOM	User sees italic 'Updated' and normal 'content'

💡 Rendering stops when component unmounts or no further updates occur

Variable Tracker

Variable	Start	After Step 5	Final
htmlContent	'<p><strong>Hello</strong> world!</p>'	'<em>Updated</em> content'	'<em>Updated</em> content'

Key Moments - 3 Insights

Why does {@html} render HTML tags instead of showing them as text?

Because {@html} tells Svelte to parse the string as HTML nodes, not plain text, so the tags become real elements in the DOM (see execution_table step 2 and 3).

What happens if htmlContent changes after initial render?

Svelte re-parses the new HTML string and updates the DOM to match the new content (see execution_table steps 5 and 6).

Is it safe to use {@html} with any string?

No, because it inserts raw HTML which can cause security risks like XSS if the string is from untrusted sources.

Visual Quiz - 3 Questions

Look at the execution table, what does Svelte do at step 3?

A Ignore the htmlContent string

B Display the htmlContent string as plain text

C Parse the htmlContent string as HTML nodes and render them

D Convert htmlContent to uppercase

💡 Hint

Check the 'Result/Output' column at step 3 in the execution_table

At which step does the DOM update to show the new HTML content?

A Step 2

B Step 6

C Step 4

D Step 7

💡 Hint

Look for the step where 'DOM updates to' is mentioned in the execution_table

If htmlContent was set to a plain text string without HTML tags, what would {@html} render?

A The text as plain text inside the div

B An error because no HTML tags exist

C Nothing, the div would be empty

D The text but with HTML tags added automatically

💡 Hint

Consider how {@html} parses strings and what happens if no tags are present

Concept Snapshot

Svelte's {@html} lets you insert raw HTML strings into your component.
It parses the string as HTML nodes and renders them inside the DOM.
Use it like: <div>{@html htmlString}</div>
Changing the string updates the rendered HTML.
Be careful: inserting untrusted HTML can cause security risks.

Full Transcript

This visual trace shows how Svelte renders HTML strings using {@html}. First, the component defines a variable holding an HTML string. When Svelte sees {@html htmlContent}, it parses the string into real HTML elements instead of showing it as text. The parsed elements are inserted inside the div in the DOM. When the htmlContent variable changes, Svelte re-parses and updates the DOM to reflect the new HTML. This lets you dynamically render HTML content inside your component. However, using {@html} with untrusted strings can cause security issues like cross-site scripting. The execution table walks through each step from defining the string, parsing, rendering, updating, and user view. The variable tracker shows how htmlContent changes over time. Key moments clarify why {@html} renders tags as elements and how updates work. The quiz tests understanding of parsing, rendering, and behavior with plain text. Overall, {@html} is a powerful way to render HTML strings safely when you control the content.