Your First Svelte Component

Now that you understand the structure of a .svelte file, it is time to build your first real Svelte component. You will create a simple interface, display dynamic data, and see how Svelte updates the UI automatically.

Editing the App.svelte File

Open the App.svelte file inside the src folder and replace the existing code with the following component:

<script>
  let title = "My First Svelte Component";
  let description = "Building modern frontend apps with Svelte.";
</script>

<h1>{title}</h1>

<p>{description}</p>

<style>
  h1 {
    color: purple;
  }

  p {
    font-size: 18px;
  }
</style>

After saving the file, the browser updates automatically and displays the new content.

Understanding the Component

This component contains:

• JavaScript variables inside the <script> section;
• HTML structure for the interface;
• CSS styles inside the <style> section.

The values stored in the variables are displayed using curly braces.

<h1>{title}</h1>

Svelte automatically connects the data to the interface.

Updating Dynamic Data

Try changing the values inside the variables:

let title = "Learning Svelte";

When you save the file, the interface updates instantly without manually refreshing the page.

This automatic updating behavior is one of the core ideas behind Svelte reactivity.