Svelte: Reactive UIs with No Virtual DOM

# Create a new SvelteKit project
npm create svelte@latest my-svelte-app

# Follow the prompts:
# - Template: Skeleton project
# - TypeScript: Yes (recommended)
# - ESLint, Prettier: Yes

cd my-svelte-app
npm install
npm run dev

# Using Vite's Svelte template
npm create vite@latest my-svelte-spa -- --template svelte-ts

cd my-svelte-spa
npm install
npm run dev

<script lang="ts">
    // Reactive variable — just a regular let declaration
    let count: number = 0;

    function increment() {
        count += 1;  // This assignment triggers a DOM update!
    }

    function reset() {
        count = 0;
    }
</script>

<!-- Template: plain HTML with {expressions} -->
<div class="counter">
    <h2>Count: {count}</h2>
    <button on:click={increment}>Increment</button>
    <button on:click={reset} disabled={count === 0}>Reset</button>
</div>

<style>
    /* Styles are automatically scoped — won't leak out */
    .counter {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 24px;
    }
    button {
        padding: 8px 16px;
        background: #FF3E00;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
    }
</style>

<script lang="ts">
    // Props are declared with `export let`
    export let label: string;
    export let count: number = 0;        // Default value
    export let variant: 'primary' | 'secondary' = 'primary';
</script>

<span class="badge {variant}">
    {label}
    {#if count > 0}
        <sup>{count}</sup>
    {/if}
</span>

<style>
    .badge { padding: 4px 10px; border-radius: 12px; font-size: 0.85rem; }
    .primary { background: #FF3E00; color: white; }
    .secondary { background: #e0e0e0; color: #333; }
</style>

<script lang="ts">
    import Badge from './Badge.svelte';
    let notifications = 5;
</script>

<Badge label="Inbox" count={notifications} variant="primary" />
<Badge label="Archive" />  <!-- Uses defaults -->

<script lang="ts">
    let firstName = 'Mayur';
    let lastName = 'Dabhi';

    // $: creates a reactive declaration — recomputes when deps change
    $: fullName = `${firstName} ${lastName}`;
    $: initials = `${firstName[0]}${lastName[0]}`;

    let items: string[] = [];
    let filter = '';

    // Complex reactive statement — runs when items or filter changes
    $: filteredItems = items.filter(item =>
        item.toLowerCase().includes(filter.toLowerCase())
    );

    // Reactive statement (not just expression)
    $: {
        if (filteredItems.length === 0 && filter !== '') {
            console.log('No items match the filter:', filter);
        }
    }

    // Reactive statement that depends on a condition
    $: document.title = `${filteredItems.length} results for "${filter}"`;
</script>

import { writable, derived } from 'svelte/store';

interface CartItem {
    id: number;
    name: string;
    price: number;
    quantity: number;
}

// writable store — can be read and written from anywhere
export const cartItems = writable<CartItem[]>([]);

// derived store — computed from cartItems, updates automatically
export const cartTotal = derived(cartItems, ($items) =>
    $items.reduce((sum, item) => sum + item.price * item.quantity, 0)
);

export const cartCount = derived(cartItems, ($items) =>
    $items.reduce((sum, item) => sum + item.quantity, 0)
);

// Helper functions that update the store
export function addToCart(item: Omit<CartItem, 'quantity'>) {
    cartItems.update(items => {
        const existing = items.find(i => i.id === item.id);
        if (existing) {
            return items.map(i =>
                i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
            );
        }
        return [...items, { ...item, quantity: 1 }];
    });
}

export function removeFromCart(id: number) {
    cartItems.update(items => items.filter(i => i.id !== id));
}

<script lang="ts">
    import { cartCount, cartTotal, removeFromCart } from '../stores/cart';

    // The $ prefix auto-subscribes to a store.
    // Svelte handles subscribe() and unsubscribe() lifecycle for you.
    // $cartCount and $cartTotal are always the current values.
</script>

<button class="cart-btn">
    Cart ({$cartCount} items) — ${$cartTotal.toFixed(2)}
</button>

<script lang="ts">
    import { fade, fly, slide, scale } from 'svelte/transition';
    import { flip } from 'svelte/animate';

    let visible = true;
    let items = ['Apple', 'Banana', 'Cherry'];

    function addItem() {
        items = [...items, `Item ${items.length + 1}`];
    }

    function removeItem(index: number) {
        items = items.filter((_, i) => i !== index);
    }
</script>

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
    <!-- fade: opacity 0→1 on enter, 1→0 on leave -->
    <div transition:fade={{ duration: 300 }}>
        Fades in and out
    </div>

    <!-- fly: moves from y=50px while fading -->
    <p in:fly="{{ y: 50, duration: 400 }}" out:fade>
        Flies in from below
    </p>
{/if}

<!-- flip animates list reorders smoothly -->
<ul>
    {#each items as item, i (item)}
        <li animate:flip={{ duration: 300 }}>
            {item}
            <button on:click={() => removeItem(i)}>✕</button>
        </li>
    {/each}
</ul>

import type { PageServerLoad } from './$types';
import { error } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params, fetch }) => {
    const res = await fetch(`/api/posts/${params.slug}`);

    if (!res.ok) {
        throw error(404, `Post "${params.slug}" not found`);
    }

    const post = await res.json();

    return {
        post,
        // This data is passed as `data` prop to +page.svelte
    };
};

<script lang="ts">
    import type { PageData } from './$types';

    // data is automatically typed from the load function
    export let data: PageData;

    const { post } = data;
</script>

<svelte:head>
    <title>{post.title} | My Blog</title>
    <meta name="description" content={post.excerpt} />
</svelte:head>

<article>
    <h1>{post.title}</h1>
    <time datetime={post.publishedAt}>{post.formattedDate}</time>
    <div class="content">{@html post.htmlContent}</div>
</article>

import type { Actions } from './$types';
import { fail, redirect } from '@sveltejs/kit';

export const actions: Actions = {
    default: async ({ request }) => {
        const data = await request.formData();
        const email = data.get('email') as string;
        const message = data.get('message') as string;

        if (!email || !message) {
            return fail(400, { error: 'Email and message are required.' });
        }

        // Send email, save to DB, etc.
        await sendContactEmail({ email, message });

        throw redirect(303, '/contact/success');
    }
};

<script lang="ts">
    import { enhance } from '$app/forms';
    import type { ActionData } from './$types';
    export let form: ActionData;
</script>

<!-- use:enhance progressively enhances the form with fetch -->
<form method="POST" use:enhance>
    {#if form?.error}
        <p class="error">{form.error}</p>
    {/if}
    <input name="email" type="email" placeholder="your@email.com" required />
    <textarea name="message" placeholder="Your message..." required></textarea>
    <button type="submit">Send Message</button>
</form>