Understanding .svelte Files

Svelte applications are built using .svelte files called components. These files combine HTML, CSS, and JavaScript in a single place, allowing developers to build complete UI elements more efficiently.

In this chapter, you will explore the basic structure of a Svelte component.

What Is a .svelte File?

A .svelte file is a component file used by Svelte applications. Each component can contain:

• HTML for structure;
• CSS for styling;
• JavaScript for logic and interactivity.

This allows developers to keep related code together instead of separating everything into multiple files.

Basic Component Structure

A typical Svelte component contains three main parts:

<script>
  let title = "Welcome to Svelte";
</script>

<h1>{title}</h1>

<style>
  h1 {
    color: purple;
  }
</style>

The <script> section contains JavaScript logic and variables.

The HTML section defines the user interface that appears on the page.

The <style> section contains component-specific CSS styles.

Dynamic Data with Curly Braces

Svelte uses curly braces { } to display JavaScript values inside the interface.

For example:

<script>
  let name = "Alex";
</script>

<h1>Hello {name}</h1>

When the value of name changes, the interface updates automatically.

This is one of the core ideas behind reactive frontend development.

Component-Based Development

Modern frontend applications are usually built from many small reusable components.

Instead of building one massive page, developers create smaller pieces like:

• Navigation bars;
• Buttons;
• Cards;
• Forms;
• Product items.

Svelte components make it easier to organize and reuse these interface elements.