Framework · Since 2020

SvelteKit

SvelteKit is the official framework for building web apps with Svelte, with file-based routing, server rendering, data loading and flexible deployment.

Start the guide Discussions

SvelteKit is the official application framework from the Svelte team, first released in 2020 and developed in the open. It builds on Svelte, which compiles components into efficient JavaScript at build time, and adds routing, server-side rendering (SSR), data loading, form handling, and building and deploying your app, with Vite powering the dev server and bundling. The current generation of Svelte expresses reactivity through runes such as $state, $derived, $effect and $props.

SvelteKit shines because you can choose a rendering strategy per page. Content that is the same for everyone, like blog posts and docs, can be prerendered at build time; per-user pages can be rendered on the server; and screens that depend heavily on browser APIs can render on the client only. Form actions work without JavaScript and are progressively enhanced, and by switching adapters you can deploy the same code to a Node.js server, a static host or platforms such as Vercel, Netlify and Cloudflare.

To get started, create a project with npx sv create and work through the interactive tutorial on svelte.dev, covering Svelte basics first and then SvelteKit. Older material often shows syntax and configuration that has since changed, such as export let, $lib and svelte.config.js, so learn from the official docs and the current runes syntax.

Highlights

Compiled components with runes

$state, $derived, $effect and $props make reactivity explicit, and the compiler produces code that updates only what changed, with no virtual DOM.

File-based routing and layouts

The folder structure of src/routes is your URL structure; +page, +layout, +server and +error files define pages, shells, APIs and error screens.

Rendering chosen per page

Pick server rendering, client rendering or prerendering for each page with the prerender, ssr and csr options.

Load functions and form actions

Fetch data with automatically typed load functions, and change it with form actions that work even without JavaScript.

Where it is used

Content sites such as blogs and documentation
Full-stack web apps with authentication and a database
Admin tools and dashboards
Marketing sites deployed to static hosting

Install

1
Set up Node.js
SvelteKit development runs on Node.js. Install a current LTS release, then open a new terminal and check that node and npm print their versions.
```
node --version && npm --version
```
2
Create a project
Use sv, the official command-line tool, to create a new project. You can pick a template, choose TypeScript, and add integrations such as Prettier, ESLint, Vitest and Playwright.
```
npx sv create my-app
```
3
Start the dev server
Move into the project folder, install dependencies and start the dev server. Your browser opens http://localhost:5173, and changes appear as soon as you save.
```
cd my-app && npm install && npm run dev -- --open
```

Your first program

Your first page

src/routes/+page.svelte is the home page (/). The count variable, created with the $state rune, updates the UI whenever it changes, and the function passed to the onclick attribute increments it on each click. Add more pages by creating folders, for example src/routes/about/+page.svelte.

src/routes/+page.svelte

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

<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
  Clicked {count} times
</button>

npx sv create my-app && cd my-app && npm install && npm run dev

Everyday tools

sv: The official Svelte CLI. sv create scaffolds projects, and sv add sets up integrations such as Tailwind CSS, Vitest, Playwright and Drizzle.
Vite: The build tool behind SvelteKit's dev server and production builds. It starts fast, supports HMR, and SvelteKit runs as a Vite plugin.
svelte-check: A command-line tool that reports type errors and Svelte-specific issues across the project. Run it with npm run check.
Svelte for VS Code: The official VS Code extension, providing syntax highlighting, completion, inline type errors and formatting for .svelte files.

Step-by-step guide

Six chapters that take you from installation to the core ideas of SvelteKit.

Official docs and resources

Languages

Discussions

Start a discussion

Ask questions, share experience and trade opinions about SvelteKit.

No discussions yet. Start the first one.