Coming from React? SvelteKit will feel familiar yet refreshingly different. Having built production applications with both frameworks — this portfolio is built with SvelteKit — here is my guide for React developers.

The Fundamental Difference: Compiler vs Runtime

React ships a runtime library (~40KB gzipped) that manages the virtual DOM and reconciliation. Svelte compiles your components at build time into vanilla JavaScript that directly manipulates the DOM. There is no virtual DOM, no runtime library, and no reconciliation overhead.

The result: SvelteKit applications are typically 60-70% smaller than equivalent React applications. A basic blog with SSR, images, and a contact form weighs ~18KB gzipped in SvelteKit vs ~87KB in Next.js.

Svelte 5 Runes: The React Developer's Rosetta Stone

Svelte 5 introduced runes — explicit reactivity primitives that will feel natural to React developers:

<script>
  // $state = useState
  let count = $state(0);

  // $derived = useMemo (but automatic dependency tracking)
  let doubled = $derived(count * 2);

  // $effect = useEffect (but automatic dependency tracking)
  $effect(() => {
    console.log(`Count is ${count}`);
  });

  function increment() {
    count += 1; // Direct mutation — no setState needed
  }
</script>

<button onclick={increment}>
  Clicked {count} times (doubled: {doubled})
</button>

Notice: no hooks, no dependency arrays, no rules of hooks. Runes work anywhere — in component scripts, in .svelte.js files, and inside functions.

File-Based Routing

SvelteKit's routing is similar to Next.js App Router but simpler:

src/routes/
├── +layout.svelte    // Root layout
├── +page.svelte      // Homepage (/)
├── about/
│   └── +page.svelte  // /about
├── blog/
│   ├── +page.svelte  // /blog
│   └── [slug]/
│       ├── +page.svelte  // /blog/my-post
│       └── +page.ts      // Load function

The +page.ts load function is equivalent to Next.js getServerSideProps or RSC data fetching:

// +page.ts
export function load({ params }) {
  const post = getPost(params.slug);
  return { post };
}

Form Actions

SvelteKit provides form actions similar to Remix and Next.js Server Actions. Forms work with progressive enhancement — they function without JavaScript:

<form method="POST" use:enhance>
  <input type="email" name="email" required />
  <button type="submit">Subscribe</button>
</form>

// +page.server.ts
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');
    // Save to database
    return { success: true };
  }
};

On this portfolio site, the contact form uses SvelteKit form actions with Nodemailer for email delivery — works without client-side JavaScript.

When to Choose SvelteKit

Scenario	Recommendation
Performance-critical marketing sites	SvelteKit — minimal JS, instant page loads
Personal projects and portfolios	SvelteKit — faster to build, delightful DX
Startup MVPs	SvelteKit — ship fast, iterate faster
Large team enterprise applications	Next.js — larger ecosystem, more hiring pool
Content-heavy websites	Either — both handle SSR/SSG well

My frontend development service covers both frameworks — I help teams choose and implement the right tool for their specific needs.

Key Takeaways

• Svelte compiles away — no virtual DOM, no runtime library, smaller bundles
• Svelte 5 runes provide explicit reactivity without hook rules or dependency arrays
• File-based routing and form actions feel familiar to Next.js and Remix developers
• SvelteKit is excellent for performance-critical sites, personal projects, and startup MVPs
• React/Next.js remains the safer choice for large teams due to ecosystem maturity