SvelteKit: build fast web apps with Svelte

Why SvelteKit is worth using

SvelteKit is the official app framework for Svelte. Svelte is a compiler: it turns your components into small, plain JavaScript at build time instead of shipping a big framework runtime to the browser. SvelteKit adds routing, data loading, server code, and builds on top of that.

• Less code to write. Svelte components are mostly plain HTML, CSS, and JavaScript. Reactivity is built into the language with runes like $state, so you don’t need hooks or extra state libraries.
• Small and fast in the browser. The compiler outputs only the code your page needs, so bundles stay small and pages load quickly.
• Routing from your folders. Add a folder with a +page.svelte inside src/routes and you have a new page.
• Server rendering by default. The first visit is rendered on the server for fast loads and good SEO. After that the app takes over in the browser for quick navigation between pages.
• Frontend and backend in one project. load functions, form actions, and +server.js endpoints let you fetch data and handle forms next to your pages.
• Deploy almost anywhere. Adapters build your app for Node.js, Vercel, Netlify, Cloudflare, or as a plain static site.
• Built on Vite. You get a quick dev server with instant hot reloading.

Installing SvelteKit

You need a current LTS release of Node.js. Check your version with:

node -v

There’s nothing to install globally. The sv command line tool creates the project for you:

npx sv create my-app

It asks you a few questions:

• Template: minimal for a blank app, demo for a small example game, or library for building a Svelte package
• Type checking: TypeScript, JavaScript with JSDoc, or none
• Add-ons: optional extras such as Tailwind CSS, ESLint, Prettier, Vitest, Playwright, and more
• Package manager: npm, pnpm, yarn, bun, or deno

Setting up a new app

1. npx sv create my-app – create the project
2. cd my-app
3. npm install – install dependencies (skip this if you already did it during setup)
4. npm run dev – start the dev server
5. Open http://localhost:5173
6. Edit src/routes/+page.svelte and save. The browser updates right away.

Project layout at a glance

• src/routes/ – your routes. Each folder is a URL segment and each +page.svelte is a page
• src/lib/ – shared components and utilities, imported with the $lib alias
• src/lib/server/ – server-only code (secrets, database access) that can never be sent to the browser
• src/app.html – the HTML template every page is rendered into
• static/ – files copied as-is (images, favicons, robots.txt)
• svelte.config.js – SvelteKit config, including which adapter to use
• vite.config.js – Vite config

Route file names

• +page.svelte – the page component
• +page.js – a load function that runs on the server and in the browser
• +page.server.js – a load function and form actions that only run on the server
• +layout.svelte – a layout that wraps the pages in its folder and all its subfolders
• +server.js – an API endpoint (GET, POST, etc.)

Adding a page

Create src/routes/about/+page.svelte:

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

<h1>About me</h1>

<button onclick={() => count++}>
  Clicked {count} times
</button>

Visit http://localhost:5173/about and it’s there.

Run the SvelteKit server for dev

npm run dev (runs vite dev)

Useful flags:

• npm run dev -- --open – open the site in your browser automatically
• npm run dev -- --port 4000 – use a different port
• npm run dev -- --host – make the server reachable from other devices on your network

Build for deployment

1. npm run build – production build
2. npm run preview – preview the production build locally before you deploy

How the build is packaged depends on your adapter, which is set in svelte.config.js:

• @sveltejs/adapter-auto – the default. It detects supported hosts like Vercel, Netlify, and Cloudflare
• @sveltejs/adapter-node – a standalone Node.js server you can run anywhere
• @sveltejs/adapter-static – a plain static site

Exporting a static site

1. npm i -D @sveltejs/adapter-static
2. Change the adapter in svelte.config.js:

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter()
  }
};

3. Prerender every page by adding this to src/routes/+layout.js:

export const prerender = true;

4. npm run build

The finished site is written to the build/ folder. Upload that folder to any static host.

note

• Features that need a server at request time, such as form actions and +page.server.js code that reads cookies, won’t work in a static build
• On GitHub Pages, if your repo isn’t named your-username.github.io, set kit.paths.base in svelte.config.js to your repo name
• Add more add-ons to an existing project later with npx sv add (for example npx sv add tailwindcss)