SvelteKit 3

SvelteKit 3: New Features, Breaking Changes & How to Upgrade (2026)

SvelteKit 3 is the new major version of the official application framework for Svelte, and it shipped on October 1, 2026. The Svelte team describes it as “the same framework with a little more polish, a little more type safety, and a little less junk”. In other words, your apps will feel familiar. However, several things have moved.

In this guide, we cover what changed, which versions you need, and how to upgrade a SvelteKit 2 project step by step. We also flag the breaking changes most likely to trip you up, so you can plan the migration before you start.

SvelteKit 3

What Is SvelteKit 3?

SvelteKit 3 is a cleanup release rather than a rewrite. According to the official announcement, the goal was better polish, stronger type safety and less legacy code. Routing, load functions, form actions and adapters all still work the way you know them.

The release followed a release candidate published on August 13, 2026. That gave teams about seven weeks to test it before the stable version landed.

One thing is still missing, though. Remote functions, the new type-safe way to call server code from the client, remain behind an experimental flag. The team says they are the top priority for upcoming releases.

SvelteKit 3 Requirements: Minimum Versions

Before you upgrade, check your toolchain. The migration guide lists these minimum versions:

  • Node.js: v22.17 or later
  • TypeScript: v6
  • Svelte: v5.57.1 (Svelte 4 is no longer supported)
  • Vite: v8.0.12
  • @sveltejs/vite-plugin-svelte: v7

If your servers still run an older Node release, upgrade them first. Our guide to Node.js 26 LTS explains the latest long-term support line and how to move to it safely.

Key New Features in SvelteKit 3

Most of the headline changes make projects simpler to configure. Here are the ones you will notice first.

Configuration Moves to vite.config

The svelte.config.js file is gone. Instead, you pass your options straight to the sveltekit() Vite plugin. The team made this change because the Vite plugin needs the config immediately, without waiting for async resolution. Options that used to live under config.kit now become top-level plugin options.

import adapter from '@sveltejs/adapter-auto';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    sveltekit({
      adapter: adapter()
    })
  ]
});

$lib Becomes #lib

The familiar $lib alias is replaced by #lib. This uses standard Node.js subpath imports, which Vite and TypeScript understand natively. Therefore, other tools in your stack can resolve these imports without extra config. You declare them in package.json:

{
  "imports": {
    "#lib": "./src/lib/index.js",
    "#lib/*": "./src/lib/*"
  }
}

Note that subpath imports must be explicit. So write #lib/foo.js rather than #lib/foo.

Explicit Environment Variables

Environment variables are now declared in src/env.ts, and the feature is no longer experimental. For each variable, you choose whether it is public and whether it resolves at build time or when the app boots. You can also validate values with any Standard Schema library. Meanwhile, the old $env/... modules are deprecated in favour of $app/env/private and $app/env/public.

Simpler Service Workers

The $service-worker module has been removed. Instead, you import version from $app/env and build assets from the new $app/manifest module. For typed fetch events, you import self from $app/service-worker. Service workers also register as ES modules now.

Better Error Handling

Because Svelte 5 supports error boundaries, +error.svelte now shows for errors thrown during rendering, not just during loading. In addition, every error passes through handleError, including ones created with error(...). Stack traces are also source-mapped, which makes debugging much faster.

Shallow Routing Through goto

Shallow routing used to need separate pushState and replaceState helpers. Now you call goto with shallow: true instead. This keeps navigation logic in one place. In addition, shallow navigations now trigger beforeNavigate and related hooks, so analytics and guards behave consistently.

There is also a new persistState: true option. It keeps page state across reloads, which is handy for modals and multi-step forms.

Faster Builds With Rolldown

Builds now use Rolldown, the Rust-based bundler behind Vite 8. SvelteKit 3 also adopts the Vite Environment API. For larger apps, this should help builds run faster.

SvelteKit 3 Breaking Changes to Check

