A Svelte and SvelteKit Checklist

Questions to ask

Is state declared with runes, with derived values in $derived and effects reserved for external side effects? Are lists keyed? Do components use callback props and snippets rather than deprecated patterns in new code? Is per-user state kept out of module singletons on the server? Does every secret live in $lib/server or private $env modules? Do forms validate on the server and work without JavaScript? Are rendering options and the adapter right for each route and the host? Do svelte-check, Vitest and Playwright run in CI? Are errors handled with +error.svelte and logged in handleError?

The checklist

Use it in reviews.

/*
[ ] Svelte 5 runes: $state / $derived; $effect only for external side effects
[ ] keyed {#each} blocks; $state.raw for large replaced data
[ ] callback props + snippets in new components (no createEventDispatcher / slots)
[ ] no per-user data in module-level state on the server; use context or load data
[ ] secrets only in $lib/server and $env/*/private; PUBLIC_ prefix for client values
[ ] form actions validate server-side; fail(400) for user errors; use:enhance on top
[ ] hooks.server.ts sets locals.user; authorisation checked in every load/action/endpoint
[ ] +error.svelte pages; handleError logs unexpected errors
[ ] prerender / ssr / csr chosen per route; correct adapter for the host
[ ] npm run check (svelte-check), Vitest and Playwright in CI
*/

Migrate gradually

Svelte 5 still compiles most Svelte 4 components, and the sv migrate command can update syntax. Convert components as you touch them rather than in one big change; check the docs for your version.

Quick check: Which item belongs on a SvelteKit production checklist?

• Import $env/static/private in client components
• Store per-user data in module-level $state on the server
• Form actions validate input on the server even if the browser validates too
• Use $effect to compute every derived value