Last Updated: November 21, 2025
Svelte
Modern reactive JavaScript framework
Component Basics
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<style>
button {
background: #ff3e00;
color: white;
}
</style>
<h1>Count: {count}</h1>
<button on:click={increment}>
Increment
</button>Reactivity
<script>
let count = 0;
// Reactive declaration
$: doubled = count * 2;
// Reactive statement
$: if (count >= 10) {
alert('Count is high!');
}
// Reactive block
$: {
console.log('Count changed:', count);
}
</script>Props & Events
<!-- Child.svelte -->
<script>
export let name;
export let age = 0;
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function handleClick() {
dispatch('message', { text: 'Hello!' });
}
</script>
<button on:click={handleClick}>
{name} ({age})
</button>
<!-- Parent.svelte -->
<script>
import Child from './Child.svelte';
function handleMessage(event) {
console.log(event.detail.text);
}
</script>
<Child name="Alice" age={25} on:message={handleMessage} />Stores
// store.js
import { writable } from 'svelte/store';
export const count = writable(0);
// Component
<script>
import { count } from './store.js';
// Auto-subscription with $
// Automatically unsubscribes
</script>
<h1>{$count}</h1>
<button on:click={() => $count++}>+</button>💡 Pro Tips
Quick Reference
Build reactive apps with less code