Project Structure

SvelteKit relies on conventions: folder and file names decide how your app behaves. This chapter walks through the layout of a new project, its configuration files and the naming rules for routes.

The default layout

A TypeScript project created with sv create looks roughly like this:

my-app/
  src/
    lib/                 # shared code and components
      server/            # server-only code
    routes/              # pages and endpoints (URL = folder structure)
      +layout.svelte
      +page.svelte
    app.html             # HTML template
    app.d.ts             # app-wide types (App.Locals and friends)
    hooks.server.ts      # server hooks (optional)
    hooks.client.ts      # client hooks (optional)
    params.ts            # route parameter matchers (optional)
  static/                # files served as-is (robots.txt, favicon)
  tests/                 # Playwright tests, if you added them
  package.json
  tsconfig.json
  vite.config.ts

Only src/routes and src/app.html are required; everything else is optional. The .svelte-kit/ folder is generated by the dev server and the build. You can delete it at any time, and it should not be committed.

Configuration lives in vite.config.ts

SvelteKit options are passed to the sveltekit() plugin in vite.config.ts. Older releases used a separate svelte.config.js, which the current release no longer supports, so keep that in mind when reading older tutorials. Adapters, paths, CSRF settings and other SvelteKit options all go here.

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

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

Regular Vite settings, such as the server port, proxies or extra plugins, go into the same defineConfig call.

The #lib alias and package.json

Code in src/lib is imported through the #lib alias. It is a Node.js subpath import, so it is declared in the imports field of package.json, and imports include the file extension.

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

import { formatDate } from '#lib/date.js';
import Button from '#lib/components/Button.svelte';

When you come across examples using the older $lib alias, read them as #lib plus an explicit extension. tsconfig.json extends the configuration SvelteKit generates, and your project decides which files to include.

Route file conventions

Each folder inside src/routes becomes a URL segment, and files starting with + define what that route does.

Folder names follow conventions too. [slug] is a dynamic parameter, [[lang]] is an optional parameter, [...rest] matches the rest of the path, and a folder in parentheses such as (group) does not appear in the URL; it only groups routes under a shared layout.

src/routes/
  (marketing)/
    +layout.svelte       # shared shell for marketing pages
    pricing/+page.svelte # /pricing
  blog/
    +page.svelte         # /blog
    [slug]/
      +page.svelte       # /blog/hello-world
      +page.server.ts
  api/
    search/+server.ts    # /api/search

Param matchers and hooks

To validate route parameters, define matchers in a single src/params.ts file. A matcher returns the value when it is acceptable and undefined otherwise.

import { defineParams } from '@sveltejs/kit/params';

export const params = defineParams({
  fruit: (param) => (param === 'apple' || param === 'orange' ? param : undefined)
});

With this in place, src/routes/fruits/[name=fruit]/+page.svelte matches only apple and orange. Code that should run around every request belongs in the handle function of src/hooks.server.ts; later chapters show how to put per-request values, such as the signed-in user, on event.locals.

Summary

• Pages and endpoints live in src/routes, shared code in src/lib, and static files in static.
• SvelteKit is configured through the sveltekit() plugin options in vite.config.ts.
• Import from src/lib with the #lib alias and an explicit file extension.
• The +page, +layout, +server and +error files, together with [param] and (group) folders, define your routing.