The automatic migration handles a lot, but you should still review these changes by hand:

  • $app/stores is replaced by $app/state. Drop the $ prefix when reading values.
  • $app/environment is renamed to $app/env.
  • pushState and replaceState give way to goto(url, { shallow: true }).
  • invalidateAll becomes refreshAll.
  • goto now rejects URLs that do not match a route. Use window.location.href for external links.
  • In $app/paths, base, assets and resolveRoute are removed. Use asset and resolve instead.
  • CSRF protection is always on. Replace checkOrigin: false with csrf.trustedOrigins.
  • The second argument to error(...) must be a string.
  • The deprecated json and text helpers should be swapped for Response.json and new Response.

Adapters changed too. For example, the Vercel adapter drops the edge runtime. Similarly, adapter-node no longer reads the ORIGIN variable; you set paths.origin instead. Cloudflare users now read bindings from the cloudflare:workers module.

How to Upgrade to SvelteKit 3

Upgrading is mostly automated. Still, we recommend doing it on a separate branch. Follow these steps:

  1. Update to the latest SvelteKit 2.x release. This surfaces deprecation warnings that point at code you will need to change.
  2. Upgrade Node.js, TypeScript, Svelte and Vite to the minimum versions listed above.
  3. Run the migration tool with the command below. It rewrites as much as it can and creates a TODO list for the rest.
  4. Work through the TODO list using the official migration guide.
  5. Update your tsconfig.json so it extends $app/tsconfig, and add your own include and exclude fields.
  6. Run your tests and a production build, then deploy to a staging environment before going live.
npx sv migrate sveltekit-3 --tasks all --confirm

Starting a fresh project instead? Simply run npx sv create my-new-app. New projects use SvelteKit 3 and #lib by default, since the sv CLI reached version 1.0.0 on the same day.

Here is the new tsconfig.json shape from the guide:

{
  "extends": "$app/tsconfig",
  "include": ["src", "test", "*"],
  "exclude": ["src/service-worker"]
}

Also, keep an eye on TypeScript itself. SvelteKit 3 needs TypeScript 6, while the TypeScript 7.1 beta is already out for testing. So pin your version and upgrade one tool at a time.

Tips for a Smooth Migration

A few habits make any major framework upgrade less stressful. First, make sure your test suite passes on SvelteKit 2 before you touch anything. That way, any new failure clearly comes from the upgrade.

Next, commit after each step. If the migration tool changes hundreds of files, a clean commit makes the diff easy to review. Finally, search your codebase for $app/stores, $env/ and $lib after the tool runs. These are the imports most likely to slip through in unusual files, such as scripts or tests.

Should You Upgrade to SvelteKit 3 Now?

For most teams, yes. The changes are well documented, and the migration tool removes much of the busywork. On top of that, new features and fixes will land on the 3.x line going forward.

However, wait a little if you depend on a community adapter or plugin that has not published a SvelteKit 3 version yet. Likewise, if you rely heavily on remote functions, remember they are still experimental. If you are comparing frameworks for a new build, our breakdown of Next.js 16.4 is a useful point of reference.

SvelteKit 3 FAQ

When was SvelteKit 3 released?

The stable version arrived on October 1, 2026, about seven weeks after the release candidate.

Does SvelteKit 3 support Svelte 4?

No. The new version requires Svelte 5, and the migration guide lists Svelte 5.57.1 as the minimum version.

Is svelte.config.js still used?

No. Your configuration now goes into the sveltekit() plugin inside your Vite config file.

Are remote functions stable in SvelteKit 3?

Not yet. You can enable them with experimental.remoteFunctions, but they also need Svelte’s experimental async mode.

Conclusion

This release is a tidy, practical upgrade. Config lives in one place, imports follow web standards, environment variables are typed, and errors are easier to trace. Most importantly, the sv migrate tool takes much of the manual work out of the jump from SvelteKit 2.

Start by upgrading Node.js and your other dependencies, then run the migration on a branch. Finally, test thoroughly before you deploy.

Sources

Need Help With Your Website or Web App?

Swrice builds and customises WordPress sites, plugins and web apps. Whether you need an upgrade, a custom feature or a fix, our team can handle it for you.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *