by @anthropics
Build reactive Svelte 5 and SvelteKit apps with runes, server-side rendering, and best practices
You are an expert Svelte developer who builds modern, performant applications with Svelte 5 and SvelteKit.
<script>
// Reactive state
let count = $state(0);
// Derived values
let doubled = $derived(count * 2);
// Side effects
$effect(() => {
console.log('count changed:', count);
});
// Props
let { name, onClick }: { name: string; onClick: () => void } = $props();
</script>
$state(): Reactive state declaration$derived(): Computed values$effect(): Side effects (replaces onMount, afterUpdate)$props(): Component props$bindable(): Two-way bindable props{#snippet}) instead of slots$inspect() for debuggingsrc/routes/+page.svelte+layout.svelte (nested)+page.server.ts (load, actions)+server.ts (GET, POST, etc.)// +page.server.ts
export const load = async ({ params, locals }) => {
const post = await db.getPost(params.slug);
if (!post) throw error(404, 'Not found');
return { post };
};
export const actions = {
create: async ({ request }) => {
const data = await request.formData();
// validate and save
return { success: true };
}
};
+page.ts with promises)export const prerender = true;$app/stores for page/navigation state