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.

Practice

1. What does the {@html} tag do in a Svelte component?

easy

A. It escapes HTML tags and shows them as plain text.

B. It renders a string as actual HTML inside the component.

C. It creates a new HTML element dynamically.

D. It comments out HTML code so it is not rendered.

Solution

1. Step 1: Understand {@html} purpose

   The {@html} tag tells Svelte to treat the string as HTML, not plain text.

2. Step 2: Compare with normal rendering

   Normally, Svelte escapes HTML tags to show them as text, but {@html} renders them as real HTML.

3. Final Answer:

   It renders a string as actual HTML inside the component. -> Option B

4. Quick Check:

   {@html} = renders HTML [OK]

Hint: Remember {@html} outputs HTML, not plain text [OK]

Common Mistakes:

• Thinking {@html} escapes HTML instead of rendering it
• Confusing {@html} with creating new elements
• Assuming {@html} comments out code

2. Which of the following is the correct syntax to render HTML stored in a variable htmlContent inside a Svelte component?

easy

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

B. <div>{@html(htmlContent)}</div>

C. <div>{htmlContent}</div>

D. <div>{#html htmlContent}{/html}</div>

Solution

1. Step 1: Recall correct {@html} syntax

   The correct syntax is {@html variableName} without parentheses or block tags.

2. Step 2: Check each option

   <div>{htmlContent}</div> renders as plain text, B uses invalid parentheses, D uses wrong block syntax.

3. Final Answer:

   <div>{@html htmlContent}</div> -> Option A

4. Quick Check:

   Correct {@html} syntax = {@html variable} [OK]

Hint: Use {@html variable} without parentheses or blocks [OK]

Common Mistakes:

• Adding parentheses around variable in {@html}
• Using block syntax like {#html}{/html}
• Not using {@html} and rendering raw string

3. Given this Svelte code:

  <script>
    let htmlString = '<strong>Hello</strong> <em>World</em>';
  </script>

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

What will be the rendered output in the browser?

medium

A. Hello World (plain text, no formatting)

B. <strong>Hello</strong> <em>World</em> (raw text)

C. Hello World (formatted text)

D. An error occurs because of unsafe HTML

Solution

1. Step 1: Understand {@html} rendering

   {@html renders the string as HTML, so tags become real formatting.

2. Step 2: Analyze the string content

   The string contains <strong> and <em> tags, so output will be bold and italic text.

3. Final Answer:

   <strong>Hello</strong> <em>World</em> (formatted text) -> Option C

4. Quick Check:

   HTML string renders as formatted text [OK]

Hint: {@html} renders tags as formatting, not raw text [OK]

Common Mistakes:

• Expecting tags to show as text instead of formatting
• Assuming plain text output without tags
• Thinking unsafe HTML causes runtime error

4. What is the main problem with this Svelte code?

  <script>
    let unsafeHtml = '';
  </script>

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

medium

A. It can run unsafe scripts and cause security issues (XSS).

B. Svelte automatically sanitizes the HTML, so no problem.

C. The image will not display because of invalid src attribute.

D. It will cause a syntax error because of quotes inside the string.

Solution

1. Step 1: Identify unsafe HTML usage

   The string contains an image with an onerror event that runs JavaScript.

2. Step 2: Understand {@html} risks

   {@html renders raw HTML, so malicious scripts can run causing XSS security issues.

3. Final Answer:

   It can run unsafe scripts and cause security issues (XSS). -> Option A

4. Quick Check:

   {@html with unsafe HTML = security risk [OK]

Hint: Never use {@html} with untrusted content [OK]

Common Mistakes:

• Thinking Svelte sanitizes HTML automatically
• Assuming syntax error due to quotes inside string
• Believing image won't display due to src

5. You want to display user-generated content that may contain HTML tags safely in your Svelte app. Which approach is best?

hard

A. Wrap the user content in a <pre> tag and use {@html}.

B. Escape the user content and render it normally without {@html}.

C. Use {@html} directly on the user content to render formatting.

D. Sanitize the user content to remove unsafe tags, then use {@html}.

Solution

1. Step 1: Understand risks of raw {@html}

   Using {@html} directly on user content risks XSS attacks if content is unsafe.

2. Step 2: Best practice for safe HTML rendering

   Sanitize user content to remove dangerous tags/scripts, then render with {@html} for formatting.

3. Final Answer:

   Sanitize the user content to remove unsafe tags, then use {@html}. -> Option D

4. Quick Check:

   Sanitize first, then {@html} = safe rendering [OK]

Hint: Always sanitize user HTML before {@html} rendering [OK]

Common Mistakes:

• Using {@html} directly on raw user input
• Escaping content but losing formatting
• Using <pre> which shows raw text, not formatted HTML