Learn SVELTE with Real Code Examples

<script>
    let count = 0;
    let isDark = false;
    function increment() { count += 1; }
    function decrement() { count -= 1; }
    function reset() { count = 0; }
    function toggleTheme() { isDark = !isDark; }
</script>

<div class={isDark ? 'dark-theme' : 'light-theme'}>
    <h2>Counter: {count}</h2>
    <div>
        <button on:click={increment}>+</button>
        <button on:click={decrement}>-</button>
        <button on:click={reset}>Reset</button>
    </div>
    <button on:click={toggleTheme}>Switch to {isDark ? 'Light' : 'Dark'} Theme</button>
</div>

<style>
    .dark-theme { background-color: #222; color: #eee; }
    .light-theme { background-color: #fff; color: #000; }
</style>

Demonstrates a simple counter component using Svelte reactive variables and event handling.

<script>
    let count = 0;
    $: console.log('Counter changed:', count);
    function increment() { count += 1; }
    function decrement() { count -= 1; }
</script>

<h2>Counter: {count}</h2>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>

Uses a reactive statement to log counter changes in Svelte.

<script>
    let count = parseInt(localStorage.getItem('count') || '0', 10);
    function increment() { count += 1; localStorage.setItem('count', count); }
    function decrement() { count -= 1; localStorage.setItem('count', count); }
    function reset() { count = 0; localStorage.setItem('count', count); }
</script>

<h2>Counter: {count}</h2>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>
<button on:click={reset}>Reset</button>

Persists counter value using localStorage in Svelte.

<script>
    let count = 0;
    let isDark = false;
    function increment() { count += 1; }
    function decrement() { count -= 1; }
    function toggleTheme() { isDark = !isDark; }
</script>

<div class={isDark ? 'dark-theme' : 'light-theme'}>
    <h2>Counter: {count}</h2>
    <button on:click={increment}>+</button>
    <button on:click={decrement}>-</button>
    <button on:click={toggleTheme}>Toggle Theme</button>
</div>

Dynamically applies theme classes in Svelte using a computed expression.

<script>
    let count = 0;
    $: parity = count % 2 === 0 ? 'Even' : 'Odd';
    function increment() { count += 1; }
    function decrement() { count -= 1; }
</script>

<h2>Counter: {count} ({parity})</h2>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>

Uses a derived variable to show whether the counter is even or odd.

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    let count = 0;
    function increment() { count += 1; dispatch('update', count); }
    function decrement() { count -= 1; dispatch('update', count); }
</script>

<h2>Counter: {count}</h2>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>

Emits counter updates to a parent component using Svelte's createEventDispatcher.

<script>
    let count = 0;
    function increment() { count += 1; }
    function decrement() { count -= 1; }
</script>

<h2>Counter: {count}</h2>
<slot name='controls'>
    <button on:click={increment}>+</button>
    <button on:click={decrement}>-</button>
</slot>

Uses a slot to allow custom button placement in Svelte.

<script>
    let count = 0;
    let isDark = false;
    $: isDark = count > 5;
    function increment() { count += 1; }
    function decrement() { count -= 1; }
</script>

<div class={isDark ? 'dark-theme' : 'light-theme'}>
    <h2>Counter: {count}</h2>
    <button on:click={increment}>+</button>
    <button on:click={decrement}>-</button>
</div>

Automatically switches to dark theme when counter exceeds 5.

<script>
    import { onMount } from 'svelte';
    let count = 0;
    onMount(() => { console.log('Mounted with count =', count); });
    function increment() { count += 1; }
    function decrement() { count -= 1; }
</script>

<h2>Counter: {count}</h2>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>

Uses Svelte's onMount lifecycle hook to log initial counter state.

<script>
    let count = 0;
</script>

<h2>Counter: {count}</h2>
<input type='number' bind:value={count} />
<button on:click={() => count++}>+</button>
<button on:click={() => count--}>-</button>

Demonstrates two-way binding using Svelte's bind:value for an input field counter.