svelte

<!-- Counter.svelte — Svelte 5 with runes -->
<script lang="ts">
  let count = $state(0);                  // Reactive state
  let doubled = $derived(count * 2);      // Computed value

  function increment() {
    count++;                              // Direct mutation triggers updates
  }

  $effect(() => {
    // Runs when dependencies change (like useEffect)
    console.log(`Count changed to ${count}`);
    document.title = `Count: ${count}`;
  });
</script>

<button onclick={increment}>
  Clicked {count} times (doubled: {doubled})
</button>

<style>
  button {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: #ff3e00;
    color: white;
    border: none;
    cursor: pointer;
  }
  button:hover {
    background: #ff5722;
  }
</style>

<!-- Card.svelte -->
<script lang="ts">
  interface Props {
    title: string;
    description?: string;
    variant?: "default" | "featured";
    onclick?: () => void;
  }

  let { title, description = "", variant = "default", onclick }: Props = $props();
</script>

<div class="card {variant}" onclick={onclick}>
  <h3>{title}</h3>
  {#if description}
    <p>{description}</p>
  {/if}
  {@render children()}                    <!-- Slot content -->
</div>

<style>
  .card { padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; }
  .card.featured { border-color: #ff3e00; background: #fff5f2; }
</style>

// stores/cart.ts — Writable store
import { writable, derived } from "svelte/store";

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

export const cart = writable<CartItem[]>([]);

export const cartTotal = derived(cart, ($cart) =>
  $cart.reduce((sum, item) => sum + item.price * item.quantity, 0)
);

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

export function addToCart(item: Omit<CartItem, "quantity">) {
  cart.update((items) => {
    const existing = items.find((i) => i.id === item.id);
    if (existing) {
      existing.quantity++;
      return [...items];
    }
    return [...items, { ...item, quantity: 1 }];
  });
}

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

<!-- CartSummary.svelte — Using stores -->
<script lang="ts">
  import { cart, cartTotal, cartCount, removeFromCart } from "$lib/stores/cart";
</script>

<div class="cart">
  <h2>Cart ({$cartCount} items)</h2>
  {#each $cart as item (item.id)}
    <div class="item">
      <span>{item.name} × {item.quantity}</span>
      <span>${(item.price * item.quantity).toFixed(2)}</span>
      <button onclick={() => removeFromCart(item.id)}>✕</button>
    </div>
  {/each}
  <p class="total">Total: ${$cartTotal.toFixed(2)}</p>
</div>

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

  let items = $state(["Apple", "Banana", "Cherry"]);
  let showModal = $state(false);
</script>

<!-- Animate list changes -->
{#each items as item (item)}
  <div animate:flip={{ duration: 300 }} transition:fade={{ duration: 200 }}>
    {item}
  </div>
{/each}

<!-- Modal with transitions -->
{#if showModal}
  <div class="overlay" transition:fade={{ duration: 150 }}>
    <div class="modal" transition:fly={{ y: 50, duration: 300 }}>
      <h2>Modal Content</h2>
      <button onclick={() => showModal = false}>Close</button>
    </div>
  </div>
{/if}

npx sv create my-app                      # SvelteKit project
cd my-app && npm install && npm run dev

# Or standalone Svelte (with Vite)
npm create vite@latest my-app -- --template svelte-ts