Markup and expressions

A component's markup is plain HTML into which you can insert values from JavaScript. Svelte evaluates whatever stands in curly braces and outputs the result in place of the braces.

Expressions in text

Curly braces may hold any JavaScript expression: a variable, a function call, arithmetic, the ternary operator.

<!-- src/routes/+page.svelte -->
<script>
  let user = 'Anna';
  let todos = ['Buy bread', 'Call Oleg'];
</script>
 
<h1>Tasks: {user.toUpperCase()}</h1>
<p>Total tasks: {todos.length}</p>
<p>{todos.length > 0 ? 'Things to do' : 'Time to rest'}</p>

The page shows "Tasks: ANNA", "Total tasks: 2" and "Things to do". Statements such as if or for are not allowed in braces — only expressions. Svelte has separate blocks for conditions and loops, covered in later lessons.

Values in attributes

An expression can go into an attribute — as the whole value or inside a string:

<script>
  let avatar = '/anna.png';
  let size = 48;
</script>
 
<img src={avatar} alt="Avatar" width={size} />
<a href="/users/{size}">Profile</a>

The image gets the address /anna.png and width 48, the link gets the address /users/48. Put the image in the static folder: files from it are served from the site root.

Shorthand

If the attribute name matches the variable name, you can write just the braces:

<script>
  let src = '/anna.png';
  let alt = 'Avatar';
</script>
 
<img {src} {alt} />

{src} is the same as src={src}. It is a common trick, especially when passing props to components.

HTML from a string

Regular braces escape text: the string '<b>important</b>' is shown with the angle brackets. To insert ready HTML, use the {@html ...} tag:

<script>
  let note = '<b>Important:</b> send the report';
</script>
 
<p>{@html note}</p>

The word "Important:" becomes bold. Use {@html} only for HTML you trust: a string from a user may contain a harmful script.

Comments

HTML comments  work in the markup, regular JavaScript comments work in the <script> block.

Common mistake

Writing expressions in double curly braces out of habit from Vue or Angular: {{ user }}. Svelte uses single braces — {user}. Svelte parses double braces as an object inside an expression, and the compiler reports an error.

Thanks for reading!