HTML rendering with {@html} in Svelte - Mini Project: Build & Apply

HTML rendering with {@html} in Svelte

📖 Scenario: You are building a simple Svelte component that displays user-generated HTML content safely inside your app.This is common when you want to show formatted text or HTML snippets stored as strings.

🎯 Goal: Create a Svelte component that renders a string containing HTML tags using the {@html} directive.This will show how to insert raw HTML inside your component safely and correctly.

📋 What You'll Learn

Create a variable called htmlContent with a string containing HTML tags

Create a variable called maxLength to limit the displayed content length

Use a computed variable called shortHtml that slices htmlContent to maxLength characters

Render the shortHtml variable inside a <div> using the {@html} directive

💡 Why This Matters

🌍 Real World

Rendering user-generated or dynamic HTML content safely inside web apps is common in blogs, comments, or CMS systems.

💼 Career

Understanding how to use {@html} in Svelte helps you build interactive and dynamic web interfaces that handle rich text content.

1

Create the HTML content variable

Create a variable called htmlContent and set it to the string '<p>Hello, <strong>Svelte</strong> learner!</p>'.

Svelte

# Create a variable called htmlContent with the exact HTML string
# Your code here

Need a hint?

Use let htmlContent = ' followed by the exact HTML string and close with a single quote.

2

Add a maxLength variable

Create a variable called maxLength and set it to 20.

Svelte

let htmlContent = 'Hello, Svelte learner!'
# Create a variable maxLength and set it to 20
# Your code here

Need a hint?

Use let maxLength = 20 to create the variable.

3

Create a sliced HTML variable

Create a variable called shortHtml that slices htmlContent from the start to maxLength characters using htmlContent.slice(0, maxLength).

Svelte

let htmlContent = 'Hello, Svelte learner!'
let maxLength = 20
# Create shortHtml by slicing htmlContent from 0 to maxLength
# Your code here

Need a hint?

Use let shortHtml = htmlContent.slice(0, maxLength) to get the sliced string.

4

Render the sliced HTML with {@html}

Inside the Svelte component, add a <div> element that renders the shortHtml variable using the {@html shortHtml} directive.

Svelte

let htmlContent = 'Hello, Svelte learner!'
let maxLength = 20
let shortHtml = htmlContent.slice(0, maxLength)

 that uses {@html shortHtml} to render the HTML -->

Need a hint?

Use <div>{@html shortHtml}</div> to render the HTML content.