Day 1: Hello Svelte 5 - The Runes Era

Welcome to Day 1 of your journey into Svelte 5!

Svelte is unique. Unlike React or Vue, which do the bulk of their work in the browser (virtual DOM diffing), Svelte does its work at build time. It’s a compiler. It turns your components into tiny, highly efficient vanilla JavaScript.

With Svelte 5, we entered the era of Runes.

What are Runes?

Runes are function-like symbols that provide instructions to the Svelte compiler. They define reactivity. If you’ve used Svelte 3/4, say goodbye to let magic. If you are new, you are starting at the perfect time.

Hands-On: Setup

We use Vite to scaffold the project.

1. Create Project

Open your terminal:

npm create vite@latest svelte-learner -- --template svelte-ts

Select Svelte -> TypeScript.

2. Install & Run

cd svelte-learner
npm install
npm run dev

Open http://localhost:5173.

Anatomy of a Component (`.svelte`)

Open src/App.svelte. A Svelte file has three parts, all optional:

<script>: Logic (TypeScript/JavaScript).
Template (HTML-like syntax): No wrapper element needed!
<style>: Scoped CSS.

<script lang="ts">
  // Logic goes here
  let name = "Svelte Beginner";
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>Welcome to Svelte 5.</p>
</main>

<style>
  /* This h1 style ONLY affects this component */
  h1 {
    color: #ff3e00;
    text-transform: uppercase;
  }
</style>

Challenge for Day 1

Clear out App.svelte.
Create a variable city with your city name.
Display “I live in {city}” in an <h2> tag.
Style the <h2> to be purple.

Solution:

<script lang="ts">
  let city = "New York";
</script>

<h2>I live in {city}</h2>

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

Congratulations! You’ve built your first Svelte component. Tomorrow, we unlock the real power: Reactivity.