Project structureEdit this page on GitHub
A typical SvelteKit project looks like this:
my-project/ ├ src/ │ ├ lib/ │ │ ├ server/ │ │ │ └ [your server-only lib files] │ │ └ [your lib files] │ ├ params/ │ │ └ [your param matchers] │ ├ routes/ │ │ └ [your routes] │ ├ app.html │ ├ error.html │ ├ hooks.client.js │ └ hooks.server.js ├ static/ │ └ [your static assets] ├ tests/ │ └ [your tests] ├ package.json ├ svelte.config.js ├ tsconfig.json └ vite.config.js
You'll also find common files like
.eslintrc.cjs and so on, if you chose those options when running
npm create svelte@latest).
src directory contains the meat of your project. Everything except
src/app.html is optional.
libcontains your library code (utilities and components), which can be imported via the
$libalias, or packaged up for distribution using
servercontains your server-only library code. It can be imported by using the
$lib/serveralias. SvelteKit will prevent you from importing these in client code.
paramscontains any param matchers your app needs
routescontains the routes of your application. You can also colocate other components that are only used within a single route here
app.htmlis your page template — an HTML document containing the following placeholders:
<script>elements needed by the app, plus any
%sveltekit.body%— the markup for a rendered page. This should live inside a
<div>or other element, rather than directly inside
<body>, to prevent bugs caused by browser extensions injecting elements that are then destroyed by the hydration process. SvelteKit will warn you in development if this is not the case
paths.assets, if specified, or a relative path to
%sveltekit.nonce%— a CSP nonce for manually included links and scripts, if used
%sveltekit.env.[NAME]%- this will be replaced at render time with the
[NAME]environment variable, which must begin with the
PUBLIC_). It will fallback to
''if not matched.
error.htmlis the page that is rendered when everything else fails. It can contain the following placeholders:
%sveltekit.status%— the HTTP status
%sveltekit.error.message%— the error message
hooks.client.jscontains your client hooks
hooks.server.jscontains your server hooks
service-worker.jscontains your service worker
You can use
.ts files instead of
.js files, if using TypeScript.
If you added Vitest when you set up your project, your unit tests will live in the
src directory with a
Any static assets that should be served as-is, like
favicon.png, go in here.
If you added Playwright for browser testing when you set up your project, the tests will live in this directory.
package.json file must include
When you create a project with
npm create svelte@latest, you'll also notice that
"type": "module". This means that
export keywords. Legacy CommonJS files need a
.cjs file extension.
This file contains your Svelte and SvelteKit configuration.
This file (or
jsconfig.json, if you prefer type-checked
.js files over
.ts files) configures TypeScript, if you added typechecking during
npm create svelte@latest. Since SvelteKit relies on certain configuration being set a specific way, it generates its own
.svelte-kit/tsconfig.json file which your own config
A SvelteKit project is really just a Vite project that uses the
@sveltejs/kit/vite plugin, along with any other Vite configuration.
As you develop and build your project, SvelteKit will generate files in a
.svelte-kit directory (configurable as
outDir). You can ignore its contents, and delete them at any time (they will be regenerated when you next