What sets Svelte apart from other JavaScript frameworks?

Svelte compiles code at build time instead of interpreting it in the browser

Svelte uses a Virtual DOM like React

Svelte requires more code than other frameworks

Svelte and SvelteKit course · Module 1: Introduction to Svelte

Welcome to the Land of the Vikings!

3 min read · Updated August 13, 2026

In this lesson4

Welcome to Nordheim - the land of brave Vikings! I am Jarl Sven the Runic, ruler of the village of Svenheim and master of the ancient art of runes. I have heard that you wish to learn the secrets of Svelte - a magical technology that transforms code into pure power.

What is Svelte?

Svelte is a JavaScript framework, but not like the others. It is like a Viking rune forge - it compiles your code during the build step, instead of interpreting it in the browser.

Comparison with other frameworks

Framework	Approach	Viking Analogy
React	Virtual DOM at runtime	Constantly checking differences - like a guard waking up every moment
Vue	Reactivity at runtime	Magic spells cast on the fly
Angular	Complete framework	A mighty army with heavy equipment
Svelte	Compilation	Runes forged once - they work forever

Svelte is like a sword forged by the finest blacksmith - all the work happens in the forge (compilation), and the result is a light, fast weapon (pure JavaScript).

History of Svelte

Rich Harris created Svelte in 2016. The name comes from the English word meaning "slender, graceful" - exactly what Svelte code is.

Milestones:

2016 - Svelte 1.0 - birth
2019 - Svelte 3 - reactivity revolution ($:)
2023 - SvelteKit 2 - full-stack power
2024 - Svelte 5 - the era of Runes: $state, $derived, $effect
2026 - SvelteKit 3 - configuration in Vite and the #lib alias

In Nordheim you learn Svelte 5 and SvelteKit 3 - the newest rune magic.

Why Svelte?

// React - you have to remember useState, useEffect...
const [count, setCount] = useState(0);
setCount(count + 1);

// Svelte 5 - a variable with the $state rune and a plain assignment
let count = $state(0);
count += 1;

In Svelte you write less code, and it runs faster. The $state rune tells the compiler: "this value is alive, refresh the screen when it changes". The forge does the rest. It is like the difference between heavy armor and a lightweight Viking chainmail - less weight, more efficiency.

What awaits you in Nordheim?

Your journey through 14 locations:

Midgard - You are here! Svelte basics
Yggdrasil - Components like branches of a tree
Rune Chamber - Reactivity and Runes
Asgard - Props and Events
Bifrost - Bindings
The Norns - Template logic
Valhalla - Lifecycle
Well of Mimir - Stores
Ragnarok - Animations and transitions
Mjolnir - Actions
Drakkar - SvelteKit Routing
Prophecies of the Volva - SSR and data loading
Market of Birka - Form Actions
Heimdall's Watch - Hooks, API, Deployment

SKAL! Let us set forth, warrior!

Code for this lesson: App.svelte

<script>
  // Welcome to Nordheim - Land of the Vikings!
  // This is your first Svelte 5 component

  // $state - values that change and refresh the screen
  let vikingName = $state('Warrior');
  let gold = $state(0);

  // $derived - computed from gold, always up to date
  let reputation = $derived(
    gold >= 500 ? 'Legendary Jarl'
      : gold >= 200 ? 'Respected Warrior'
      : gold >= 50 ? 'Promising Viking'
      : 'Young Drengr'
  );

  function raid() {
    const loot = Math.floor(Math.random() * 50) + 10;
    gold += loot;
  }
</script>

<main class="viking-hall">
  <header>
    <h1>Viking Hall</h1>
    <p class="subtitle">Nordheim - Svelte World</p>
  </header>

  <section class="welcome">
    <h2>Welcome, {vikingName}!</h2>
    <p>This is your first Svelte component - simple as a viking sword!</p>

    <div class="input-group">
      <label for="viking-name">Your name:</label>
      <input id="viking-name" bind:value={vikingName} placeholder="Enter name..." />
    </div>
  </section>

  <section class="stats">
    <h3>Your stats</h3>
    <div class="stat-grid">
      <div class="stat">
        <span class="label">Gold</span>
        <span class="value">{gold}</span>
      </div>
      <div class="stat">
        <span class="label">Reputation</span>
        <span class="value">{reputation}</span>
      </div>
    </div>

    <button onclick={raid} class="raid-btn">
      Raiding expedition!
    </button>
  </section>

  <footer>
    <p>SKÅL! May Odin be with you!</p>
  </footer>
</main>

<style>
  .viking-hall {
    font-family: 'Georgia', serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%);
    min-height: 100vh;
    color: #e8d5b7;
  }

  header {
    text-align: center;
    border-bottom: 2px solid #d4af37;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
  }

  h1 {
    color: #d4af37;
    font-size: 2rem;
    margin: 0;
  }

  .subtitle {
    color: #8b7355;
    font-style: italic;
  }

  section {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid #d4af37;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  h2, h3 {
    color: #d4af37;
    margin-top: 0;
  }

  .input-group {
    margin-top: 1rem;
  }

  label {
    display: block;
    margin-bottom: 0.5rem;
    color: #d4af37;
  }

  input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #d4af37;
    background: rgba(0,0,0,0.3);
    color: #e8d5b7;
    border-radius: 4px;
    font-size: 1rem;
  }

  input:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  }

  .stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .stat {
    background: rgba(0,0,0,0.3);
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
  }

  .stat .label {
    display: block;
    color: #8b7355;
    font-size: 0.9rem;
  }

  .stat .value {
    display: block;
    font-size: 1.25rem;
    color: #d4af37;
    margin-top: 0.5rem;
  }

  .raid-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #8b0000 0%, #a52a2a 100%);
    color: white;
    border: 2px solid #d4af37;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .raid-btn:hover {
    background: linear-gradient(135deg, #a52a2a 0%, #cd5c5c 100%);
    transform: scale(1.02);
  }

  footer {
    text-align: center;
    color: #8b7355;
    border-top: 1px solid #3d2914;
    padding-top: 1rem;
  }
</style>

Spotted a mistake in this lesson?

Check yourself

Answer the questions from this lesson. Pick an answer to see right away whether it is correct.

1. What sets Svelte apart from other JavaScript frameworks?
2. Who created Svelte, and in what year did the first version appear?