Getting Started with SvelteKit

In this chapter you will create a SvelteKit project, start the development server and edit your first page. Along the way we cover editor setup and the everyday commands you will use.

What SvelteKit is

Svelte is a UI framework that compiles components into efficient JavaScript at build time. SvelteKit is the application framework built on top of it: it adds routing, server-side rendering (SSR), data loading, form handling, and building and deploying your app. Vite powers the dev server and the bundling, and SvelteKit itself runs as a Vite plugin. If Next.js is the app framework for React, SvelteKit plays the same role for Svelte.

Prerequisites

• A current LTS release of Node.js, plus npm (or pnpm, Yarn or Bun)
• An editor: Visual Studio Code with the official Svelte for VS Code extension is recommended
• Basic familiarity with the terminal

Check which Node.js version you have installed. If it is older than the minimum SvelteKit requires, download the LTS release from nodejs.org.

node --version
npm --version

Creating a project

Projects are created with sv, the official Svelte command-line tool. There is nothing to install globally; run it through npx.

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

sv create asks a few questions:

To skip the prompts, pass the options directly. This guide uses TypeScript throughout.

npx sv create my-app --template minimal --types ts --no-add-ons --install npm

# Add integrations later
npx sv add prettier eslint
npx sv add vitest playwright

Running the dev server

npm run dev starts the Vite dev server at http://localhost:5173 by default. When you save a file, hot module replacement (HMR) updates only what changed, without a full page reload.

# Open the browser automatically
npm run dev -- --open

# Expose the server to other devices on your network
npm run dev -- --host

Editing your first page

src/routes/+page.svelte is the home page (/). Replace its contents with the following and save. $state is a Svelte 5 rune that creates reactive state: whenever the value changes, the UI updates.

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

<h1>Hello, {name}!</h1>

<input bind:value={name} />
<button onclick={() => count++}>
  Clicked {count} times
</button>

bind:value creates a two-way binding between the input and the variable, and onclick passes an event handler just like a regular HTML attribute.

A second page and a link

Create src/routes/about/+page.svelte with the content below, then add <a href="/about">About</a> to the home page.

<svelte:head>
  <title>About</title>
</svelte:head>

<h1>About</h1>
<p>This page lives at /about.</p>
<a href="/">Back home</a>

Anything inside <svelte:head> is placed in the document head, so each page can set its own title and meta tags. When you click the link, SvelteKit loads only the code it needs and swaps the page without a full reload. The first request is still rendered to HTML on the server, so search engines see real content.

Everyday commands

The scripts section of package.json includes:

Editor setup

In VS Code, the Svelte for VS Code extension adds syntax highlighting, completion, inline type errors and formatting for .svelte files. Extensions built on the same language server exist for other editors, including JetBrains IDEs, Neovim and Zed. Running npm run check before you commit is a good habit, since it checks the whole project at once.

Summary

• SvelteKit is a Vite-based framework that adds routing, SSR, data loading and deployment on top of Svelte components.
• Create a project with npx sv create and start it with npm run dev.
• Pages are +page.svelte files inside src/routes, and the folder structure defines the URLs.
• Use npx sv add to bring in integrations at any time.