Learn Svelte - 10 Code Examples & CST Typing Practice Test
Svelte is a modern, component-based JavaScript framework that shifts work from the browser to the build step. Instead of using a virtual DOM, Svelte compiles components into highly optimized vanilla JavaScript, delivering faster performance and smaller bundles.
View all 10 Svelte code examples →
Learn SVELTE with Real Code Examples
Updated Nov 21, 2025
Code Sample Descriptions
Svelte Counter Component
<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.
Svelte Counter with Reactive Statement
<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.
Svelte Counter with LocalStorage
<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.
Svelte Counter with Theme Toggle and Computed Class
<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.
Svelte Counter with Derived State
<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.
Svelte Counter with Event Dispatch
<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.
Svelte Counter with Slot Controls
<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.
Svelte Counter with Reactive Theme
<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.
Svelte Counter with Lifecycle Hook
<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.
Svelte Counter with Two-way Binding
<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.
Frequently Asked Questions about Svelte
What is Svelte?
Svelte is a modern, component-based JavaScript framework that shifts work from the browser to the build step. Instead of using a virtual DOM, Svelte compiles components into highly optimized vanilla JavaScript, delivering faster performance and smaller bundles.
What are the primary use cases for Svelte?
Single-page applications (SPAs). Highly interactive UI widgets. Performance-critical front-end apps. Progressive web apps (PWAs). Embeddable components for websites
What are the strengths of Svelte?
Extremely lightweight and fast. Minimal code and easy syntax. Built-in transitions and animations. No virtual DOM = fewer performance bottlenecks. SvelteKit is robust for full-stack development
What are the limitations of Svelte?
Smaller ecosystem compared to React/Vue. Less enterprise adoption. Fewer third-party libraries. SSR and advanced concepts tied heavily to SvelteKit. Learning new patterns unique to Svelte’s compilation model
How can I practice Svelte typing speed?
CodeSpeedTest offers 10+ real Svelte code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.