A Brief History of What is Svelte

Understanding Svelte also means knowing its origin:

• 2016 — Rich Harris created Svelte while working at The Guardian. Goal: solve the runtime framework overhead problem with a compiler-first approach.
• 2018 — Svelte 3.0 completely rewritten — reactive declarations, no more imperative API. Community excitement exploded.
• 2019 — Svelte 3 named most loved framework in Stack Overflow survey. Viral conference talk “Rethinking Reactivity.”
• 2020 — Sapper (early Svelte meta-framework) widely used. Svelte adoption grew significantly.
• 2021 — SvelteKit announced — Sapper’s replacement as the official Svelte full-stack framework
• 2022 — SvelteKit 1.0 stable released. Rich Harris joined Vercel to work on Svelte full-time.
• 2023 — Svelte 4.0 — improved TypeScript support, smaller runtime
• 2024 — Svelte 5.0 — Runes system introduced (new reactivity primitives)
• 2026 — Svelte 5.x stable with Runes as default. SvelteKit 2.x is the standard full-stack solution.

8 Powerful Concepts of Svelte

Concept 1: Svelte Component Structure — One File, Everything 📄

What is Svelte’s component format? Each Svelte component is a .svelte file that contains script, HTML template, and styles — all in one clean file.

<!-- ArticleCard.svelte -->
<script>
    // JavaScript (or TypeScript) — component logic
    export let title;          // Props are declared with export
    export let author;
    export let readTime = 5;   // Default prop value
    export let imageUrl;

    // Reactive variable — just a regular let
    let isBookmarked = false;

    // Event handler
    function toggleBookmark() {
        isBookmarked = !isBookmarked;   // Svelte auto-detects this change!
    }

    // Derived value — $ makes it reactive
    $: cardClass = isBookmarked ? "card card--bookmarked" : "card";
</script>

<!-- HTML Template — clean, no JSX needed -->
<div class={cardClass}>
    <img src={imageUrl} alt={title} />

    <div class="content">
        <h2>{title}</h2>
        <p class="meta">By {author} · {readTime} min read</p>
    </div>

    <button on:click={toggleBookmark} class:active={isBookmarked}>
        {isBookmarked ? "Saved ✓" : "Save"}
    </button>
</div>

<!-- Scoped CSS — styles only apply to this component -->
<style>
    .card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s;
    }
    .card--bookmarked {
        border: 2px solid #0066cc;
    }
    img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 8px;
    }
    button {
        background: #0066cc;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
    }
    button.active {
        background: #004499;
    }
</style>

What is Svelte comparison with React for the same component:

// React version — more boilerplate
import { useState } from "react";
import styles from "./ArticleCard.module.css";

function ArticleCard({ title, author, readTime = 5, imageUrl }) {
    const [isBookmarked, setIsBookmarked] = useState(false);

    return (
        <div className={`${styles.card} ${isBookmarked ? styles.bookmarked : ""}`}>
            <img src={imageUrl} alt={title} />
            <div className={styles.content}>
                <h2>{title}</h2>
                <p className={styles.meta}>By {author} · {readTime} min read</p>
            </div>
            <button onClick={() => setIsBookmarked(b => !b)} className={isBookmarked ? styles.active : ""}>
                {isBookmarked ? "Saved ✓" : "Save"}
            </button>
        </div>
    );
}
// + separate .module.css file needed

The advantage here is simplicity. No import statements, no useState, no separate CSS file, no className — just clean, readable HTML with reactive logic.

Concept 2: Svelte Reactivity — No useState Needed ⚡

How does Svelte reactivity work? The most surprising thing about Svelte for React developers — variables are reactive by default. No useState, no setState, just plain JavaScript assignments.

<script>
    // These variables are automatically reactive.
    // They are automatically reactive — any assignment triggers a UI update

    let count = 0;
    let name = "Rahul";
    let items = ["apple", "banana", "mango"];

    function increment() {
        count++;              // Svelte sees this assignment and updates the DOM
    }

    function addItem() {
        items = [...items, "orange"];   // Assignment triggers reactivity
        // items.push("orange") does NOT trigger reactivity in Svelte
    }

    // Reactive declarations — recalculated when dependencies change
    $: doubled = count * 2;
    $: greeting = `Hello, ${name}! Count is ${count}.`;
    $: isHigh = count > 10;

    // Reactive statement — runs code when dependencies change
    $: if (count > 20) {
        alert("Count is getting high!");
        count = 0;
    }

    // Reactive block
    $: {
        console.log("Count changed:", count);
        console.log("Doubled:", doubled);
    }
</script>

<h1>{greeting}</h1>
<p>Count: {count} | Doubled: {doubled}</p>
<button on:click={increment}>Increment</button>
<button on:click={() => count = 0}>Reset</button>

