Creating a SvelteKit Project — SvelteKit Tutorial

SvelteKit projects are scaffolded with a single command, using Vite's project creator underneath. You don't hand-configure a bundler, dev server, or TypeScript setup — the CLI asks a few questions and generates a working project.

Scaffolding a project

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

The prompts let you choose things like TypeScript vs. JavaScript, ESLint/Prettier, and whether to start from a minimal template or one with demo routes already in place. Pick the minimal template if you want to see routing "click" as you add files yourself, rather than starting from something pre-built.

npm run dev starts a local dev server (by default at http://localhost:5173) with hot module replacement — edits to .svelte files update in the browser without a full reload, and your component state is preserved where possible.

What gets generated

my-app/
├── src/
│   ├── routes/
│   │   └── +page.svelte
│   ├── app.html
│   ├── app.d.ts
│   └── app.css (optional, if selected)
├── static/
│   └── favicon.png
├── svelte.config.js
├── vite.config.js
└── package.json

A few of these are worth understanding right away:

src/app.html is the single HTML template every page is injected into. SvelteKit replaces %sveltekit.head% and %sveltekit.body% placeholders with your rendered page.
svelte.config.js configures SvelteKit itself — most importantly, which adapter to build for (covered later, when we get to deployment).
vite.config.js configures the underlying build tool; SvelteKit is a Vite plugin, so anything Vite supports (env variables, aliases, other plugins) is available to you.

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};

export default config;

adapter-auto is the default — it detects common hosts (Vercel, Netlify, Cloudflare) at build time and picks the right adapter automatically. You'll usually pin this to a specific adapter once you know where the app is deploying.

The one file that matters most right now

Open src/routes/+page.svelte — it's an ordinary Svelte component, and it's already your homepage:

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

<h1>Welcome to SvelteKit</h1>
<button onclick={() => count++}>
  Clicked {count} times
</button>

There's nothing SvelteKit-specific about this file's contents — it's the location (src/routes/+page.svelte) that tells SvelteKit "this is a page, and it lives at /." That mapping between file location and URL is the subject of the next lesson.

Scaffolding a project

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

What gets generated

my-app/ ├── src/ │ ├── routes/ │ │ └── +page.svelte │ ├── app.html │ ├── app.d.ts │ └── app.css (optional, if selected) ├── static/ │ └── favicon.png ├── svelte.config.js ├── vite.config.js └── package.json

A few of these are worth understanding right away:

src/app.html is the single HTML template every page is injected into. SvelteKit replaces %sveltekit.head% and %sveltekit.body% placeholders with your rendered page.

svelte.config.js configures SvelteKit itself — most importantly, which adapter to build for (covered later, when we get to deployment).

vite.config.js configures the underlying build tool; SvelteKit is a Vite plugin, so anything Vite supports (env variables, aliases, other plugins) is available to you.

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};

export default config;

The one file that matters most right now

Open src/routes/+page.svelte — it's an ordinary Svelte component, and it's already your homepage:

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

<h1>Welcome to SvelteKit</h1>
<button onclick={() => count++}>
  Clicked {count} times
</button>