$state · projects
0+
SvelteKit apps shipped
let projects = $state(32); let total = $derived( projects + 12 );
Stack Innovations
Start a project
Stack Innovations
Start a project
Most React stacks ship a runtime, a virtual DOM, a reconciler, and the
rest of your app on top. Svelte ships none of that — $state,
$derived, and $effect compile down to surgical DOM
updates. SvelteKit wraps that in routing, load functions, form actions,
and adapters. The result: tiny bundles that feel instant.
Each stat is a Svelte 5 $state rune. Hover any to see the source the compiler turns into surgical DOM updates. Counters scrub with scroll.
let projects = $state(32); let total = $derived( projects + 12 );
let routes = $state(6200); $effect(() => { analytics.track(routes); });
let adapters = $state(6); $effect(() => { build.target(adapters); });
let runtime = $state(0); // compiled // no virtual DOM
Click a file in the sidebar — the active capability opens in the editor. Each pane is a working pattern we've shipped.
Folders under src/routes are URLs; +page.svelte renders the page; +layout.svelte wraps every nested route below it. Param folders [slug], optional [[slug]], rest [...path], route groups (marketing) for shared layouts without URL impact.
+page.svelte · the page+layout.svelte · nested chrome[slug], [[opt]], [...rest](group) folders · shared layouts+error.svelte · per-segment errors$state for reactive values. $derived for computed. $effect for side-effects. $props, $bindable, $inspect round out the set. The compiler tracks dependencies precisely — no virtual DOM, no reconciler, no useMemo ceremony. Updates are O(changed), not O(component).
let count = $state(0)let total = $derived(price * qty)$effect(() => sync(...))let { name } = $props()$state.snapshot() for serialization+page.server.ts for server-only data, +page.ts for universal, +layout.server.ts for shared upstream state. Layout loaders cascade to every nested page, deduped, parallel. Generated $types typecheck the chain end-to-end. Streaming via promises in returned objects.
+page.server.ts · server-only+page.ts · universal (SSR + CSR)parent() · await layout data./$types end-to-endMutations are <form action>. Server actions in +page.server.ts handle them — named (?/login), validated with Zod, returning fail() for errors or redirect() for success. use:enhance upgrades to JSON without nav and gives optimistic-UI hooks. Works without JS as a baseline.
export const actions = { default, login }FormDatafail(400, { errors })use:enhance · pending stateSvelte ships transitions as a directive: transition:fade, fly, slide, scale, blur, draw, crossfade. animate:flip handles list reordering. tweened() and spring() stores let any value follow a curve. No third-party motion library needed for 90% of cases.
transition:fly · in/out togetherin: / out: · one-wayanimate:flip · FLIP reorderingspring() store · any valueOne file (svelte.config.js), one line. adapter-auto detects the host. Otherwise adapter-vercel (edge or serverless), adapter-cloudflare (Workers), adapter-netlify, adapter-node, or adapter-static for fully prerendered output. Per-route prerender / SSR / CSR via page options.
adapter-auto · detects hostadapter-vercel({ runtime: 'edge' })adapter-cloudflare + KV/D1adapter-static · full prerenderexport const prerender = trueThis is what makes Svelte itself: it's a compiler, not a runtime. Toggle the features on the left — the +page.svelte source rebuilds in the middle, the compiled JavaScript that actually ships rebuilds on the right, and the live preview at the bottom of each pane actually does the thing. The bundle-size meter shows how much code each feature adds. Compare to React's baseline.
Same framework, two very different ways it ends up shipping. Eight criteria your team will actually feel — in plain English, with the receipts.
Default config, lots of unused components in the tree. Svelte still wins, but the win gets squandered.
Lighthouse 100s as a starting line. CI fails the build on any regression.
Stuck on the older reactive-label model. Migrating to Svelte 5 sits in the backlog forever.
Svelte 5 runes from day one. Updates are O(changed), code is grep-able, types flow end-to-end.
Everyone reaches for a state library "just in case." The bundle puts on weight, the win shrinks.
Runes replace 90% of state libraries. The compiler shakes out the rest. You ship the framework's idea, not its weight.
Bolted on as a follow-up engagement. The "we'll get to it" version of SEO.
Sitemaps, structured data, per-route <svelte:head>, Open Graph images — live on day one.
Switching providers later means rewriting deploy pipelines and parts of the app.
Same code ships to any of them. Switching is a one-line change in svelte.config.js.
You move the routes yourself. Links break, search rankings drop, customers hit 404s.
Route inventory, redirect map, content port, dry-run, cutover. SEO continuity holds.
"Good luck with the admin." Editors learn by trial and error in production.
Editors leave training feeling fluent. First publish goes through without a Slack ping.
Hand-off, then silence. Six months later you're two majors behind on Svelte.
Monthly version bumps, perf monitoring, real Slack channel. Features, not tickets.
Svelte ships transitions as a directive on the element itself: transition:fly, fade, slide, scale, blur, draw. Pick a directive on the left — the card on the right transitions in and out for real, source code on the right shows the exact two lines you'd write. No third-party motion library involved.
Every directive is also one-way (in: / out:) and key-able for FLIP-style list reordering via animate:flip. The compiler turns these into Web Animations API calls — no requestAnimationFrame loops, no detached DOM nodes, no third-party motion runtime in the bundle.
Inventory every URL. Map each to +page.svelte + load function. Lighthouse + TTI baseline. Pick the adapter for the runtime.
SvelteKit + Vite + TypeScript, Svelte 5 runes mode, design tokens, layouts, +error.svelte, baseline <svelte:head>.
Routes, layouts, typed loaders, form actions with Zod, use:enhance for pending UI, transitions, accessible motion.
Image pipeline, prefetch tuning, JSON-LD, sitemap, OG images. headers() tagging, adapter wired, edge regions pinned.
Content + redirect map, dry-run on staging, vite build against the target adapter, deploy, DNS cutover.
Svelte + adapter upgrades, route-level perf monitoring, error-boundary triage, monthly review.