{#if isHigh}
    <p style="color: red">Count is high!</p>
{/if}

<ul>
    {#each items as item, i}
        <li>{i + 1}. {item}</li>
    {/each}
</ul>
<button on:click={addItem}>Add Item</button>

What are Svelte 5 Runes?

Svelte 5 introduced Runes — a new reactivity system using special $ syntax:

<script>
    // Svelte 5 Runes — explicit reactive primitives
    let count = $state(0);                    // Replaces let count = 0
    let name = $state("Rahul");

    // Derived state — replaces $: doubled = count * 2
    const doubled = $derived(count * 2);
    const greeting = $derived(`Hello, ${name}! Count is ${count}.`);

    // Side effects — replaces $: { ... }
    $effect(() => {
        console.log("Count changed:", count);
        document.title = `Count: ${count}`;
    });

    function increment() {
        count++;    // Still just an assignment
    }
</script>

<h1>{greeting}</h1>
<p>{count} × 2 = {doubled}</p>
<button onclick={increment}>+1</button>

Concept 3: Svelte Template Syntax — Clean and Readable 🔀

How does Svelte’s template system work? Svelte uses HTML-like template directives — no JSX, no JavaScript inside curly braces everywhere, just clean readable templates.

<script>
    let user = { name: "Rahul", role: "admin" };
    let articles = [
        { id: 1, title: "What is Svelte?", published: true },
        { id: 2, title: "What is NestJS?", published: true },
        { id: 3, title: "Draft Article", published: false }
    ];
    let isLoading = false;
    let error = null;
    let inputValue = "";
</script>

<!-- Conditional rendering -->
{#if isLoading}
    <p>Loading...</p>
{:else if error}
    <p class="error">Error: {error}</p>
{:else if user.role === "admin"}
    <p>Welcome, Admin {user.name}!</p>
{:else}
    <p>Welcome, {user.name}!</p>
{/if}

<!-- List rendering -->
{#each articles as article (article.id)}
    {#if article.published}
        <div class="article-card">
            <h3>{article.title}</h3>
        </div>
    {/if}
{:else}
    <p>No articles found.</p>
{/each}

<!-- Two-way binding with the bind: directive -->
<input bind:value={inputValue} placeholder="Search articles..." />
<p>Searching for: {inputValue}</p>

<!-- Await blocks — for promises -->
{#await fetchArticles()}
    <p>Fetching articles...</p>
{:then data}
    {#each data as article}
        <p>{article.title}</p>
    {/each}
{:catch error}
    <p>Failed to load: {error.message}</p>
{/await}

<!-- Event handling -->
<button on:click={() => console.log("clicked")}>Click</button>
<button on:click|preventDefault={handleSubmit}>Submit</button>
<!-- Modifiers: preventDefault, stopPropagation, once, passive -->

<input
    on:keydown={handleKey}
    on:blur={() => validate(inputValue)}
/>

Concept 4: Svelte Stores — Global State Management 🗃️

What are Svelte stores? A lightweight, built-in state management solution for sharing data across components — no Redux, no Context API, no external library needed.

// stores/articleStore.js — Svelte store system
import { writable, readable, derived, get } from "svelte/store";

// Writable store — can be read and updated by anyone
export const articles = writable([]);
export const isLoading = writable(false);
export const currentUser = writable(null);

// Readable store — can only be read, updated only from inside
export const serverTime = readable(new Date(), function start(set) {
    const interval = setInterval(() => {
        set(new Date());
    }, 1000);

    return function stop() {
        clearInterval(interval);
    };
});

// Derived store — computed from other stores
export const publishedArticles = derived(
    articles,
    ($articles) => $articles.filter(a => a.published)
);

export const articleCount = derived(
    articles,
    ($articles) => $articles.length
);

// Custom store — what is Svelte's store with methods
function createCartStore() {
    const { subscribe, set, update } = writable([]);

    return {
        subscribe,
        addItem: (item) => update(items => [...items, item]),
        removeItem: (id) => update(items => items.filter(i => i.id !== id)),
        clear: () => set([]),
        total: derived({ subscribe }, ($items) =>
            $items.reduce((sum, item) => sum + item.price, 0)
        )
    };
}

export const cart = createCartStore();

<!-- ArticleList.svelte — using stores -->
<script>
    import { articles, isLoading, publishedArticles } from "../stores/articleStore";
    import { onMount } from "svelte";

    // The $ prefix auto-subscribes and unsubscribes
    // The $ prefix automatically subscribes to the store
    // It subscribes when component mounts, unsubscribes when it destroys

    onMount(async () => {
        isLoading.set(true);
        const response = await fetch("/api/articles");
        const data = await response.json();
        articles.set(data);
        isLoading.set(false);
    });
</script>

{#if $isLoading}
    <p>Loading articles...</p>
{:else}
    <p>Total: {$articles.length} | Published: {$publishedArticles.length}</p>
    {#each $publishedArticles as article (article.id)}
        <div>{article.title}</div>
    {/each}
{/if}