Build web applications with Svelte 5 runes, SvelteKit routing, form actions, and component patterns. Use when working with Svelte, SvelteKit, or building reactive web interfaces.
npx sv create my-app # Create SvelteKit project
cd my-app && pnpm install
pnpm dev # Start dev server (localhost:5173)
pnpm build # Build for production
Runes Quick Reference
Rune
Purpose
Example
$state
相关技能
Reactive state
let count = $state(0)
$derived
Computed values
let doubled = $derived(count * 2)
$effect
Side effects
$effect(() => console.log(count))
$props
Component props
let { name } = $props()
$bindable
Two-way binding
let { value = $bindable() } = $props()
Reactive State ($state)
<script>
let count = $state(0);
let user = $state({ name: 'Alice', age: 30 });
let items = $state(['apple', 'banana']);
</script>
<button onclick={() => count++}>
Clicked {count} times
</button>
<button onclick={() => user.age++}>
{user.name} is {user.age}
</button>
Deep reactivity: Objects and arrays update automatically on mutation.
Computed Values ($derived)
<script>
let count = $state(0);
let doubled = $derived(count * 2);
// For complex computations
let summary = $derived.by(() => {
const total = items.length;
const done = items.filter(i => i.done).length;
return `${done}/${total}`;
});
</script>
Side Effects ($effect)
<script>
let count = $state(0);
$effect(() => {
console.log(`Count is ${count}`);
document.title = `Count: ${count}`;
// Cleanup function
return () => {
console.log('Cleanup');
};
});
</script>