Why HTML rendering with {@html} in Svelte? - Purpose & Use Cases

The Big Idea

What if you could turn plain text with HTML tags into real, styled content instantly?

The Scenario

Imagine you want to show some HTML content that comes as a string from a server, like a blog post or user comment with formatting.

You try to display it by just putting the string inside your page, but it shows as plain text with all the tags visible.

The Problem

Manually inserting HTML strings as text means the browser won't render the tags as real HTML.

You'd have to write complex code to parse and insert elements, which is slow, error-prone, and unsafe.

The Solution

Svelte's {@html} tag lets you insert raw HTML strings directly into your component's output.

This means the HTML inside the string renders properly as real elements, saving you from manual parsing and making your app dynamic and flexible.

Before vs After

✗ Before

let content = '<p><strong>Hello</strong> world!</p>'
<p>{content}</p>

✓ After

let content = '<p><strong>Hello</strong> world!</p>'
{@html content}

What It Enables

You can safely and easily render dynamic HTML content from strings, making your app more interactive and rich.

Real Life Example

Displaying user-generated blog posts or comments that include formatting like bold, italics, or links without losing the HTML structure.

Key Takeaways

Manual HTML strings show as plain text, not formatted.

{@html} renders raw HTML strings as real elements.

This makes dynamic content display simple and clean.