Skip to main content

Project structure

Edit 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.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 .gitignore and .npmrc (and .prettierrc and .eslintrc.cjs and so on, if you chose those options when running npm create svelte@latest).

Project files

src

The src directory contains the meat of your project.

  • lib contains your library code, which can be imported via the $lib alias, or packaged up for distribution using svelte-package
    • server contains your server-only library code. It can be imported by using the $lib/server alias. SvelteKit will prevent you from importing these in client code.
  • params contains any param matchers your app needs
  • routes contains the routes of your application
  • app.html is your page template ā€” an HTML document containing the following placeholders:
    • %sveltekit.head% ā€” <link> and <script> elements needed by the app, plus any <svelte:head> content
    • %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
    • %sveltekit.assets% ā€” either paths.assets, if specified, or a relative path to paths.base
    • %sveltekit.nonce% ā€” a CSP nonce for manually included links and scripts, if used
  • error.html (optional) is 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.js (optional) contains your application's hooks
  • service-worker.js (optional) contains 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 .test.js (or .test.ts) extension.

static

Any static assets that should be served as-is, like robots.txt or favicon.png, go in here.

tests

If you added Playwright for browser testing when you set up your project, the tests will live in this directory.

package.json

Your package.json file must include @sveltejs/kit, svelte and vite as devDependencies.

When you create a project with npm create svelte@latest, you'll also notice that package.json includes "type": "module". This means that .js files are interpreted as native JavaScript modules with import and export keywords. Legacy CommonJS files need a .cjs file extension.

svelte.config.js

This file contains your Svelte and SvelteKit configuration.

tsconfig.json

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 extends.

vite.config.js

A SvelteKit project is really just a Vite project that uses the @sveltejs/kit/vite plugin, along with any other Vite configuration.

Other files

.svelte-kit

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 dev or build).

previous Creating a project
next Web standards