> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/sveltejs/kit/llms.txt
> Use this file to discover all available pages before exploring further.
# Project structure
> Learn about the files and folders that make up a SvelteKit project
A typical SvelteKit project looks like this:
```tree theme={null}
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
│ ├ service-worker.js
│ └ instrumentation.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 `.gitignore` and `.npmrc` (and `.prettierrc` and `eslint.config.js` if you chose those options when running `npx sv create`).
## Project files
### src
The `src` directory contains the core of your project. Everything except `src/routes` and `src/app.html` is optional.
Contains your library code (utilities and components), which can be imported via the `$lib` alias, or packaged up for distribution using `svelte-package`.
```javascript theme={null}
import { myUtility } from '$lib/utils';
import MyComponent from '$lib/components/MyComponent.svelte';
```
The `$lib` alias automatically resolves to `src/lib`, making imports cleaner and more portable.
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.
```javascript theme={null}
import { db } from '$lib/server/database';
```
Attempting to import `$lib/server` modules in client code will cause a build error. This prevents accidentally leaking sensitive server-side code to the browser.
Contains param matchers for advanced routing. These allow you to validate route parameters.
```javascript src/params/uuid.js theme={null}
/** @type {import('@sveltejs/kit').ParamMatcher} */
export function match(param) {
return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/.test(param);
}
```
Use in routes like: `src/routes/user/[id=uuid]/+page.svelte`
Contains the routes of your application. You can also colocate other components that are only used within a single route here.
Routes are determined by the file structure:
* `+page.svelte` — A page component
* `+page.js` — Universal load function
* `+page.server.js` — Server-only load function and actions
* `+layout.svelte` — Layout component
* `+layout.js` — Layout load function
* `+server.js` — API endpoint
* `+error.svelte` — Error page
See the [routing documentation](/core-concepts/routing) for more details.
Your page template — an HTML document containing placeholders:
```html src/app.html theme={null}
%sveltekit.head%
%sveltekit.body%
```
**Available placeholders:**
* `%sveltekit.head%` — `` and `